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

vue 甘特图 vxe-gantt 如何自定义依赖线的颜色

news 2026/7/28 10:25:11

vue 甘特图 vxe-gantt 如何自定义依赖线的颜色,通过设置 links 定义连接线,from 对应源任务的行主键,tom 对应目标任务的行主键

查看官网：https://gantt.vxeui.com/
gitbub：https://github.com/x-extends/vxe-gantt
gitee：https://gitee.com/x-extends/vxe-gantt

自定义所有连接线的的颜色

通过设置 task-link-config.lineColor 自定义连接线的颜色

<template><vxe-ganttv-bind="ganttOptions"></vxe-gantt></template><scriptsetup>import{reactive}from'vue'import{VxeGanttDependencyType}from'vxe-gantt'constganttOptions=reactive({border:true,height:500,rowConfig:{keyField:'id'// 行主键},taskBarConfig:{showProgress:true,// 是否显示进度条showContent:true,// 是否在任务条显示内容move:true,// 是否允许拖拽任务移动日期resize:true,// 是否允许拖拽任务调整日期barStyle:{round:true,// 圆角bgColor:'#fca60b',// 任务条的背景颜色completedBgColor:'#65c16f'// 已完成部分任务条的背景颜色}},taskViewConfig:{tableStyle:{width:480// 表格宽度}},taskLinkConfig:{lineColor:'#fad06c'// 给所有线自定义颜色},links:[{from:10001,to:10002,type:VxeGanttDependencyType.FinishToFinish},{from:10004,to:10005,type:VxeGanttDependencyType.StartToStart},{from:10005,to:10006,type:VxeGanttDependencyType.FinishToStart},{from:10013,to:10012,type:VxeGanttDependencyType.StartToFinish}],columns:[{type:'seq',width:70},{field:'title',title:'任务名称'},{field:'start',title:'开始时间',width:100},{field:'end',title:'结束时间',width:100},{field:'progress',title:'进度(%)',width:80}],data:[{id:10001,title:'任务1',start:'2024-03-01',end:'2024-03-04',progress:3},{id:10002,title:'任务2',start:'2024-03-03',end:'2024-03-08',progress:10},{id:10003,title:'任务3',start:'2024-03-03',end:'2024-03-11',progress:90},{id:10004,title:'任务4',start:'2024-03-05',end:'2024-03-11',progress:15},{id:10005,title:'任务5',start:'2024-03-08',end:'2024-03-15',progress:100},{id:10006,title:'任务6',start:'2024-03-10',end:'2024-03-21',progress:5},{id:10007,title:'任务7',start:'2024-03-15',end:'2024-03-24',progress:70},{id:10008,title:'任务8',start:'2024-03-05',end:'2024-03-15',progress:50},{id:10009,title:'任务9',start:'2024-03-19',end:'2024-03-20',progress:5},{id:10010,title:'任务10',start:'2024-03-12',end:'2024-03-20',progress:10},{id:10011,title:'任务11',start:'2024-03-01',end:'2024-03-08',progress:90},{id:10012,title:'任务12',start:'2024-03-03',end:'2024-03-06',progress:60},{id:10013,title:'任务13',start:'2024-03-02',end:'2024-03-05',progress:50},{id:10014,title:'任务14',start:'2024-03-04',end:'2024-03-15',progress:0},{id:10015,title:'任务15',start:'2024-03-01',end:'2024-03-05',progress:30}]})</script>

每条线单独自定义颜色

<template><vxe-ganttv-bind="ganttOptions"></vxe-gantt></template><scriptsetup>import{reactive}from'vue'import{VxeGanttDependencyType}from'vxe-gantt'constganttOptions=reactive({border:true,height:500,rowConfig:{keyField:'id'// 行主键},taskBarConfig:{showProgress:true,// 是否显示进度条showContent:true,// 是否在任务条显示内容move:true,// 是否允许拖拽任务移动日期resize:true,// 是否允许拖拽任务调整日期barStyle:{round:true,// 圆角bgColor:'#fca60b',// 任务条的背景颜色completedBgColor:'#65c16f'// 已完成部分任务条的背景颜色}},taskViewConfig:{tableStyle:{width:480// 表格宽度}},links:[{from:10001,to:10002,lineColor:'#fad06c',type:VxeGanttDependencyType.FinishToFinish},{from:10004,to:10005,lineColor:'#92c1f1',type:VxeGanttDependencyType.StartToStart},{from:10005,to:10006,lineColor:'#fd9393',type:VxeGanttDependencyType.FinishToStart},{from:10013,to:10012,lineColor:'#e78dd2',type:VxeGanttDependencyType.StartToFinish}],columns:[{type:'seq',width:70},{field:'title',title:'任务名称'},{field:'start',title:'开始时间',width:100},{field:'end',title:'结束时间',width:100},{field:'progress',title:'进度(%)',width:80}],data:[{id:10001,title:'任务1',start:'2024-03-01',end:'2024-03-04',progress:3},{id:10002,title:'任务2',start:'2024-03-03',end:'2024-03-08',progress:10},{id:10003,title:'任务3',start:'2024-03-03',end:'2024-03-11',progress:90},{id:10004,title:'任务4',start:'2024-03-05',end:'2024-03-11',progress:15},{id:10005,title:'任务5',start:'2024-03-08',end:'2024-03-15',progress:100},{id:10006,title:'任务6',start:'2024-03-10',end:'2024-03-21',progress:5},{id:10007,title:'任务7',start:'2024-03-15',end:'2024-03-24',progress:70},{id:10008,title:'任务8',start:'2024-03-05',end:'2024-03-15',progress:50},{id:10009,title:'任务9',start:'2024-03-19',end:'2024-03-20',progress:5},{id:10010,title:'任务10',start:'2024-03-12',end:'2024-03-20',progress:10},{id:10011,title:'任务11',start:'2024-03-01',end:'2024-03-08',progress:90},{id:10012,title:'任务12',start:'2024-03-03',end:'2024-03-06',progress:60},{id:10013,title:'任务13',start:'2024-03-02',end:'2024-03-05',progress:50},{id:10014,title:'任务14',start:'2024-03-04',end:'2024-03-15',progress:0},{id:10015,title:'任务15',start:'2024-03-01',end:'2024-03-05',progress:30}]})</script>