时间区间甘特图

option配置 直接cv就行

 {
        tooltip: {
          confine: true,
          enterable: true,
          formatter(params) {
            return (
              `<div>开始时间：${params.value[1]}</div>` +
              `<div>结束时间：${params.value[2]}</div>`
            );
          },
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          selectedMode: false, //不可点击
        },
        dataZoom: [
          {
            type: "inside",
          },
          {
            type: "slider",
            height: "8",
            bottom: 0,
            left: 20,
            right: 20,
          },
        ],
        grid: {
          left: "3%",
          right: 30,
          bottom: 30,
          top: 50,
          containLabel: true,
        },
        yAxis: [
          {
            type: "category",
            data: ["关机"],
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
          },
        ],
        xAxis: {
          type: "time",
          axisTick: {
            // 隐藏刻度
            show: true,
          },
          axisLine: {
            // 隐藏轴线
            show: true,
          },
          splitLine: {
            // 显示网格线
            show: true,
          },
        },
        series: [
          {
            type: "custom",
            renderItem: function (params, api) {
              var categoryIndex = api.value(0);
              var start = api.coord([api.value(1), categoryIndex]);
              var end = api.coord([api.value(2), categoryIndex]);
              var height = 24; //柱体宽度
              return {
                type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                shape: echarts.graphic.clipRectByRect(
                  {
                    // 矩形的位置和大小。
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height,
                  },
                  {
                    // 当前坐标系的包围盒。
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height,
                  }
                ),
                style: api.style(),
              };
            },
            encode: {
              x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
              y: 0, // data 中『维度0』对应到 Y 轴
            },
            data: [],
          },
          {          //下面这几个是用来展示legend，不然展示不出来
            name: "关机",
            type: "bar",
            itemStyle: { color: "#999999" },
            data: [],
          },
          {
            name: "待机",
            type: "bar",
            itemStyle: { color: "#337AB7" },
            data: [],
          },
          {
            name: "工作",
            type: "bar",
            itemStyle: { color: "#EDDE0C" },
            data: [],
          },
        ],
      }

series[0].data的内容格式

 data: [
                  {
                      itemStyle: { normal: { color: "#999999"} },//条形颜色
                      name: '关机',
                      value: [0, '2023-06-09 09:46:27', '2023-06-09 10:34:46']//0代表y轴的索引，后两位代表x轴数据开始和结束
                  },
                   {
                      itemStyle: { normal: { color: "#337AB7"} },//条形颜色
                      name: '待机',
                      value: [0, '2023-06-09 10:34:46', '2023-06-09 12:34:50']//0代表y轴的索引，后两位代表x轴数据开始和结束
                  },
                   {
                      itemStyle: { normal: { color: "#EDDE0C"} },//条形颜色
                      name: '工作',
                      value: [0, '2023-06-09 12:34:50', '2023-06-09 14:34:20']//0代表y轴的索引，后两位代表x轴数据开始和结束
                  },
                  {
                      itemStyle: { normal: { color: "#999999"} },//条形颜色
                      name: '关机',
                      value: [0, '2023-06-09 14:34:20', '2023-06-09 23:59:59']//0代表y轴的索引，后两位代表x轴数据开始和结束
                  },
       ]