vue中利用dhtmlx-gantt实现甘特图

在Vue中使用dhtmlx-gantt来实现甘特图，首先需要安装dhtmlx-gantt库：




npm install dhtmlx-gantt

然后在Vue组件中引入并使用：




<template>
  <div id="gantt_here" style="width: 100%; height: 600px;"></div>
</template>
 
<script>
import { gantt } from "dhtmlx-gantt";
 
export default {
  name: "GanttChart",
  mounted() {
    gantt.init(this.$el);
    gantt.parse([
      // 定义你的任务数据
      { id: 1, text: "任务1", start_date: "2023-04-01", duration: 5 },
      // 更多任务...
    ]);
  }
};
</script>
 
<style>
/* 你可以添加自己的样式 */
</style>

这段代码创建了一个Vue组件，该组件在被挂载到DOM后初始化dhtmlx-gantt甘特图，并加载了一些示例数据。你需要替换gantt.parse方法中的数据为你的实际数据。

vue中利用dhtmlx-gantt实现甘特图

评论已关闭

推荐阅读