ecahrts实现两个不同天数的折线（在同一个时间段）

背景

开发中有个需求：当天的数据和其他日期做对比，实现两条折线。
难点：两个不同日期的时间如何在同一个x轴上显示

实现效果图在这里插入图片描述

代码实现（只写核心代码和实现思路）

实现思路：写两个x轴，一个是对比日期的x轴线，一条是当天的时间x轴线。注意：两条的x轴时间要对应上，不然图形会很怪。
核心代码：（使用 xAxisIndex 对应不同的轴）

// 双条x轴
   xAxis: [
          {
            type: 'time',
            axisLine: {
              show: false,
              onZero: false
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              show: true,
              formatter: '{HH}:{mm}'
            },
            boundaryGap: false,
            splitNumber: 9,
            axisPointer: {
              snap: false
            },
            min: Math.min(...this.nowTime),
            max: Math.max(...this.nowTime)
          },
          {
            type: 'time',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisPointer: {
              snap: false
            },
            boundaryGap: false,
            splitNumber: 9,
            min: Math.min(...this.selectTime),
            max: Math.max(...this.selectTime),
            onZero: false
          }
        ],
        // 两条x轴对应的数据
            series: [
          {
            name: '当前运行负荷',
            type: 'line',
            smooth: false,
            data: this.nowData,
            xAxisIndex: 0
          },
          {
            name: '对比日负荷曲线',
            type: 'line',
            smooth: false,
            data: this.selectData,
            xAxisIndex: 1
          }
        ]