vue 甘特图组件 vxe-gantt 修改关键路径连接线的颜色和线类型

在项目管理甘特图中，关键路径是决定项目最短工期的任务链。vxe-gantt 默认以红色高亮关键路径上的任务条与依赖连线。如果默认样式与项目配色不协调，可以通过 taskCriticalPathConfig 灵活自定义关键路径连接线的颜色和线类型。

参数说明

  • 默认样式：开启 taskBarConfig.showCriticalPath 后，关键路径连线默认为红色。
  • 修改颜色：通过 taskCriticalPathConfig.lineColor 设置关键路径连接线颜色。
  • 修改线类型：通过 taskCriticalPathConfig.lineType 设置连线样式，例如流动虚线 flowDashed。
  • 响应式支持：配置项支持响应式绑定，可结合单选框、主题切换等实时改变样式。

核心配置

启用关键路径

taskBarConfig: {
  showCriticalPath: true // 显示关键路径
}

自定义关键路径连线

taskCriticalPathConfig: {
  lineColor: '#fd9393', // 关键路径连接线颜色
  lineType: 'flowDashed' // 关键路径连接线类型
}
  • lineColor：颜色值，支持十六进制、RGB 等 CSS 颜色格式。
  • lineType：线型，示例中 flowDashed 表示流动虚线效果，其他可选值请以官方文档为准。

修改线颜色

image

<template>
  <div>
    <div style="margin-bottom: 8px">
      <vxe-radio-group v-model="ganttOptions.taskCriticalPathConfig.lineColor">
        <vxe-radio-button checked-value="#fad06c" content="#fad06c"></vxe-radio-button>
        <vxe-radio-button checked-value="#92c1f1" content="#92c1f1"></vxe-radio-button>
        <vxe-radio-button checked-value="#fd9393" content="#fd9393"></vxe-radio-button>
        <vxe-radio-button checked-value="#e78dd2" content="#e78dd2"></vxe-radio-button>
      </vxe-radio-group>
    </div>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { VxeGanttDependencyType } from 'vxe-gantt'

const ganttOptions = reactive({
  border: true,
  height: 600,
  columnConfig: {
    resizable: true
  },
  rowConfig: {
    keyField: 'id' // 行主键
  },
  taskBarConfig: {
    showProgress: true, // 是否显示进度条
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    resizable: true, // 是否允许拖拽任务调整日期
    linkCreatable: true, // 是否允许自定义创建依赖线
    showCriticalPath: true, // 是否显示关键路径
    barStyle: {
      round: true, // 圆角
      bgColor: '#8b8b8b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskLinkConfig: {
    isHover: true, // 当鼠标移到依赖线时，是否要高亮当前依赖线
    isCurrent: true, // 当鼠标点击依赖线时，是否要高亮当前依赖线
    isDblclickToRemove: true // 是否允许双击依赖线删除
  },
  taskViewConfig: {
    tableStyle: {
      width: 480 // 表格宽度
    }
  },
  taskBarMoveConfig: {
    isSyncLinkTask: true // 拖拽移动任务后自动更新依赖线关联任务的日期
  },
  taskBarResizeConfig: {
    isSyncLinkTask: true // 拖拽调整任务后自动更新依赖线关联任务的日期
  },
  taskCriticalPathConfig: {
    lineColor: '#fd9393'
  },
  links: [
    { from: 20001, to: 20002, type: VxeGanttDependencyType.FinishToStart },
    { from: 20001, to: 20003, type: VxeGanttDependencyType.FinishToStart },
    { from: 20002, to: 20004, type: VxeGanttDependencyType.FinishToStart },
    { from: 20003, to: 20005, type: VxeGanttDependencyType.FinishToStart },
    { from: 20004, to: 20006, type: VxeGanttDependencyType.FinishToStart },
    { from: 20005, to: 20006, type: VxeGanttDependencyType.FinishToStart },
    { from: 20006, to: 20007, type: VxeGanttDependencyType.FinishToStart },
    { from: 20007, to: 20008, type: VxeGanttDependencyType.FinishToStart },
    { from: 20008, to: 20009, type: VxeGanttDependencyType.FinishToStart },
    { from: 20009, to: 20010, type: VxeGanttDependencyType.FinishToStart }
  ],
  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: 20001, title: '需求分析', start: '2025-01-06', end: '2025-01-08', progress: 100 },
    { id: 20002, title: 'UI设计', start: '2025-01-09', end: '2025-01-13', progress: 100 },
    { id: 20003, title: '数据库设计', start: '2025-01-09', end: '2025-01-11', progress: 100 },
    { id: 20004, title: '前端开发', start: '2025-01-16', end: '2025-01-20', progress: 70 },
    { id: 20005, title: '后端开发', start: '2025-01-12', end: '2025-01-20', progress: 80 },
    { id: 20006, title: '接口联调', start: '2025-01-21', end: '2025-01-23', progress: 30 },
    { id: 20007, title: '功能测试', start: '2025-01-24', end: '2025-01-27', progress: 0 },
    { id: 20008, title: '性能优化', start: '2025-01-29', end: '2025-01-31', progress: 0 },
    { id: 20009, title: '部署上线', start: '2025-02-01', end: '2025-02-04', progress: 0 },
    { id: 20010, title: '项目验收', start: '2025-02-07', end: '2025-02-09', progress: 0 }
  ]
})
</script>

修改线类型

通过 taskCriticalPathConfig.lineType 设置线型。示例中使用 flowDashed，呈现流动虚线效果。

