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,  // 小于等于160color: 'red' // 为红色},{gt: 160, // 大于160lte: 225, // 小于等于225color: '#5470c6' // 为蓝色},{gt: 225, // 大于225color: '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, // 小于或等于160color: 'red' // 为红色},{gt: 160.0001, // 大于160color: '#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, // 小于等于225color: '#5470c6' // 为蓝色},{gt: 225.0001, // 大于225color: '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,
}