echarts折线图超过标准线显示不同颜色

echarts折线图超过标准线设置不同颜色需要添加属性visualMap

效果图如下：

代码如下：

  option= {
            tooltip: {
              trigger: "axis",
              axisPointer: {
              type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
              },
            },
            color:['#FEFFFF','#76F7FE'],
         
            visualMap: [
            {
              seriesIndex: 0, //指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
              top: 30,//调整超过标准线图例位置
              right: 940,//调整超过标准线图例位置
              textGap:5,//调整超过标准线图例与文字间距
              itemWidth:9,                  
              show:true,//是否显示颜色块提示
              orient:'horizontal',
              formatter:'标识3',
              textStyle:{
                color:'#FE7451',
                fontWeight:'bolder',
              },
              inRange:{
                color:['FE7451'],
                 symbol:"circle",              // 图元符号形状，可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'pin'          
             },
              pieces: [
                {
                  gt: 9,//小于，less than
                  lte: 100,//大于，greater than
                  color: '#FE7451',//数据大于9时折线图的颜色
                }, 
              ],
              outOfRange: { // 在选中范围外的视觉元素。
                color: '#FEFFFF',//数据小于9时折线图的颜色
              },
              
            },
            {
              seriesIndex: 1, //指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
              top: 30,
              right: 880,
              textGap:5,
              itemWidth:9,
              show:true,//是否显示颜色块提示
              orient:'horizontal',
              formatter:'标识4',
              textStyle:{
                color:'#FFF77A',
              },
              inRange:{
                color:['FE7451'],
                 symbol:"circle",              // 图元符号形状，可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'pin'          
             },
              pieces: [
                {
                  gt: 3,//小于，less than
                  lte: 100,//大于，greater than
                  color: '#FFF77A',//数据大于3时折线图的颜色
                }, 
              ],
              outOfRange: { // 在选中范围外的视觉元素。
                color: '#73c0de',//数据小于3时折线图的颜色
              }
            }
          ],

            grid: {
              left: "5%",
            right: "15%",
              containLabel: true,
            },
            
             legend: {
              right:1000,//折线图图例位置调整
              top: 30,//折线图图例位置调整
              bottom: 30,//折线图图例位置调整
              itemGap: 15,
              itemHeight: 9,
              textStyle: {
                color: "auto",//如果图例文字颜色与图例颜色保持一致，此属性需要设置成"auto"
              },
              icon: 'circle',            
             },
           
              xAxis: {
                show: true,      
                type: 'category',
                 data:  ['列1', '列2', '列3', '列4', '列5', '列6', '列7', '列8', '列9', '列10', '列11', '列12'],
              axisLabel: {
                //x轴文字的配置
                  show: true,
                  textStyle: {
                   color: "rgba(219,225,255,1)",
                   },
               },
                axisLine: {
                  show: true,    // 是否显示坐标轴轴线
                  symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
                  lineStyle: {
                    color: '#fff',    // 坐标轴线线的颜色
                    width: '1',    // 坐标轴线线宽
                    type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
                  },
                },
 

              },
              yAxis: {
                show: true,      
                name:'(KG/个)',
                type: 'value',
                min: 0,
                max: 10,
                axisLabel: {
                  //x轴文字的配置
                  show: true,
                  textStyle: {
                    color: "rgba(219,225,255,1)",
                  },
                },
                axisLine: {
                  show: true,    // 是否显示坐标轴轴线
                  symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
                  lineStyle: {
                    color: '#fff',    // 坐标轴线线的颜色
                    width: '1',    // 坐标轴线线宽
                    type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
                  },
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: ['#072293'],
                    width: 1,
                    type: 'solid',
                  },
                },
            
              },
             
              series: [
                {
                    name:'标识1',
                    data: [8.0, 9.1, 8.4, 9.3, 8.89, 8.69,8.2,9.5,8.99,8.43,9.66,7.8],
                    type: 'line',
                    symbol:'circle',
                    symbolSize:8,
                    itemStyle:{
                        color:'#FEFFFF',
                    },
                    markLine: {
                        silent: true, // 鼠标移动到标记线上无操作
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                label : {
                                    show:true,
                                    color: '#ffffff',
                                },
                            lineStyle: {
                                color: '#C94C16',
                                type: 'solid',
                                width: 1 
                                }
                            }
                        },                       
                        data: [
                            {
                              yAxis: '9' // 分割线的位置
                            }
 
                        ]
                      },
                    label: {
                show: true,
                color: "auto",//如果折线图上面的文字需要与折线图颜色保持一致，该属性要设置成"auto"
                position: 'top',
                           },
                },
                {
                    name:'标识2',
                    data: [1.0, 3.6, 1.4,4.5, 1.89, 2.69,3.9,2.5,5.6,2.43,1.66,2.5],
                    type: 'line',
                    symbol:'circle',
                    symbolSize:[8,8],
                    itemStyle:{
                        color:'#76F7FE',
                    },
                    markLine: {
                        silent: true, // 鼠标移动到标记线上无操作
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                label : {
                                    show:true,
                                    color: '#ffffff',
                                },
                            lineStyle: {
                                color: '#C94C16',
                                type: 'solid',
                                width: 1 
                                }
                            }
                        },                       
                        data: [
                            {
                              yAxis: '3' // 分割线的位置
                            }
 
                        ]
                      },
                   
                    label: {
                show: true,
                color: "auto",//如果折线图上面的文字需要与折线图颜色保持一致，该属性要设置成"auto"
                position: 'top',
                           },
                },          
              ],              
            }