echarts 折线图动态基准线设置超出基准线标红

基准线属性：markLine

线条标红关键属性：visualMap

小于： lt (less than)

大于：gt (greater than)

小于等于：lte (Less than or equal to)

大于等于：gte (Greater than or equal to)

1、基础应用——2条基准线

当存在2条基准线时，折线图切割为3部分，小于最低基准线和大于最高标准线的部分标红，中间位置为蓝色。代码如下（可直接cv到echarts官网的调试页面）：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    pieces: [
      {
        lte: 160,  // 小于等于160
        color: 'red' // 为红色
      },
      {
        gt: 160, // 大于160
        lte: 225, // 小于等于225
        color: '#5470c6' // 为蓝色
      },
      {
        gt: 225, // 大于225
        color: 'red' // 为红色
      }
    ],
    show: false, // 不显示色块的图例
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      markLine: {
        symbol: 'none',
        data: [
          {
            yAxis: 160, // 最小值
            label: {
              show: true
            },
            lineStyle: {
              type: 'dashed',
              color: '#b17063'
            }
          },
          {
            yAxis: 225, // 最大值
            label: {
              show: true
            },
            lineStyle: {
              type: 'dashed',
              color: '#b17063'
            }
          }
        ]
      }
    }
  ]
};

2. 1条基准线，该线可能为最大值，可能为最小值

一条基准线时，需要注意visualMap.pieces里面的数据不可以相同，否则会报错。解决方案就是在gt或gte的数值后加上0.0001

1. 基准线为最小值时

当基准线为最低限时，需要做到小于基准线的部分标红，其余为蓝色

// ...
visualMap: {
    pieces: [
      {
        lte: 160, // 小于或等于160
        color: 'red' // 为红色
      },
      {
        gt: 160.0001, // 大于160
        color: '#5470c6' // 为蓝色
      }
    ],
    show: false
  },
series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      markLine: {
        symbol: 'none',
        data: [
          {
            yAxis: 160, // 最小值
            label: {
              show: true
            },
            lineStyle: {
              type: 'dashed',
              color: '#b17063'
            }
          }
        ]
      }
    }
  ]

2. 基准线为最大值时

当基准线为最大限时，需要做到小于基准线的部分为蓝色，超过基准的部分为红色

 // ...
 visualMap: {
    pieces: [
      {
        lte: 225, // 小于等于225
        color: '#5470c6' // 为蓝色
      },
      {
        gt: 225.0001, // 大于225
        color: 'red' // 为红色
      }
    ],
    show: false
  },
series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      markLine: {
        symbol: 'none',
        data: [
          {
            yAxis: 225, // 最大值
            label: {
              show: true
            },
            lineStyle: {
              type: 'dashed',
              color: '#b17063'
            }
          }
        ]
      }
    }
  ]

 3. 通用方法——当不确定有几条基准线时

已知后端返回的基准线的数据格式为数组lines:[data, data]，lines第一项为最小值，第二项是最大值。lines[0]=null时则没有最小值，lines[1]=null时则没有最大值。

      // 图表超出上下限值的部分显示红色
      getVisualMapData(lines) {
        if(lines?.length) {
          if(lines[0] && lines[1]) {
            // 存在上下限值
            return [
              {
                lt: lines[0],// 小于最小值
                color: 'red',// 为红色
              },
              {
                gte: lines[0],// 大于或等于最小值
                lte: lines[1],// 小于或等于最大值
                color: '#5470c6', // 为蓝色
              },
              {
                gt: lines[1],// 大于最大值
                color: 'red',// 为红色
              },
            ];
          } else if(lines[0] && ! lines[1]) {
            // 只存在下限值
            return [
              {
                lt: lines[0],// 小于最小值
                color: 'red',// 为红色
              },
              {
                gte: lines[0] + 0.00001,// 大于或等于最小值
                color: '#5470c6',// 为蓝色
              },
            ];
          } else if(! lines[0] && lines[1]) {
            // 只存在上限值
            return [
              {
                gt: lines[1] + 0.00001,// 大于最大值
                color: 'red',// 为红色
              },
              {
                lte: lines[1],// 小于或等于最大值
                color: '#5470c6',// 为蓝色
              },
            ];
          } else {
            // 没有上下限值
            return null;
          }
        } else {
          return null;
        }
      },

使用该方法：

const visualMapData = this.getVisualMapData(lines);

// ...
option = {
  visualMap: visualMapData ? {
              pieces: visualMapData,
              show: false,
  } : undefined,
}