echart 不同折线图设置不同高亮区域

效果展示：

代码:

主要思路: visualMap参数可以改为一个数组[],seriesIndex:参数可以指定哪一个数据的高亮区域

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%']
  },
  visualMap: [{
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
        gt: 1,
        lt: 2,
        color: 'rgba(0, 0, 180, 0.4)'
      },
      {
        gt: 4,
        lt: 5,
        color: 'rgba(0, 0, 180, 0.4)'
      }
    ]
  },
  {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 1,
    pieces: [
      {
        gt: 3,
        lt: 4,
        color: 'rgba(0, 180, 180, 0.4)'
      },
      {
        gt: 6,
        lt: 7,
        color: 'rgba(0, 180, 180, 0.4)'
      }
    ]
  },],
  series: [
    {
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: '#5470C6',
        width: 5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
      },
      areaStyle: {},
      data: [
        ['2019-10-10', 200],
        ['2019-10-11', 560],
        ['2019-10-12', 750],
        ['2019-10-13', 580],
        ['2019-10-14', 550],
        ['2019-10-15', 300],
        ['2019-10-16', 450],
        ['2019-10-17', 300],
        ['2019-10-18', 100]
      ]
    },
    {
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: '#5470C6',
        width: 5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
      },
      areaStyle: {},
      data: [
        ['2019-10-10', 540],
        ['2019-10-11', 560],
        ['2019-10-12', 150],
        ['2019-10-13', 280],
        ['2019-10-14', 250],
        ['2019-10-15', 200],
        ['2019-10-16', 150],
        ['2019-10-17', 100],
        ['2019-10-18', 100]
      ]
    }
  ]
};