dhtmlx-gantt
1.先安装依赖
npm install gantt-elastic@latest
npm install --save dhtmlx-gantt
2.直接使用组件即可
<template>
<div class="gantt-container">
<h2>项目管理甘特图</h2>
<div id="gantt_here" style="width:100%; height:80vh;"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import gantt from 'dhtmlx-gantt';
// 引入样式文件
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
onMounted(() => {
// 初始化甘特图
gantt.init('gantt_here');
// 设置日期格式
gantt.config.date_format = "%Y-%m-%d";
// 添加任务数据
gantt.addTask({
id: 1,
text: "任务 A",
person:"张三",
start_date: "2024-01-06",
duration: 5,
});
gantt.addTask({
id: 2,
text: "任务 23",
person:"张三222",
start_date: "2024-01-06",
duration: 3,
});
gantt.addTask({
id: 3,
text: "任务 2223",
person:"张三221122",
start_date: "2024-01-06",
duration: 2,
});
// 格式化日期
gantt.locale.date = {
month_full: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
month_short: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
day_full: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
day_short: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
};
gantt.config.autosize = false;
gantt.config.show_grid = true;
gantt.config.columns = [
{ name: 'text', label: '项目名称', width: '100', align: 'center' },
{ name: 'person', label: '项目成员', width: '100', align: 'center' },
{ name: 'task', label: '项目任务', width: '100', align: 'center' },
];
gantt.templates.task_class = function(start, end, item) {
switch (item.status) {
case '400': // 已完成
return 'gantt_success';
case '100': // 未开始
return 'gantt_begined';
case '200': // 进行中
return 'gantt_primary';
case '300': // 暂停
return 'gantt_warning';
default: // 已终止 500
return 'gantt_info';
}
};
gantt.config.drag_project = true;
gantt.config.drag_project = true;
// 年 格式
gantt.config.scales = [{ unit: 'year', step: 1, date: ' %Y 年' }];
// 月 格式
gantt.config.scales = [{ unit: 'year', step: 1, date: ' %Y 年' }, { unit: 'month', step: 1, date: '%F' }];
// 日 格式
gantt.config.scales = [{ unit: 'month', step: 1, date: ' %Y 年 %F' }, { unit: 'day', step: 1, date: '%d 日' }];
// 渲染甘特图
gantt.render();
});
</script>
<style scoped>
.gantt-container {
width:100%;
padding: 20px;
}
h2 {
margin-bottom: 20px;
}
</style>
效果图：
