vue使用甘特图插件dhtmlx-gantt（ 简单版）

一. 文档地址

官方文档

使用html生成的图表，样式修改会容易的多

二. 引用方式

yarn install dhtmlx-gantt
import { gantt } from 'dhtmlx-gantt'; // 引入dhtmlx-gantt
<style>
@import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
</style>
1
2
3
4
5

三. 部分组成的使用

1. tasks(任务)

let gantttt ={
            data:[ 
            { id: 3, text:"Team", type:'milestone', start_date:"14-07-2022"},
            { id: 1, text: '1222',start_date:'25-04-2022', end_date:'01-07-2022', open:true },
            { id: 12323544, text: '44444', start_date: '27-04-2022', end_date: '01-06-2022' , duration: 2, progress: 0, person: 'Julia Garner',parent:1 ,open:true},
            { id: 1232354422, text: '5555', start_date: new Date('2022-04-27'), end_date: new Date('2022-05-01') , duration: 2, progress: 0, color: '#2F80ED', person: 'Julia Garner',parent:12323544 },
            { id: 1232354421, text: '22222', start_date: new Date('2022-05-02'), end_date: new Date('2022-05-21') , duration: 2, progress: 0, color: '#2F80ED',parent:12323544 },
            { id: 12323545, text: '333333333333333', start_date: new Date('2022-05-15'), end_date: new Date('2022-06-30'),time:'02/01-02/20' , duration: 2, progress: 0,,parent:1 ,open:true},
            { id: 12345453, text: '222222', start_date: new Date('2022-04-27'), end_date: new Date('2022-05-18'),time:'02/01-02/20' , duration: 3, progress: 0, color: '#ED263D',parent:12323545},
            ]
}
1
2
3
4
5
6
7
8
9
10
11

可自定义增加变量显示
id：任务标识，可用来标识父子关系、连接links等
start_date,end_date：项目开始截至时间 Date|string //（‘14-07-2022’）
text：文本，任务的显示文字
progress：项目的进度，用颜色深浅显示
parent：父子关系(id标识)；子任务的parent为父任务的id
type：任务类型，有三种，object，task，milestone；
object：没有时间限制，长度为包含所有子任务的长度
task：普通任务
milestone：菱形块，可表示中转关系

2. links(连接关系）

links:[
          { id:1, source:1, target:3, type:"0"},                       
          { id:2, source:12323545, target:12345453, type:"1"},                     
          { id:3, source:12345453, target:12345437, type:"0"}   
 ]
1
2
3
4
5

3. 数据结构

let gantttt ={
     data:[....],
     links:[.....]
    } 
1
2
3
4

4. columns(指定列)

const ganttColumns = ref([
            { align: 'right', name: 'color', label: '', width: '15',
                template:function(task){
                    if(task.color){
                        return  "
"+"
"}  
                    }
            },
            { align: 'left', name: 'text', label: '', tree: true, width:"*",min_width:120},
            { align: 'center', name: 'person', label: '负责人', width: '100' },
            { align: 'right', name: 'time', label: '时间节点', width: '80' },
        ]);
gantt.config.columns = ganttColumns.value;
1
2
3
4
5
6
7
8
9
10
11
12

name: task列定义的变量
label:列头显示的文本
tree：是否显示连接树关系
template:可以通过方法对变量样式自定义

5. scales(时间轴)

单位包含：年，月，周，日等；需要特殊标识可以使用方法

var weekScaleTemplate = function (date) {
    var dateToStr = gantt.date.date_to_str("%d");
    var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
    const weekNum = gantt.date.date_to_str('W%W  ');
    return weekNum(date) + dateToStr(date) + " - " + dateToStr(endDate);
};
gantt.config.scales = [
   { unit: 'month', step: 1, format: '%F %Y' },
    { unit: 'week', step: 1, format:weekScaleTemplate } ,
];
1
2
3
4
5
6
7
8
9
10

可以动态切换时间轴的单位

function setScaleConfig(level) {
   switch (level) {
       case "day":
           gantt.config.scales = [
               {unit: "day", step: 1, format: "%d %M"}
           ];
           gantt.config.scale_height = 27;
           break;
       case "week":
           var weekScaleTemplate = function (date) {
             var dateToStr = gantt.date.date_to_str("%d %M");
             var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
             return dateToStr(date) + " - " + dateToStr(endDate);
           };
           gantt.config.scales = [
             {unit: "week", step: 1, format: weekScaleTemplate},
           ];
           gantt.config.scale_height = 27;
           break;
       case "month":
           gantt.config.scales = [
               {unit: "month", step: 1, format: "%F, %Y"},
           ];
           gantt.config.scale_height = 27;
           break;
       case "year":
           gantt.config.scales = [
               {unit: "year", step: 1, format: "%Y"},
           ];
           gantt.config.scale_height = 27;
           break;
   }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

6. markers(标记)

根据时间设立就可以

四. 使用设置

let gantttt ={...};
const ganttColumns = ref([...])
let weekScaleTemplate = function (date) {...}
 onMounted(() => {
            // 清空之前的配置
            gantt.clearAll();
            // 默认配置
            gantt.plugins({
                marker: true,
            });
            markerId = gantt.addMarker({
                start_date: new Date(2022, 4, 26),
                css: 'marker',
                text: '',
            });
            //任务的点击方法
            gantt.attachEvent("onTaskClick", function(id,e) {
                console.log(id)
                return true;
            });
            gantt.config.work_time = true;
            gantt.i18n.setLocale('cn'); // 设置中文
            gantt.config.readonly = true; // 设置为只读
            gantt.config.bar_height = 24; //task高度
            //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
            gantt.config.autosize = true;
            gantt.config.open_split_tasks = true;
            // 显示列配置，限制最大最小时间
            // gantt.config.start_date = new Date(2022, 3, 25);
            // gantt.config.end_date = new Date(2022, 5, 26);
            gantt.config.columns = ganttColumns.value;
            gantt.config.scales = [
                { unit: 'month', step: 1, format: '%F %Y' },
                { unit: 'week', step: 1, format:weekScaleTemplate } ,
            ];
            gantt.getMarker(markerId);
            // 初始化甘特图
            gantt.init(ganttRef.value);
            gantt.parse(gantttt)       
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

五.demo

根据ui需要修改样式