【甘特图】vue3.x + DHTMLX

vue3.x项目需要显示甘特图，经学习研究，目前应用比较多的甘特图技术是dhtmlx，这篇文章将简单的介绍其在vue3.x中的应用。

1.下载安装

npm install dhtmlx-gantt

或

yarn add dhtmlx-gantt

2.编写Gantt组件

<template>
  <div ref="ganttRef"></div>
</template>

import { onMounted, ref } from 'vue'
import { gantt } from 'dhtmlx-gantt' // 引入dhtmlx-gantt
export default {
  name: 'Gantt',
  props: {
  	// 任务对象
    tasks: {
      type: Object,
      default: () => {
        return {
          data: [], // 数据数组
          links: [] // 连接关系
        }
      }
    },
    // 显示列设置
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 显示单位
    scaleUnit: {
      type: String,
      default: 'day' // “minute”, “hour”, “day”, “week”, “quarter”, “month”, “year”
    },
    // 时间显示格式
    dateScale: {
      type: String,
      default: '%Y-%m-%d'
    }
  },
  setup(props) {
  	// 挂载ref
    const ganttRef = ref()
    onMounted(() => {
      // 清空之前的配置
      gantt.clearAll()
      // 默认配置
      gantt.config.xml_date = '%Y-%m-%d'
      gantt.i18n.setLocale('cn') // 设置中文
      gantt.config.readonly = true // 设置为只读
      // 显示列配置
      gantt.config.columns = props.columns
      gantt.config.scale_unit = props.scaleUnit
      gantt.config.date_scale = props.dateScale
      // 初始化甘特图
      gantt.init(ganttRef.value)
      // 渲染数据
      gantt.parse(props.tasks)
    })
    return {
      ganttRef
    }
  }
}

@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css" // 在css中引入

3.使用组件

<template>
  <gantt :tasks="ganttTasks" :columns="ganttColumns" style="height: 500px;"></gantt>
</template>

import { ref, reactive } from 'vue'
import Gantt from './components/gantt.vue'
export default {
  name: 'Example',
  setup() {
    const ganttTasks = reactive({
      data: [
        { id: 1, text: 'Task #1', start_date: '2020-01-17', end_date: '2020-01-19', duration: 3, progress: 0.6 },
        { id: 2, text: 'Task #2', start_date: '2020-01-20', end_date: '2020-01-25', duration: 3, progress: 0.4 }
      ]
    })
    const ganttColumns = ref([
      { align: 'left', name: 'text', label: '任务名称', tree: true },
      { align: 'left', name: 'start_date', label: '开始时间' }
    ])
  }
}

以上便是dhtmlx-gantt在vue3.0中的简单应用。
详细的配置信息及用法大家可以参考官方文档。