echarts折线图中分段用不同颜色显示

echarts折线图中分段用不同颜色显示

• 在用echarts做折线图的时候，需要一条线段根据某个条件用两种或以上颜色显示，在官网上看到一个这样的实例：查看例子，发现是visualMap的作用，当然官网上的这个效果也是通过静态的配置实现的，但是我们可以动态的配置参数呀~
• 案例：

1. 要求：根据后端返回的数据状态的不同，将数据用不同线段的颜色渲染出来。
2. 实现： 根据官网例子改的，数据是动态获取的

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'
          })
        }
      })

效果：