echarts - Mark special areas on the X-axis

const box = document.querySelector('.box');
const e = echarts.init(box);
const arr1 = [300, 1280, 250, 260, 270, 300, 1050, 500, 120, 390, 380, 390, 400];
const arr2 = [12, 20, 30, 40, 50, 10, 4, 10, 5, 10, 20, 40, 10, 11, 20, 10, 12];
const option = {
  title: {
    text: '一天用电量分布',
    subtext: '纯属虚构'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['用电量', '用电率']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30']
  },
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        formatter: '{value} W'
      },
      splitLine: {
        show: true
      },
      axisPointer: {
        snap: true
      }
    },
    {
      type: 'value',
      axisLabel: {
        formatter: '{value} %'
      },
      splitLine: {
        show: false
      },
      axisPointer: {
        snap: true
      }
    }
  ],

  series: [
    {
      name: '用电量',
      type: 'line',
      smooth: true,
      smoothMonotone: "x",
      animation: true,
      showSymbol: false,
      symbol: "circle",
      symbolSize: 10,
      data: arr1,
      markArea: {
        data: [
          [
            {
              name: '早高峰',
              xAxis: '08:45'
            },
            {
              xAxis: '10:00'
            }
          ],
          [
            {
              name: '晚高峰',
              xAxis: '17:30'
            },
            {
              xAxis: '18:45'
            }
          ]
        ]
      }
    },
    {
      name: '用电率',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      smoothMonotone: "x",
      showSymbol: false,
      symbol: "circle",
      symbolSize: 10,
      data: arr2
    }
  ]
};
e.setOption(option);

Make some special marks on the x-axis to better allow users to see data in certain special time periods, such as holidays in dates and morning and evening peaks in time. The code is directly available, and both Echarts 4.0 and 5.0 are available.