最近公司项目中要使用甘特图，在网上找到了有名的DHX下的gantt示例，开发环境为饿了么下的vue-element-admin后台管理系统，下面进行详细的gantt开发
1 准备dhtmlx-gantt模块
npm install dhtmlx-gantt
2 编码
新建gantt.vue文件，在文件加入以下代码
<template>
<div class="app-container">
<div ref="gantt" class="left-container" />
</div>
</template>
<script>
import gantt from 'dhtmlx-gantt' // 引入模块
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import 'dhtmlx-gantt/codebase/locale/locale_cn' // 本地化
export default {
name: 'DhtmlxGantt',
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' }
]
}
}
}
mounted() {
// 初始化
gantt.init(this.$refs.gantt)
// 数据解析
gantt.parse(this.$props.tasks)
}
}
<script>
<style>
.left-container {
height: 600px;
}
</style>
这样，基本的甘特图就已经搭建出来了，如下图
甘特图.png
可以看到上图的时间轴上只有月和日，那加个年份的显示是不是更完美，说加就加
我们可在甘特图初始化之前加入配置，如下：
mounted() {
// 在时间线上增加一行年份显示
gantt.config.subscales = [
{
unit: 'year',
step: 1,
date: '%Y'
}
]
// 初始化
gantt.init(this.$refs.gantt)
}
效果如图
image.png
如需更多效果，请在下面评论回复。
