最近公司项目中要使用甘特图，在网上找到了有名的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

如需更多效果，请在下面评论回复。