一、准备dhtmlx-gantt模块
npm install dhtmlx-gantt
二、敲代码(直接复制粘贴即可)
<template>
<!-- 甘特图测试 -->
<div ref="gantt" class="left-container" />
</template>
<script>
import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
export default {
data() {
return {
tasks: {
data: [
{ id: 1, text: 'Task #1', start_date: '15-04-2017', personName: '张总', duration: 3, progress: 0.6 },
{ id: 2, text: 'Task #2', start_date: '18-04-2017', personName: '李总', duration: 3, progress: 0.4 },
{ id: 3, text: 'Task #2-1', start_date: '20-04-2017', personName: '赵总', duration: 3, progress: 0.4, parent: 2 }
],
links: [
{ id: 1, source: 1, target: 2, type: '0' }
]
}
}
},
methods: {},
mounted() {
//初始化
// gantt.init()
gantt.init(this.$refs.gantt)
//数据解析
gantt.parse(this.tasks)
gantt.render();
}
}
</script>
<style>
.left-container {
height: 600px;
}
</style>
三、效果图
参考链接：
