vue中使用dhtmlxGantt创建一个简单的甘特图（列字段名汉化版）

源码

<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.config.subscales = [
      {
        unit: 'year',
        step: 1,
        date: '%Y'
      }
    ]
    // gantt.i18n.setLocale('cn')
    
    //自定义列名(name和label对应，可进行汉化)
    gantt.config.columns = [
      { name: "text", tree: true, align: "left", resize: true, width: 150, label: '任务名称' },
      { name: "start_date", align: "center", resize: true, width: 100, label: '计划开始时间' },
      { name: "end_date", align: "center", resize: true, width: 100, label: '计划结束时间' },
      { name: "cap_actl_start", align: "center", resize: true, width: 100, label: '实际开始时间' },
      { name: "cap_actl_end", align: "center", resize: true, width: 100, label: '实际结束时间' },
      { name: "schedule_company_duty_name", align: "center", resize: true, width: 100, label: '负责单位' },
      { name: "schedule_user_duty_name", align: "center", resize: true, width: 100, label: '负责人' },
      { name: "schedule_task_deviation_days", align: "center", resize: true, width: 100, label: '偏差天数' },
      { name: "status", align: "center", resize: true, width: 100, label: '任务状态' },
      { name: "duration", align: "center", width: 100, label: '持续时间' },
    ];
    //初始化
    gantt.init(this.$refs.gantt)
    //数据解析
    gantt.parse(this.tasks)
    gantt.render();
  }
}
</script>
<style>
.left-container {
  height: 600px;
}
</style>

效果图