vue 甘特图：选择与初始化甘特图

　　1.功能使用背景：

　　　　　　甘特图是一种项目管理工具，以图形直观的方式显示项目的时间轴和任务计划，为了可扩展和定制相关任务的开发，故此选择dhtmlx-gantt

　　2.vue3 初始化甘特图 gantt

　　　　2.1 下载安装 dhtmlx-gantt 依赖包

复制代码

npm install dhtmlx-gantt -save

　　　　2.2 引入插件

javascript

复制代码

import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import demoData from './ganttData.json'

　　　　2.3 初始化及其简单配置测试数据

ini

复制代码

//初始化甘特图
const initGantt = () => {
  gantt.config.grid_width = 350
  gantt.config.add_column = false //添加符号

  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  gantt.config.autofit = false
  gantt.config.row_height = 60
  gantt.config.bar_height = 34
  // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
  gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  // gantt.config.xml_date = '%Y-%m-%d' //甘特图时间格式
  gantt.config.readonly = true //是否只读
  gantt.i18n.setLocale('cn') //设置语言
  gantt.init('gantt_here')
  gantt.parse(demoData)
}

　　2.4 完整代码

　　index.vue

xml

复制代码

<template>
  <section class="my-gantt">
    <div id="gantt_here" class="gantt-container"></div>
  </section>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, watchEffect, defineExpose } from 'vue'

import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import demoData from './ganttData.json'

const data = reactive({})

//初始化甘特图
const initGantt = () => {
  gantt.config.grid_width = 350
  gantt.config.add_column = false //添加符号

  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  gantt.config.autofit = false
  gantt.config.row_height = 60
  gantt.config.bar_height = 34
  // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
  gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  // gantt.config.xml_date = '%Y-%m-%d' //甘特图时间格式
  gantt.config.readonly = true //是否只读
  gantt.i18n.setLocale('cn') //设置语言
  gantt.init('gantt_here')  //初始化
  gantt.parse(demoData)   //填充数据
}

onBeforeMount(() => {})
onMounted(() => {
  initGantt()
})
watchEffect(() => {})
defineExpose({
  ...toRefs(data)
})
</script>
<style scoped lang="scss">
.my-gantt {
  height: 800px;
  width: 100vw;
  .gantt-container {
    width: 100%;
    height: 100%;
  }
}
</style>

　　ganttData.json

json

复制代码

{
	"data":[
		{"id":11, "text":"Project #1", "start_date":"28-03-2023", "duration":"11", "progress": 0.6, "open": true},
		{"id":1, "text":"Project #2", "start_date":"01-04-2023", "duration":"18", "progress": 0.4, "open": true},

		{"id":2, "text":"Task #1", "start_date":"02-04-2023", "duration":"8", "parent":"1", "progress":0.5, "open": true},
		{"id":3, "text":"Task #2", "start_date":"11-04-2023", "duration":"8", "parent":"1", "progress": 0.6, "open": true},
		{"id":4, "text":"Task #3", "start_date":"13-04-2023", "duration":"6", "parent":"1", "progress": 0.5, "open": true},
		{"id":5, "text":"Task #1.1", "start_date":"02-04-2023", "duration":"7", "parent":"2", "progress": 0.6, "open": true},
		{"id":6, "text":"Task #1.2", "start_date":"03-04-2023", "duration":"7", "parent":"2", "progress": 0.6, "open": true},
		{"id":7, "text":"Task #2.1", "start_date":"11-04-2023", "duration":"8", "parent":