echarts折线图按阈值分段设置(颜色,节点图表等)
最近有个需求,是按照色标分段将echart折线图的折线部分进行区分。
在此之前,我们有进行过对折线节点按值配置(大小、图标、值都可以在对应的回调函数中判断区分),但线并未设置。
我查看对应的官方配置项,线的颜色只可以简单设置,或者按照固定规则进行渐变色设置,这并不符合需求。
在查找后发现echart有这么一个配置项:visualMap
官方介绍是:视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)
我看了下,简单说就是设置类似大小,图案,颜色,亮度等能看到的样式的修改,而能设置的对象里,也包括线。
这里有几个需要注意的点,1.如果不设置seriesIndex的值,会默认覆盖所有series的数据样式。2.线与节点的颜色无法在再次区分(可能是我没找到)。3.样式优先级较高,会使series中对应的线,节点的样式设置失效。
附上代码:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
visualMap:{
show: true,
pieces: [ //进行分段设置,visualMap的type可以设置连续值Continuous跟分段值Piecewise两个值,这里需求需要,所以设置分段属性pieces
{
min: 0,
max: 100,
},
{
min: 100,
max:150,
},
{
min:150
}
],
inRange:{ //定义 在选中范围中 的视觉元素
color: ['#ff1122','yellow','#00ff00'],//如果是分段则一一对应
symbol: ['diamond','rect'],//分段则一一对应
symbolSize: [25]//可设置两个值进行区间变动
},
seriesIndex:0 //只影响第一组数据
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
symbol: 'triangle', //被覆盖
symbolSize: 20, //被覆盖
lineStyle: { //被覆盖
width: 4,
},
itemStyle: {
color:(a)=>{ //被覆盖
if(a.value>100){
return '#F00'
}else{
return '#0Fa'
}
}
},
},
{
data: [20, 00, 50, 0, 7, 11, 30],
type: 'line',
symbol: 'triangle',
symbolSize: 20,
lineStyle: {
width: 4,
color:'#0f0'
},
itemStyle: {
color:(a)=>{
if(a.value>10){
return '#F0f'
}else{
return '#0ff'
}
}
}
}
]
};
有同样需求的朋友可以进行参考,当然,功能还有很多,这里只进行了简单使用。