echarts 实现项目进度 甘特图

<template>
  <div id="main12" style="width: 100%; height: 100%"></div>
</template>

<script>
import Echarts from "echarts";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
dayjs.extend(utc);
export default {
  name: "ErrorChartLeft",
  data() {
    return {
      myChart: {},
    };
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
    this.initCharts();
  },
  methods: {
    initCharts() {
      //初始化echarts实例
      this.myChart = Echarts.init(document.getElementById("main12"));
      //图表的配置项和数据
      var option = {
        tooltip: {
          formatter: (params) => {
            if (params.data.startTime) {
              return `开始时间：${params.data.startTime}<br>结束时间：${params.data.endTime}`;
            }
            return "";
          },
        },
        grid: {
          // 让图表占满容器
          top: "30px",
          left: "100x",
          right: "20px",
        },
        dataZoom: [
          {
            // 区域缩放组件的类型为滑块，默认作用在x轴上
            type: "slider",
            // 区域缩放组件的过滤模式，weakFilter：在进行区域缩放时，允许图形的一部分在坐标系上(可见)，另一部分在坐标系外(隐藏)
            filterMode: "weakFilter",
            showDataShadow: false,
            top: -20,
            height: 10,
            // 区域缩放组件边框颜色
            borderColor: "transparent",
            // 区域缩放组件边框背景
            backgroundColor: "#e2e2e2",
            // 区域缩放组件上的手柄的样式
            // eslint-disable-next-line
            handleIcon:
              "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z",
            // 手柄大小
            handleSize: 20,
            // 为手柄设置阴影效果
            handleStyle: {
              shadowBlur: 6,
              shadowOffsetX: 1,
              shadowOffsetY: 2,
              shadowColor: "#aaa",
            },
            labelFormatter: "",
          },
          {
            // 区域缩放组件的类型为内置在坐标系中，默认作用在x轴的坐标系中
            type: "inside",
            // 区域缩放组件的过滤模式，weakFilter：在进行区域缩放时，允许图形的一部分在坐标系上(可见)，另一部分在坐标系外(隐藏)
            filterMode: "weakFilter",
          },
        ],
        color: ["#399AEA", "#D5ECFF", "#FF4A4A"],
        xAxis: {
          position: "top",
          max: 24 * 60 * 60,
          interval: 2 * 60 * 60,
          axisLabel: {
            formatter(val) {
              if (val === 24 * 60 * 60) {
                return "24:00";
              }
              return dayjs.utc(val * 1000).format("HH:mm");
            },
          },
        },
        yAxis: {
          data: [
            "机组1号121212",
            "机组2号1212121",
            "机组3号13123123",
            "机组4号123123",
            "机组5号123123",
            "机组6号123123",
            "机组7号123123",
          ],
        },
        series: [
          {
            type: "custom",
            renderItem: this.renderItem,
            // name: "工作",
            encode: {
              x: [1, 2],
              y: 0,
            },
            data: [
              {
                name: "1#",
                startTime: "02:00",
                endTime: "04:00",
                value: [0, 7200, 14400],
                itemStyle: {
                  normal: {
                    color: "#399AEA",
                  },
                },
              },
              {
                name: "1#",
                startTime: "05:00",
                endTime: "05:30",
                value: [0, 3600 * 5, 3600 * 5.5],
                itemStyle: {
                  normal: {
                    color: "red",
                  },
                },
              },
              {
                name: "1#",
                startTime: "06:00",
                endTime: "07:00",
                value: [0, 3600 * 6, 3600 * 7],
                itemStyle: {
                  normal: {
                    color: "#399AEA",
                  },
                },
              },
              {
                name: "2#",
                startTime: "02:00",
                endTime: "04:00",
                value: [1, 7200, 14400],
                itemStyle: {
                  normal: {
                    color: "#399AEA",
                  },
                },
              },
              {
                name: "2#",
                startTime: "05:00",
                endTime: "05:30",
                value: [1, 3600 * 5, 3600 * 5.5],
                itemStyle: {
                  normal: {
                    color: "red",
                  },
                },
              },
              {
                name: "2#",
                startTime: "06:00",
                endTime: "07:00",
                value: [1, 3600 * 6, 3600 * 7],
                itemStyle: {
                  normal: {
                    color: "#399AEA",
                  },
                },
              },
               {
                name: "2#",
                startTime: "02:00",
                endTime: "04:00",
                value: [2, 7200, 14400],
                itemStyle: {
                  normal: {
                    color: "#399AEA",
                  },
                },
              },
              {
                name: "2#",
                startTime: "05:00",
                endTime: "05:30",
                value: [2, 3600 * 5, 3600 * 5.5],
                itemStyle: {
                  normal: {
                    color: "red",
                  },
                },
              },
              {
                name: "2#",
                startTime: "06:00",
                endTime: "07:00",
                value: [2, 3600 * 6, 3600 * 7],
                itemStyle: {
                  normal: {
                    color: "#399AEA",
                  },
                },
              },
               {
                name: "2#",
                startTime: "02:00",
                endTime: "04:00",
                value: [3, 7200, 14400],
                itemStyle: {
                  normal: {
                    color: "#399AEA",
                  },
                },
              },
              {
                name: "2#",
                startTime: "05:00",
                endTime: "05:30",
                value: [3, 3600 * 5, 3600 * 5.5],
                itemStyle: {
                  normal: {
                    color: "red",
                  },
                },
              },
              {
                name: "2#",
                startTime: "06:00",
                endTime: "07:00",
                value: [3, 3600 * 6, 3600 * 7],
                itemStyle: {
                  normal: {
                    color: "#399AEA",
                  },
                },
              },
            ],
          },
        ],
      };
      //使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    renderItem(params, api) {
      const categoryIndex = api.value(0);
      const start = api.coord([api.value(1), categoryIndex]);
      const end = api.coord([api.value(2), categoryIndex]);
      const height = api.size([0, 1])[1] * 0.6;
      const rectShape = 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,
        }
      );
      return {
        type: "rect",
        transition: ["shape"],
        shape: rectShape,
        style: api.style(),
      };
    },
  },
};
</script>

<style scoped lang="scss"></style>