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"