数据大屏项目开发中，客户要求其中一个模块要点击后弹窗展示项目进度,使用甘特图来实现，今天我们来实现使用vue3实现甘特图的效果。

插件

"dhtmlx-gantt": "^8.0.10",

实例代码

<template>
  <div class="gantt-container">
    <div ref="gantt" class="gantt-chart"></div>
  </div>
</template>

<script>
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

export default {
  name: 'GanttChart',
  data() {
    return {
      tasks: {
        data: [
          {id: 1, text: "项目启动", start_date: "2023-09-01", duration: 3, progress: 0.6},
          {id: 2, text: "需求分析", start_date: "2023-09-04", duration: 5, progress: 0.4},
          {id: 3, text: "设计阶段", start_date: "2023-09-09", duration: 7, progress: 0.2},
          {id: 4, text: "开发阶段", start_date: "2023-09-16", duration: 10, progress: 0},
          {id: 5, text: "测试阶段", start_date: "2023-09-26", duration: 5, progress: 0},
          {id: 6, text: "项目发布", start_date: "2023-10-01", duration: 1, progress: 0}
        ],
        links: [
          {id: 1, source: 1, target: 2, type: "0"},
          {id: 2, source: 2, target: 3, type: "0"},
          {id: 3, source: 3, target: 4, type: "0"},
          {id: 4, source: 4, target: 5, type: "0"},
          {id: 5, source: 5, target: 6, type: "0"}
        ]
      }
    };
  },
  mounted() {
    this.initGantt();
  },
  methods: {
    initGantt() {
      gantt.config.date_format = "%Y-%m-%d";
      gantt.config.scale_height = 50;
      gantt.config.scales = [
        {unit: "month", step: 1, format: "%Y年 %M"},
        {unit: "day", step: 1, format: "%d"}
      ];

      gantt.config.columns = [
        {name: "text", label: "任务名称", width: "*", tree: true},
        {name: "start_date", label: "开始日期", align: "center"},
        {name: "duration", label: "持续时间", align: "center"},
        {name: "progress", label: "进度", align: "center", template: (obj) => (obj.progress * 100).toFixed(0) + "%"}
      ];

      gantt.init(this.$refs.gantt);
      gantt.parse(this.tasks);

      gantt.attachEvent("onTaskClick", (id, e) => {
        console.log("任务被点击：", id);
      });
    }
  }
};
</script>

<style>
.gantt-container {
  height: 700px;
  width: 1200px;
}

.gantt-chart {
  width: 100%;
  height: 100%;
}
</style>