Video_2026-09-04_102245-ezgif.com-video-to-gif-converter (5)

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { VxeGanttDependencyType } from 'vxe-gantt'
const ganttOptions = reactive({
  border: true,
  height: 600,
  columnConfig: {
    resizable: true
  },
  rowConfig: {
    keyField: 'id' // 行主键
  },
  taskBarConfig: {
    showProgress: true, // 是否显示进度条
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    resizable: true, // 是否允许拖拽任务调整日期
    linkCreatable: true, // 是否允许自定义创建依赖线
    showCriticalPath: true, // 是否显示关键路径
    barStyle: {
      round: true, // 圆角
      bgColor: '#8b8b8b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskLinkConfig: {
    isHover: true, // 当鼠标移到依赖线时，是否要高亮当前依赖线
    isCurrent: true, // 当鼠标点击依赖线时，是否要高亮当前依赖线
    isDblclickToRemove: true // 是否允许双击依赖线删除
  },
  taskViewConfig: {
    tableStyle: {
      width: 480 // 表格宽度
    }
  },
  taskBarMoveConfig: {
    isSyncLinkTask: true // 拖拽移动任务后自动更新依赖线关联任务的日期
  },
  taskBarResizeConfig: {
    isSyncLinkTask: true // 拖拽调整任务后自动更新依赖线关联任务的日期
  },
  taskCriticalPathConfig: {
    lineType: 'flowDashed'
  },
  links: [
    { from: 20001, to: 20002, type: VxeGanttDependencyType.FinishToStart },
    { from: 20001, to: 20003, type: VxeGanttDependencyType.FinishToStart },
    { from: 20002, to: 20004, type: VxeGanttDependencyType.FinishToStart },
    { from: 20003, to: 20005, type: VxeGanttDependencyType.FinishToStart },
    { from: 20004, to: 20006, type: VxeGanttDependencyType.FinishToStart },
    { from: 20005, to: 20006, type: VxeGanttDependencyType.FinishToStart },
    { from: 20006, to: 20007, type: VxeGanttDependencyType.FinishToStart },
    { from: 20007, to: 20008, type: VxeGanttDependencyType.FinishToStart },
    { from: 20008, to: 20009, type: VxeGanttDependencyType.FinishToStart },
    { from: 20009, to: 20010, type: VxeGanttDependencyType.FinishToStart }
  ],
  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: 20001, title: '需求分析', start: '2025-01-06', end: '2025-01-08', progress: 100 },
    { id: 20002, title: 'UI设计', start: '2025-01-09', end: '2025-01-13', progress: 100 },
    { id: 20003, title: '数据库设计', start: '2025-01-09', end: '2025-01-11', progress: 100 },
    { id: 20004, title: '前端开发', start: '2025-01-16', end: '2025-01-20', progress: 70 },
    { id: 20005, title: '后端开发', start: '2025-01-12', end: '2025-01-20', progress: 80 },
    { id: 20006, title: '接口联调', start: '2025-01-21', end: '2025-01-23', progress: 30 },
    { id: 20007, title: '功能测试', start: '2025-01-24', end: '2025-01-27', progress: 0 },
    { id: 20008, title: '性能优化', start: '2025-01-29', end: '2025-01-31', progress: 0 },
    { id: 20009, title: '部署上线', start: '2025-02-01', end: '2025-02-04', progress: 0 },
    { id: 20010, title: '项目验收', start: '2025-02-07', end: '2025-02-09', progress: 0 }
  ]
})
</script>

效果：关键路径连线变为流动虚线，视觉上更强调动态与关键性。

相关参数

关键路径样式配置

taskCriticalPathConfig: {
  lineColor: '#fd9393', // 颜色
  lineType: 'flowDashed' // 线型
}
  • 该配置仅作用于关键路径上的连接线，普通依赖线不受影响。
  • lineColor 支持任意合法 CSS 颜色值。
  • lineType 可选值以官方文档为准，示例中 flowDashed 为流动虚线。

与普通依赖线高亮的关系

taskLinkConfig: {
  isHover: true,
  isCurrent: true,
  isDblclickToRemove: true
}
  • isHover 与 isCurrent 控制普通依赖线的悬停与点击高亮。
  • 关键路径连线颜色与线型由 taskCriticalPathConfig 独立控制，两者互不干扰。

同时设置颜色与线型

taskCriticalPathConfig: {
  lineColor: '#92c1f1',
  lineType: 'flowDashed'
}

可以同时设置，达到既改变颜色又改变线型的效果，便于与整体主题统一。

避坑

  • 仅影响关键路径
    • taskCriticalPathConfig 只作用于关键路径连线。若需修改普通依赖线样式，请查阅 taskLinkConfig 相关配置。
  • 颜色对比度
    • 选择 lineColor 时应考虑与任务条颜色、背景色的对比度，确保关键路径清晰可辨。例如任务条为 #8b8b8b 时，#fad06c、#fd9393 等高对比色效果较好。
  • 线型可选值
    • lineType 的可选值可能随版本变化，示例中的 flowDashed 为流动虚线。若设置无效，请 确认版本是否支持，并以官方文档为准。

通过 taskCriticalPathConfig.lineColor 与 lineType，可以灵活定制关键路径连接线的颜色与线型，使甘特图更贴合项目主题，也让关键路径在复杂计划中更加醒目。结合响应式绑定，还能实现主题切换、用户偏好等动态效果，提升整体使用体验。

https://gantt.vxeui.com

posted @ 2026-09-21 10:16  可不简单  阅读(6)  评论(0)    收藏  举报