vue 甘特图

<template>
  <div id="gantt-chart">
    <!-- 甘特图容器 -->
    <div ref="ganttContainer" style="height: 400px;"></div>
  </div>
</template>

<script>
import Gantt from 'frappe-gantt';

export default {
  name: 'GanttChart',
  mounted() {
    // 初始化甘特图
    this.initGantt();
  },
  methods: {
    initGantt() {
      const gantt = new Gantt(this.$refs.ganttContainer, [
        {
          id: 1,
          name: "需求分析",
          start: "2023-10-01",
          end: "2023-10-15",
          progress: 75,
          dependencies: ""
        },
        {
          id: 2,
          name: "设计",
          start: "2023-10-16",
          end: "2023-11-01",
          progress: 0,
          dependencies: "1"
        },
        {
          id: 3,
          name: "开发",
          start: "2023-11-02",
          end: "2023-12-15",
          progress: 0,
          dependencies: "2"
        },
        {
          id: 4,
          name: "测试",
          start: "2023-12-16",
          end: "2023-12-31",
          progress: 0,
          dependencies: "3"
        }
      ]);
    }
  }
};
</script>

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

解释说明：

1. 模板部分：定义了一个 div 容器用于显示甘特图，并通过 ref 引用该容器。
2. 脚本部分：
   • 使用了 frappe-gantt 库来创建甘特图。
   • 在 mounted 生命周期钩子中调用 initGantt 方法初始化甘特图。
   • initGantt 方法中创建了一个新的 Gantt 实例，并传入任务数据。每个任务包含 id、name、start、end、progress 和 dependencies 属性。
3. 样式部分：设置了甘特图容器的基本样式，确保其宽度和高度适应父容器。

请确保你已经安装了 frappe-gantt 库，可以通过以下命令安装：

npm install frappe-gantt