vue 甘特图组件 vxe-gantt 自动计算工期显示关键路径

vxe-gantt 是一款基于 Vue 的甘特图组件，支持任务依赖、进度展示、拖拽调整、关键路径高亮等能力。其中关键路径（Critical Path）是项目管理中的核心概念，它决定了项目的最短工期——路径上任何任务的延迟都会导致整个项目延期。

通过简单的配置，vxe-gantt 可以自动根据任务依赖关系和工期计算出关键路径，并高亮显示，帮助开发者快速识别项目中的关键任务

功能概述

• 自动计算工期：根据任务的开始时间与结束时间自动计算工期。
• 依赖关系管理：通过 links 定义任务间的依赖类型（如完成-开始）。
• 关键路径高亮：设置 taskBarConfig.showCriticalPath: true 后，组件会自动识别关键路径并以特殊样式高亮。
• 交互能力：支持拖拽移动任务、调整任务日期、自定义创建依赖线，并可同步更新关联任务日期。
• 进度展示：任务条上可显示进度百分比与内容。

核心配置

启用关键路径

在 taskBarConfig 中开启 showCriticalPath：

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

定义任务依赖关系

关键路径的计算依赖于任务之间的依赖关系。通过 links 数组定义：

import { VxeGanttDependencyType } from 'vxe-gantt'

links: [
  { from: 20001, to: 20002, type: VxeGanttDependencyType.FinishToStart },
  // ...
]

• from：前置任务 ID
• to：后置任务 ID
• type：依赖类型，常用 FinishToStart（完成-开始）

提供任务数据

每个任务需要包含开始时间、结束时间等字段：

data: [
  { id: 20001, title: '需求分析', start: '2025-01-06', end: '2025-01-08', progress: 100 },
  // ...
]

组件会根据 start 与 end 自动计算工期，并结合依赖关系推导关键路径。

代码

<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 // 当鼠标点击依赖线时，是否要高亮当前依赖线
  },
  taskViewConfig: {
    tableStyle: {
      width: 480 // 表格宽度
    }
  },
  taskBarMoveConfig: {
    isSyncLinkTask: true // 拖拽移动任务后自动更新依赖线关联任务的日期
  },
  taskBarResizeConfig: {
    isSyncLinkTask: true // 拖拽调整任务后自动更新依赖线关联任务的日期
  },
  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>

参数说明

关键路径开关

taskBarConfig: {
  showCriticalPath: true
}

开启后，vxe-gantt 会自动分析 links 中的依赖关系，结合每个任务的工期，计算出所有路径中总工期最长的路径，即关键路径。关键路径上的任务条会以特殊样式（通常是红色或高亮色）显示，与普通任务条区分。

拖拽与依赖同步

taskBarMoveConfig: {
  isSyncLinkTask: true
},
taskBarResizeConfig: {
  isSyncLinkTask: true
}

• taskBarMoveConfig：控制拖拽移动任务时的行为。
• taskBarResizeConfig：控制拖拽调整任务日期时的行为。
• isSyncLinkTask: true：当任务日期变化后，自动更新与其有依赖关系的任务日期，保持依赖逻辑正确。这对于关键路径的动态更新非常重要。

依赖线高亮

taskLinkConfig: {
  isHover: true,
  isCurrent: true
}

• isHover：鼠标悬停时高亮依赖线。
• isCurrent：点击依赖线时保持高亮。

任务条样式

barStyle: {
  round: true,
  bgColor: '#8b8b8b',
  completedBgColor: '#65c16f'
}

可自定义任务条的圆角、背景色和已完成部分颜色。关键路径的高亮样式可能由组件内部默认控制，也可通过相关样式配置调整，具体请参考官方文档。

通过 showCriticalPath 配置，vxe-gantt 能够自动计算并高亮关键路径，帮助项目管理者快速识别影响整体工期的关键任务。结合拖拽调整与依赖同步，甘特图可以实时反映项目计划变化，是项目管理类应用的理想选择。

https://gantt.vxeui.com