echarts折线图中分段用不同颜色显示
程序员文章站
2022-06-07 20:08:32
...
echarts折线图中分段用不同颜色显示
- 在用echarts做折线图的时候,需要一条线段根据某个条件用两种或以上颜色显示,在官网上看到一个这样的实例:查看例子,发现是visualMap的作用,当然官网上的这个效果也是通过静态的配置实现的,但是我们可以动态的配置参数呀~
- 案例:
- 要求:根据后端返回的数据状态的不同,将数据用不同线段的颜色渲染出来。
- 实现: 根据官网例子改的,数据是动态获取的
visualMap部分修改为:
visualMap: {
show: false,
dimension: 0,
pieces: [
{
lte: 0,
color: 'green'
}
], //pieces的值由动态数据决定
outOfRange: {
color: 'green'
}
}
this.momentChar.setOption({
xAxis: { data: xAxis_arr },
visualMap: {
show: false,
dimension: 0,
pieces: pieces //pieces 是整理好 的数据
},
series: [
{ data: series_arr },
]
})
整理的后端数据:
let pieces = []
res.map(item => {
if (item.state == 1) {
pieces.push({
gt: item.date,
lte: Number(item.date) + 1,
color: 'red'
})
} else if (item.state == 2) {
pieces.push({
gt: item.date,
lte: Number(item.date) + 1,
color: 'yellow'
})
}
})
上一篇: ECharts坐标轴标签长度问题
下一篇: 华为智慧屏全网首测:糟糕 上瘾的感觉
推荐阅读