echarts折线图超出某一数值变色，visualMap属性不生效

echarts折线图超出某一数值变色

• 效果图
• 实现代码及部分属性介绍
• 注意事项

效果图

实现代码及部分属性介绍

let timeArray= ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00']
let arrayOne= [24, 40, 39, 15, 16, 10, 60]
let arrayTwo= [50, 50, 50, 50, 50, 50, 50]
option = {
    backgroundColor:'rgba(26,53,88,0.53)',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: 'rgba(9, 24, 48, 0.5)',
      borderColor: '#54d5ffaa',
      textStyle: {
        color: '#CFE3FC'
      },
      borderWidth: 1,
      confine: true // 该属性为true可以保持tooltips在图内
    },
    legend: {
      itemWidth: 30,
      itemHeight: 8,
      right: '5%',
      textStyle: {
        color: '#FFFFFF'
      },
      data: ['实际值', '预警值']
    },
    grid: {
      top: '20%',
      left: '1%',
      right: '1%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#f9f9f9'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#d1e6eb',
            margin: 15
          }
        },
        axisTick: {
          show: false
        },
        data: timeArray
      }
    ],
    yAxis: [
      {
        name: '实际值(m)',
        nameTextStyle: {
          align: 'left',
          color: 'rgba(255,255,255,0.85)',
          padding: [0, 0, -5, 10],
          fontSize: 13
        },
        type: 'value',
        min: 0,
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#0a3256'
          }
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 12
          }
        }
      }
    ],
    // 官方解释：visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
    // 适用于颜色分段显示
    visualMap: [{
      show: false,
      seriesIndex: 0, //指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
      pieces: [
        {
          gt: 0, //小于，less than
          lt: arrayTwo[0], //大于，greater than
          // lte（小于等于 less than or equals），gte（大于等于，greater than or equals）
          color: '#41C0FF',
          borderColor: '#41C0FF'
        }
      ],
      outOfRange: { // 在选中范围外的视觉元素。
        color: '#FF4343',
        borderColor: '#FF4343'
      }
    }],
    series: [
      {
        name: '实际值',
        type: 'line',
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        lineStyle: {
          normal: {
            // color: '#50F7FF' // 线条颜色，分段展示时不能设置，不然会以这个颜色为准
          }
          // borderColor: '#41C0FF' // 边框颜色，分段展示时不能设置，不然会以这个颜色为准
        },
        itemStyle: {
          normal: {
            color: '#50F7FF'
          }
        },
        data: arrayOne
      },
      {
        name: '预警值',
        type: 'line',
        showSymbol: false,
        showAllSymbol: false,
        legendHoverLink: false,
        symbol: 'emptyCircle',
        symbolSize: 6,
        lineStyle: {
          normal: {
            type: 'dashed',
            color: '#FFBF2C' // 线条颜色
          },
          borderColor: '#FFBF2C'
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#FFBF2C',
            borderColor: '#FFBF2C'
          }
        },
        data: arrayTwo
      }
    ]
  }

注意事项

如果设置了visualMap ，但是折线图分段显示不生效：
一是要看echarts版本；
二要看series的lineStyle是不是设置了颜色，lineStyle设置了颜色后会以lineStyle的颜色为准