echarts 以時間為Y軸的圖標配置

 

option 配置如下：

 color: colors,
        legend: {
          //圖例
          show: this.legendShow,
          data: state,
          selectedMode: true, // 圖例設為不可點擊
          left: this.left,
          bottom: this.bottom,
          textStyle: {
            color: this.legendColor,
          },
        },
        grid: {
          //繪圖網格
          left: "3%",
          right: "3%",
          top: "1%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "time",
          interval: 3600 * 1000, //以一個小時遞增
          // min: '2009/6/1 1:00', //將data里最小時間點
          axisLabel: {
            formatter: function (value) {
              var date = new Date(value);
              return getmd(date);
              function getmd(date) {
                const y = date.getFullYear().toString();
                const m = (date.getMonth() + 1).toString();
                const d = date.getDate().toString();
                return m + "月" + d + "日";
              }
            },
            color: this.xaxisLabelColor,
            fontSize: this.axisLabelFont,
            rotate: this.xaxisLabelRotate,
          },
          nameTextStyle: {
            color: this.xaxisLabelColor,
          },
          splitLine: {
            show: this.splitLine,
            lineStyle: {
              type: "dashed", //設置網格線類型 dotted：虛線   solid:實線
              color: this.splitLineColor,
              width: this.splitLineWidth,
              lineDash: [this.splitLineDash],
            },
          },
        },
        yAxis: {
          data: state,
          nameTextStyle: {
            color: this.yaxisLabelColor,
          },
          axisLabel: {
            color: this.yaxisLabelColor,
            fontSize: this.axisLabelFont,
            rotate: this.yaxisLabelRotate,
          },
        },
        series: [
          // 用空bar來顯示三個圖例
          { name: state[0], type: "bar", data: [] },
          { name: state[1], type: "bar", data: [] },
          { name: state[2], type: "bar", data: [] },
          { name: state[3], type: "bar", data: [] },
          {
            type: "custom", // 自定義
            renderItem: function (params, api) {
              //開發者自定義的圖形元素渲染邏輯，是通過書寫 renderItem 函數實現的
              var categoryIndex = api.value(0); //這里使用 api.value(0) 取出當前 dataItem 中第一個維度的數值。
              var start = api.coord([api.value(1), categoryIndex]); // 這里使用 api.coord(...) 將數值在當前坐標系中轉換成為屏幕上的點的像素值。
              var end = api.coord([api.value(2), categoryIndex]);

              return {
                type: "rect", // 表示這個圖形元素是矩形。還可以是 'circle', 'sector', 'polygon' 等等。
                shape: echarts.graphic.clipRectByRect(
                  {
                    // 矩形的位置和大小。
                    x: start[0],
                    y: start[1] - barWidth / 2,
                    width: end[0] - start[0],
                    height: barWidth,
                  },
                  {
                    // 當前坐標系的包圍盒。
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height,
                  }
                ),
                style: api.style(),
              };
            },
            labelLine: {
              show: true,
            },
            encode: {
              x: [1, 2], // data 中『維度1』和『維度2』對應到 X 軸
              y: 0, // data 中『維度0』對應到 Y 軸
            },
            data: data,
          },
        ],