当前位置：首页 > news >正文

dhtmlx-gantt甘特图数据展示

news 来源：原创 2024/9/15 3:23:08

官网文档：甘特图文档

实现效果：

首先需要下载 dhtmlx-gantt组件

npm i dhtmlx-gantt
//我项目中使用的是"dhtmlx-gantt": "^8.0.6" 这个版本，不同的版本api或是文档中存在的方法稍有差异

界面引用

<template><div id="ganttPhtot" ref="ganttPhtot" class="gantt-container" style="height:100%" />
</template><script>
import gantt from 'dhtmlx-gantt' //引入组件export default{data() {return {// 甘特图的数据tasks: {data: [],links: []},}}}</script>

调用接口获取数据

methods:{
//获取接口数据getQueryMaturity(){const  {data} = await getMatuity()this.tasks.data = data.row gantt.clearAll() //清空甘特图数据//gantt.config.scales 这个是设置时间的，根据项目需要，设计年月，或者周天         gantt.config.scales = [// { unit: 'day', step: 1, date: '%d %M' }// { unit: 'year', step: 1, format: '%Y' } // 显示年份{ unit: 'year', step: 1, format: '%Y' }, // 显示年份{ unit: 'month', step: 1, format: '%M' } // 显示月份]gantt.locale = {date: {month_full: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],month_short: ['一', '二', '三', '四', '五', '六','七', '八', '九', '十', '十一', '十二']},/* 更多自定义标签可以在这里添加 */labels: {new_task: '新任务',icon_save: '保存',icon_cancel: '取消',icon_details: '详情',icon_edit: '编辑',icon_delete: '删除',confirm_closing: '', // 你可以自定义确认关闭的提示信息confirm_deleting: '是否确定删除任务?',section_description: '描述',section_time: '时间范围',text: '任务',start_date: '开始时间',end_date: '结束时间',duration: '计划时间'}// 自动延长时间刻度gantt.config.fit_tasks = true// 不允许拖放gantt.config.drag_project = falsegantt.config.calendar_property = 'start_date'gantt.config.calendar_property = 'end_date'//这里是我项目需要阻止双击出现弹窗可以新增任务，按照需求自行设置gantt.attachEvent('onTaskDblClick', function(id, e) {return false // 阻止默认双击行为})gantt.init(this.$refs.ganttPhtot) //初始化甘特图gantt.parse(this.tasks) //将甘特图数据存放进去}}
}