echarts 结合visualMap给折线图添加上下限，超出上

当前echarts版本：5.3.1，其他版本也可参考。

效果图：

image.png

echarts option代码如下，结合注释部分理解：

var upLimit = 600;  // 上限
var lowlimit = 300; // 下限

option = {
  tooltip: {
    trigger: 'axis',
    boundaryGap: false
  },
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value'
    // boundaryGap: [0, '30%']
  },
  visualMap: [
    {
      type: 'piecewise',
      show: false,
      dimension: 1,
      seriesIndex: 0,
      pieces: [
        {
          // 不指定 min，表示 min 为无限大（-Infinity）。
          max: lowlimit, // 没有设置最小值，表明当前范围 [-Infinity, max] 变色
          color: 'red'
        },
        {
          // 不指定 max，表示 max 为无限大（Infinity）。
          min: upLimit, // 没有设置最大值，表明当前范围 [min, Infinity] 变色
          color: 'red'
        }
      ],
      outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
        color: 'blue'
      }
    }
  ],
  series: [
    {
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
        width: 5
      },
      markLine: {
        symbol: 'none',
        label: {
          show: false
        },
        data: [
          {
            yAxis: upLimit
          },
          {
            yAxis: lowlimit
          }
        ]
      },
      // areaStyle: {},
      data: [
        ['2019-10-10', 200],
        ['2019-10-11', 560],
        ['2019-10-12', 750],
        ['2019-10-13', 580],
        ['2019-10-14', 250],
        ['2019-10-15', 300],
        ['2019-10-16', 450],
        ['2019-10-17', 300],
        ['2019-10-18', 100]
      ]
    }
  ]
};

注意：visualMap配置

image.png

type

continuous：类型为连续型
piecewise：类型为分段型。
查看echarts官网，因此这里选择piecewise结合pieces

image.png

dimension

image.png

我们这里要把超出上下限的部分变红，因此需要将y轴数据拿来映射，因此这里series data是个二维数组。

image.png

如果要显示多条线

效果图：

image.png

代码：

var upLimit = 600; // 上限
var lowlimit = 300; // 下限


// 定义线的颜色
let lineColor =  ['yellow','blue']
// 生成 visualMap
let visualMap = []
lineColor.map((item,index)=>{
  visualMap.push({
      type: 'piecewise',
      show: false,
      dimension: 1,
      // seriesIndex: [0, 1], // 虽然可以指定多个series，但是线的颜色只能设置一条
      seriesIndex: index,
      pieces: [
        {
          // 不指定 max，表示 max 为无限大（Infinity）。
          min: upLimit, // 没有设置最大值，表明当前范围 [min, Infinity] 变色
          color: 'red'
        },
        {
          // 不指定 min，表示 min 为无限大（-Infinity）。
          max: lowlimit, // 300 没有设置最小值，表明当前范围 [-Infinity, max] 变色
          color: 'red'
        },
      ],
      outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
        color: lineColor[index],
      },
    })
})

option = {
  tooltip: {
    trigger: 'axis',
    boundaryGap: false
  },
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value'
    // boundaryGap: [0, '30%']
  },
  visualMap: visualMap,
  color:lineColor,
  series: [
    {
      name:'线1',
      type: 'line',
      smooth: false,
      symbol: 'none',
      lineStyle: {
        // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
        width: 3
      },
      markLine: {
        symbol: 'none',
        label: {
          show: false
        },
         lineStyle:{
          color:'red'
        },
        data: [
          {
            yAxis: upLimit
          },
          {
            yAxis: lowlimit
          }
        ]
      },
      // areaStyle: {},
      data: [
        ['2019-10-10', 200],
        ['2019-10-11', 560],
        ['2019-10-12', 750],
        ['2019-10-13', 580],
        ['2019-10-14', 250],
        ['2019-10-15', 300],
        ['2019-10-16', 450],
        ['2019-10-17', 300],
        ['2019-10-18', 100]
      ]
    },
    {
      name:'线2',
      type: 'line',
      smooth: false,
      symbol: 'none',
      lineStyle: {
        // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
        width: 3
      },
      markLine: {
        symbol: 'none',
        label: {
          show: false
        },
        lineStyle:{
          color:'red'
        },
        data: [
          {
            yAxis: upLimit
          },
          {
            yAxis: lowlimit
          }
        ]
      },
      // areaStyle: {},
      data: [
        ['2019-10-10', 100],
        ['2019-10-11', 360],
        ['2019-10-12', 950],
        ['2019-10-13', 280],
        ['2019-10-14', 150],
        ['2019-10-15', 300],
        ['2019-10-16', 550],
        ['2019-10-17', 100],
        ['2019-10-18', 900]
      ]
    }
  ]
};