echarts 之markLine给图表划分区间

最近遇到这个需求: 趋势图横轴为时间，现在需要将时间分段，每段代表不同的含义，并居中显示。
分段首先想到的是用visualMap，可惜最后发现这个没法设置居中的文本，也就是图中的"区间1、区间2......"不能设置。最后没办法，只能新增一个系列了，这里用的scatter，然后利用markLine可以设置文本居中的特性，然后优化亿点点细节。当然，因为实际项目中图形数据和逻辑都复杂得多，这里只来个简单例子演示核心部分。

当前echarts版本：5.0.0。

效果图：

image.png

option代码(可在echarts官网打开任意案例后复制下列代码直接运行)：

let minVal = 70;
option = {
  legend: {},
  tooltip: {
    trigger: 'axis',
    boundaryGap: false,
    formatter: (params) => {
      let str = `${params[0].value[0]}<br/>`;
      params.map((item) => {
        if (item.seriesId !== 'auxiliaryLine') {
          str += `${item.marker}${item.seriesName}: ${item.value[1]}<br/>`;
        }
      });
      return str;
    }
  },
  xAxis: [
    {
      type: 'time',
      boundaryGap: false
    }
  ],
  yAxis: {
    type: 'value',
    min: 2
  },
  dataZoom: [{ type: 'inside' }, { type: 'slider' }],
  series: [
    {
      name: '趋势1',
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
        width: 5
      },
      // areaStyle: {},
      data: [
        ['2019-10-7', 100],
        ['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: true,
      symbol: 'none',
      lineStyle: {
        // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
        width: 5
      },
      // areaStyle: {},
      data: [
        ['2019-10-7', 500],
        ['2019-10-10', 200],
        ['2019-10-16', 250],
        ['2019-10-17', 800],
        ['2019-10-18', 400]
      ]
    },
    {
      // 底部区域分割线
      id: 'auxiliaryLine',
      type: 'scatter',
      symbolSize: 5,
      data: [],
      markLine: {
        symbolSize: 10,
        label: {
          show: true,
          distance: 5,
          position: 'middle',
          fontWeight: 'bold'
        },
        lineStyle: {
          color: 'red'
        },
        data: [
          [
            {
              symbol: 'triangle',
              coord: ['2019-10-7', minVal] // 点在渲染后的图里有才行，比如y轴设置了最小值50，那么这里就不会显示
            },
            {
              symbol: 'triangle',
              name: '区间1',
              coord: ['2019-10-12', minVal]
            }
          ],
          [
            {
              symbol: 'triangle',
              name: '区间2',
              coord: ['2019-10-12', minVal] // 点在渲染后的图里有才行，比如y轴设置了最小值50，那么这里就不会显示
            },
            {
              symbol: 'triangle',
              coord: ['2019-10-16', minVal]
            }
          ],
          [
            {
              symbol: 'triangle',
              name: '区间3',
              coord: ['2019-10-16', minVal] // 点在渲染后的图里有才行，比如y轴设置了最小值50，那么这里就不会显示
            },
            {
              symbol: 'triangle',
              coord: ['2019-10-18', minVal]
            }
          ]
        ]
      },
      itemStyle: {
        color: 'red'
      },
      label: {
        show: true,
        position: 'bottom',
        formatter: (params) => {
          return params.data[0];
        }
      },
      data: [
        ['2019-10-7', minVal],
        ['2019-10-12', minVal],
        ['2019-10-16', minVal],
        ['2019-10-18', minVal]
      ]
    }
  ]
};

注意：markLine中的data需要图表中有才能显示，你会发现拖动下面的dataZoom时markLine消失了，这也我在案例中给yAxis设置min值的原因，因为这个也可能影响markLine的渲染。比如现在将min改为80，你会发现下面markLine没有了【实际项目中可取折线图最小值作为变量”minVal“的值】。