在有些项目中需要使用甘特图来标注任务进度以及时间跨度。那么如何使用dhtmlx-gantt来实现甘特图呢?
1先安装dhtmlx-gantt
yarn add dhtmlx-gantt
2引入,通过以下代码即可得到甘特图
<template>
<div style="height:600px;" ref="gantt"></div>
</template>
<script>
import "dhtmlx-gantt";
export default {
name: "gantt",
data() {
return {
tasks: {
data: [
{
id: 1,
text: "Task #1",
start_date: "15-04-2020",
personName: "阿瓦达,林岚",
duration: 5,
progress: 0.6
},
{
id: 2,
text: "Task #2",
start_date: "18-04-2020",
personName: "建军节",
duration: 25,
progress: 0.4
},
{
id: 3,
text: "Task #2-1",
start_date: "20-04-2020",
personName: "李珊珊",
duration: 3,
progress: 0.4,
parent: 2
},
{
id: 4,
text: "Task #2-1",
start_date: "20-04-2020",
personName: "周五",
duration: 5,
progress: 0.4,
parent: 2
}
],
links: [{ id: 1, source: 1, target: 2, type: "0" }]
},
lists: [
{
icon: "mdi-account",
text: "个人中心",
src: "/user/info"
}
]
};
},
mounted: function() {
gantt.config.columns = [
{ name: "text", label: "项目", tree: true, width: "*" },
{ name: "personName", label: "负责人", align: "center" }
];--------表头数据 其中name的属性值对应展示的数据名称----------如:personName展示的就是人名,如果换成text:则展示相对应的text值。personName
gantt.config.scale_unit = "year";
gantt.config.step = 1;
gantt.config.date_scale = "%Y";
gantt.config.subscales = [
{ unit: "day", step: 1, date: "%j" },
{ unit: "month", step: 1, date: "%m" }
];当右侧不止显示年份时,可以添加展示月日,添加一个就加一行
gantt.config.scale_height = 80; 甘特图右侧表头的高度
gantt.config.min_column_width = 25; //下面日期的宽度,会随时间长短宽度变化。但是设置最小宽度后,当时间跨度到达一定长度,就会展示最小宽度
gantt.i18n.setLocale("cn"); //使用中文
gantt.config.work_time = true;
gantt.config.correct_work_time = true; 跳过节假日:比如你选择的包含周六日,他会自动延长时间或者缩短,延长或者缩短是因为包含节假日,要增加或者减少天数。
gantt.config.inherit_scale_class = true;
gantt.init(this.$refs.gantt); 初始化
gantt.parse(this.tasks); } };
</script>
<style lang='less'>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css"; 引入甘特图的css文件
</style>
效果如图