visualmap折线图_echarts折线图实现切断效果

需求描述：

折线图如果相邻的两个值都是0则不显示这一段水平折线。

分析

如果折线图上的数值为0会在，x轴有一段水平线，如果能将这段隐藏就达到了折线图切割的效果。

echarts中有个折线图渲染属性 visualMap， 可以利用这个属性对折线进行修饰。让被选中的区间透明就达到切割的目的了。

全局设置--visualMap是个对象

visualMap:{

show: false,

dimension: 0,

pieces: [{ // 这是需要渲染的折线区间。得到数据后只需要计算出这个区间就可以了

gt: 6,

lt: 8

}, {

gt: 12,

lt: 13

}]

, outOfRange: {opacity: 1} // 区间外渲染

, inRange: {opacity: 0} // 区间内透明，即如果数据区间为0就不显示

}

单个设置 -- visualMap是个数组

visualMap: [

{

show: false,

seriesIndex: 0, // 如果有多条折线可利用此属性区别渲染哪条折线

dimension: 0,

pieces: [{ // 这是需要渲染的折线区间。得到数据后只需要计算出这个区间就可以了

gt: 6,

lt: 8

}, {

gt: 12,

lt: 13

}]

, outOfRange: {opacity: 1} // 区间外渲染

, inRa