echarts时间段折线图，横坐标偏移

实现的效果如图

1777是3点到6点的值，横坐标往左移动就好了

 悬浮的标记是自定义的

 贴一下整个代码吧

setChart() {
      let max = 0;
      max = Math.max(...this.data.data) + 800; //y轴最大值
      let option = {
        grid: {
          top: " 0%",
          left: "5%",
          right: "5%",
          bottom: "8%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          hideDelay: 100, // 隐藏延迟，单位ms
          transitionDuration: 0.4, // 动画变换时间，单位s
          backgroundColor: "rgba(0,0,0,0.7)", // 提示背景颜色，默认为透明度为0.7的黑色
          borderColor: "#333", // 提示边框颜色
          borderRadius: 4, // 提示边框圆角，单位px，默认为4
          borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
          padding: 5,
          textStyle: {
            color: "#FFFFFF",
            fontSize: 16,
            fontFamily: "DIN-Medium",
          },
          formatter: function (params) {
            let oneData = params[0].name; //前一个时间  03:00
            if (oneData == "") {
              oneData = "00:00";
            }
            let one = params[0].name.substring(0, 2).replace(/\b(0+)/gi, ""); //03：00  ->  3
            let two = (Number(one) + 3).toString(); //加上时间间隔3  -> 6
            let twoData = two + ":00"; //后一个时间 6:00
            if (two.length == 1) {
              twoData = "0" + two + ":00";
            }
            console.log(twoData);
            return oneData + "-" + twoData + " : " + params[0].value + "人";
          },
        },
        xAxis: [
          {
            boundaryGap: ["0", "0"],
            type: "category",
            axisLine: {
              show: false, //是否显示坐标轴轴线。
            },
            axisTick: { show: false }, //是否显示坐标轴刻度。
            axisLabel: {
              color: "#FFFFFF",
              fontSize: 16,
              fontFamily: "DIN-Medium",
              interval: 0, //强制显示所有标签。
              padding: [0, 0, 0, -60],
            },
            data: this.dataX,
          },
        ],
        yAxis: [
          {
            type: "value",
            max: max,
            min: 0,
            // interval: 5, //分隔
            axisLine: {
              show: false, //y轴竖线不显示
            },
            axisTick: { show: false }, //是否显示坐标轴刻度线条。
            axisLabel: {
              color: "#FFFFFFFF",
              showMaxLabel: false,
              fontSize: 16,
              fontFamily: "DIN-Medium",
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "",
            type: "line",
            areaStyle: {
              color: {
                //背景渐变色
                type: "linear",
                x: 0,
                y: 0,
                x2: 1, //从左到右，但不能从上到下，需要借助辅助系列
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#98F8D3", // 0% 处的颜色
                  },
                  {
                    offset: 0.3,
                    color: "#02BFF1", // 100% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "#339CFF", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#917FFF", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },

            label: {
              show: true,
              color: "#23DCFD",
              fontSize: 18,
              fontFamily: "DIN-Medium",
            },
            color: {
              //线条渐变色
              type: "linear",
              x: 0,
              y: 0,
              x2: 1, //从左到右，但不能从上到下，需要借助辅助系列
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#98F8D3", // 0% 处的颜色
                },
                {
                  offset: 0.3,
                  color: "#02BFF1", // 100% 处的颜色
                },
                {
                  offset: 0.5,
                  color: "#339CFF", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: "#917FFF", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            }, //背景渐变色
            //折点显示数值
            barWidth: 10,
            barCategoryGap: 10,
            data: this.data.data,
            smooth: true,
          },
        ],
      };
      let myChart = this.$echarts(this.$el);

      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },