因工作需要, 需求是线段的颜色变化,然后在网上找了很多实例, 文档中也看了很多的配置属性, 都没有找到可以满足自己要求的 ( 一般实例都是整体的一条线, 并没有配置两点之间来设置线的属性 ), 所以只能自己捣鼓了
但是有个需求依然没有满足, 就是在浅色部分需要线变细, 达到变细变浅的效果, 希望知道的大佬可以告诉我怎么做, 谢谢啦
这边各自配置发挥了什么作用我会大致说明一下, 不对的也请各位大佬纠正
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body style="height: 100vh; background-color: #34495e">
<div id="myChart" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
const eCharts = echarts.init(document.getElementById('myChart'))
let data = [80, 132, 60, 234, 190, 330, 200, 450]
// 因为需要配置每两个点之间的线的样式, 所以要把一个线拆分, 拆分数量根据数据长度决定
// 最终做出colorStops的数组
// 大致是需要这样的的数据
// [{offset: 0, color: '#3f3'},
// {offset: .2, color: 'rgba(255,255,255,0)'},
// {offset: .4, color: '#3f3'},
// {offset: .6, color: 'rgba(255,255,255,0)'},
// {offset: .8, color: '#3f3'},
// {offset: 1, color: 'rgba(255,255,255,0)'},]
// offset表示折线图的某个比例的部分, 比如 .2 就表示在整个折线 20%的位置, 所以我们要算出每个点在折线上的位置
let length = data.length - 1 // 为什么是 -1, 因为2个点是用1条线, 3个点是用两条线,以此类推
let r = 1 / length // 算出比例
let colorStopArr = data.map((item, index) => { // 算出数据
if(index % 2 === 0) {
return {offset: index * r, color: '#3f3'}
} else {
return {offset: index * r, color: 'rgba(255,255,255,0)'}
}
})
let option = {
tooltip: {
trigger: 'axis', // 指示器显示规则, axis为根据座标, item为根据折线点具体位置
axisPointer: { // 指示器配置
type: 'line',
label: {
show: true,
backgroundColor: '#333',
color: '#9ff'
}
}
},
title: { // 标题的配置
text: '标题',
textStyle: { // 标题的样式
fontWeight: 'normal',
fontSize: 16,
color: '#fff'
}
},
grid: { // 图表布局
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true // 用于防止图表溢出, 具体可以改为false查看效果
},
toolbox: {
// feature: {
// saveAsImage: {} // 这里可以配置保存图片的按钮
// }
},
xAxis: { // X轴配置
type: 'category',
boundaryGap: true, // true表示刻度作为分割线, false则反之
data: ['周一','周二','周三','周四','周五','周六','周日', "周一"],
axisLine: { // 座标轴的配置
symbol: ['none', 'arrow'], // 显示箭头, 接受一个数组两个成员, 左右箭头
symbolOffset: [0 , 12], // 同理, 箭头位置, 值越大则向x轴偏移位置越大
lineStyle: {
width: 4,
color: '#9f9'
}
},
axisTick: {
show: false
},
splitArea: { // 座标轴在grid(图表)区域中的分隔区域
show: true, // 默认不显示
interval: 0, // 默认为0, 1则表示隔一个标签显示一个标签, 以此类推
areaStyle: {
color: ['#57606f', '#2c3e50'], // 可以接受数组, 表示分隔的颜色按照数组中交替
}
}
},
yAxis: { // Y轴配置
splitLine: {show: false}, // 座标轴在图表上的分割线
type: 'value',
axisLine: { // 同理X轴的配置
symbol: ['none', 'arrow'],
symbolOffset: [0 , 12],
lineStyle: {
width: 4,
color: '#9f9'
}
},
axisTick: {
show: false
},
},
series: [
{
name:'折线图',
type:'line', // 图表类型, type设置为折线图
data: data, // 数据
symbol: 'circle', // 折点的形状
symbolSize: 25, // 折点的大小
lineStyle: { // 折线的样式配置
width: 7,
color: {
type: 'linear',
x: 0,
x2: 1,
colorStops: colorStopArr, // 配置折线样式, 把之前计算好的数据代入
}
},
itemStyle: { // 配置折点的样式, 这里是配置了一个空心圆, 配合scatter图表一起就形成了效果
normal: {
color: 'rgba(0, 0, 0, 0)',
borderColor: "#9f9",
borderWidth: 2,
borderRadius: 25,
shadowColor: 'rgba(0, 0, 0, .6)', // 阴影颜色
shadowBlur: 0, // 阴影模糊度
shadowOffsetY: 2, // 阴影在Y轴上的偏移
shadowOffsetX: 2, // X轴的偏移
}
},
},
{
type: 'scatter',
symbolSize: 5,
itemStyle: {
color: '#9f9'
},
// silent: true, // 不响应鼠标事件
data: data
}
]
};
eCharts.setOption(option);
</script>
</body>
</html>