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'
          }
        }
      }
    }
  ]
};

有同样需求的朋友可以进行参考，当然，功能还有很多，这里只进行了简单使用。