vue项目中使用dhtmlxGantt绘制甘特图

VUE+Element 基础上使用dhtmlxGantt绘制甘特图

安装依赖：

npm install dhtmlx-gantt

---

使用：

1、HTML

<template>
  <div class="gunter">
    <div ref="gantt" class="gunter-content" />
  </div>
</template>

2、javascript

<script>
import { gantt } from 'dhtmlx-gantt'
export default {
  data() {
    return {
      tasks: {
        data: [
          {
            id: 1,
            text: 'Task1',
            start_date: '2020-12-15',
            personName: '张总',
            duration: 3,
            progress: 0.6,
            color: '#1890FF'
          },
          {
            id: 2,
            text: 'Task2',
            start_date: '2020-12-18',
            personName: '李总',
            duration: 6,
            progress: 0.4,
            color: '#1890FF '
          },
          {
            id: 3,
            text: 'Task3',
            start_date: '2020-12-18',
            personName: '赵总',
            duration: 4,
            progress: 0.2,
            color: '#1890FF '
          },
          {
            id: 4,
            text: 'Task4',
            start_date: '2020-12-21',
            personName: '赵总',
            duration: 3,
            progress: 0,
            color: '#1890FF ',
            parent: 3
          }
        ],
        links: [{ id: 1, source: 1, target: 2, type: '0' }]
      }
    }
  },
  mounted: function () {
    this.initGunter()
  },
  methods: {
    /**
     * @description:初始化甘特图
     * @param {*}
     * @return {*}
     */
    initGunter() {
      // 甘特图只读
      //   gantt.config.readonly = true
      // 配置左侧树
      gantt.config.columns = [
        {
          name: 'text',
          label: '标题1',
          width: 217,
          tree: true,
          align: 'center',
          template: function (obj) {
            return `${obj.text}` // 通过 template 回调可以指定返回内容值
          }
        },
        {
          name: 'text',
          label: '标题2',
          width: 217,
          tree: true, // 如果有子元素是否遍历
          align: 'center',
          template: function (obj) {
            return `${obj.text}` // 通过 template 回调可以指定返回内容值
          }
        }
      ]
      // 配置右侧头部
      //   gantt.config.subscales = [
      //     {
      //       unit: 'day',
      //       step: 4,
      //       date: '%Y/%m/%d'
      //     }
      //   ]
      gantt.config.autoscroll = true
      //   gantt.config.autosize = 'xy'
      // 设置表头的高度
      gantt.config.scale_height = 66
      //   gantt.config.duration_unit = 'hour'
      //   gantt.config.duration_step = 6
      //   gantt.config.date_scale = '%H: %i'
      // 是否显示依赖连线
      gantt.config.show_links = true
      // 隐藏所有标记
      gantt.config.show_markers = true
      gantt.config.xml_date = '%Y-%m-%d'
      // 表头设置
      gantt.config.scales = [
        { unit: 'day', step: 1, format: '%Y/%m/%d' },
        { unit: 'hour', step: 6, format: '%H:%i' }
      ]
      gantt.init(this.$refs.gantt)
      gantt.parse(this.tasks)
    }
  }
}
</script>

3、css

<style lang="scss" scoped>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
.gunter {
  height: 100%;
  margin-top: 11px;
  .gunter-content {
    height: 100%;
  }
}
</style>

---

效果图：