甘特图 Dhtmlx Gantt

介绍
在一些任务计划、日程进度等场景中我们会使用到甘特图，Dhtmlx Gantt 对于甘特图的实现支持很友好，文档API介绍全面，虽然增强版的收费，但免费版的足以够用。
官网：https://docs.dhtmlx.com/gantt/
安装dhtml gannt插件

npm install dhtmlx-gantt

引入插件

//页面引入，如果多个页面使用可以全局引入
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

页面代码

<template><div class="gantt-box" ref="ganttRef"></div>
</template><script setup>
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import { onMounted, ref } from 'vue';
const ganttRef = ref(null);
const data = {data: [{id: 1,text: 'projectName',start_date: '01-04-2023',end_date: '05-12-2023',duration: 248,progress: 0.3,open: true,color: '#b38989'},{id: 2,text: '任务1',start_date: '02-04-2023',end_date: '11-07-2023',duration: 100,progress: 0.6,parent: 1},{id: 3,text: '任务2',start_date: '12-07-2023',end_date: '09-09-2023',duration: 59,progress: 0,parent: 1}],links: [{ id: 1, source: 1, target: 2, type: '1' },{ id: 2, source: 2, target: 3, type: '0' }]
};
const columns = [{ name: 'text', label: '项目名称', tree: true, min_width: 140 },{ name: 'start_date', label: '开始时间', min_width: 100 },{ name: 'end_date', label: '结束时间', min_width: 100 },{ name: 'duration', label: '计划工期' },{ name: 'add', label: '' }
];
const initGantt = () => {// 清空之前的配置gantt.clearAll();gantt.i18n.setLocale('cn'); // 设置中文gantt.config.readonly = true; // 设置为只读gantt.plugins({tooltip: true,quick_info: true // 快速信息框// multiselect: true,// 激活多任务选择});gantt.config.show_quick_info = true;gantt.config.tooltip_offset_x = 10;gantt.config.tooltip_offset_y = 30;// gantt.config.open_split_tasks = false;gantt.config.details_on_create = true; // 创建新事件通过点击“+”按钮打开灯箱gantt.config.autofit = true; // 甘特图图表宽度自适应// gantt.config.resize_rows = true; // 用户可以通过拖拽调整行高// 图表项目栏可以任意拖拽（任意节点下)gantt.config.order_branch = false;gantt.config.order_branch_free = false;gantt.config.placeholder_task = false; // 新增空白列后新增项目gantt.config.scale_height = 50;gantt.config.show_links = true; //是否显示依赖连线gantt.config.sort = false; // 点击表头可排序gantt.config.row_height = 40; //设置行高gantt.config.drag_project = true;gantt.config.scales = [// 设置时间刻度相关属性// 显示月日用这个// { unit: 'month', step: 1, format: '%Y-%m' },// { unit: 'day', step: 1, format: '%Y-%m-%d' }// 显示年月用这个{ unit: 'year', step: 1, format: '%Y' },{ unit: 'month', step: 1, format: '%M' }];// gantt.config.start_date = new Date(//     `${new Date().getFullYear() - 1},${new Date().getMonth()},${new Date().getDay()}`// );// gantt.config.end_date = new Date(`${new Date().getFullYear() + 1},${new Date().getMonth()},${new Date().getDay()}`);// gantt.config.show_tasks_outside_timescale = true;gantt.config.auto_scheduling = true;// 配置Gantt内置弹出框内容gantt.templates.lightbox_header = function (start_date, end_date, task) {return `<b>${task.text}</b>`;};gantt.config.lightbox.sections = [{name: 'description',height: 36,map_to: 'text',type: 'textarea',focus: true},{ name: 'time', type: 'duration', map_to: 'auto' },{name: 'Participants',height: 36,map_to: 'Participants',type: 'ParticipantsPlan',focus: true},{name: 'BgColor',height: 36,map_to: 'color',type: 'ParticipantsPlanColor',focus: true}];gantt.templates.tooltip_text = function (start, end, task) {return (task.text +'<br/><span>开始:</span> ' +gantt.templates.tooltip_date_format(start) +'<br/><span>结束:</span> ' +gantt.templates.tooltip_date_format(end) +'<br/><span>进度:</span> ' +Math.round(task.progress * 100) +'%');};gantt.config.bar_height = 30;// 自定义信息弹窗classgantt.templates.quick_info_class = function () {return 'default-quick-info';};// 自定义信息弹窗头部classgantt.templates.grid_header_class = function () {return 'progress-header';};gantt.templates.quick_info_content = function (start, end, task) {return `<div>${task.text}<br/>计划开始 : ${gantt.templates.tooltip_date_format(start)}<br/>计划结束:${gantt.templates.tooltip_date_format(end)}<br/>进度 : ${Math.round(task.progress * 100) + '%'}<br/>状态 :</div>`;};// 设置树形列的父项图标gantt.templates.grid_folder = function () {return '';};// 设置树形列的子项图标gantt.templates.grid_file = function () {return '';};// 自定义进度条上的文本gantt.templates.task_text = function (start, end, task) {return `<span style="margin-left:10px;color:white;">${task.progress * 100}%</span>`;};// 自定义progress_text内容gantt.templates.progress_text = function () {// return "<span style='text-align:left;'>" + Math.round(task.progress * 100) + '% </span>';return '';};gantt.config.columns = columns;// 初始化甘特图gantt.init(ganttRef.value);// 渲染数据gantt.parse(data);
};onMounted(() => {initGantt();
});
</script><style lang="less" scoped>
.gantt-box {width: 1000px;height: 400px;
}
// /deep/.default-quick-info {
//     background-color: aqua;
// }
</style>

效果