vue 甘特图 vxe-gantt 任务里程碑和依赖线的配置

在项目管理中，里程碑（Milestone）是标志着重要阶段或关键事件的时间节点（如“需求评审通过”、“测试环境发布”），通常不占用工期，但具有极高的标志性意义。
而依赖关系连线则直观展示了任务之间的逻辑顺序，帮助团队识别关键路径。
vxe-gantt 提供了完善的里程碑支持，允许自定义图标样式，并支持丰富的依赖线样式配置。本文将结合示例，详细讲解如何将普通任务设为里程碑、自定义里程碑图标、以及配置依赖线的视觉风格。

核心配置

配置项	作用
taskBarMilestoneConfig	里程碑全局配置，包括图标和样式自定义
taskLinkConfig	依赖连接线的全局样式（线型、颜色等）
数据中的 type 字段	标记任务为里程碑（VxeGanttTaskType.Milestone）
数据中的 start / end	里程碑只需设置 start，end 可为空

实现步骤

标记任务为里程碑

在数据中为需要设为里程碑的任务指定 type: VxeGanttTaskType.Milestone 或 'milestone'

{ id: 10001, title: '项目启动会议', start: '2024-03-01', end: '', progress: 0, type: VxeGanttTaskType.Milestone }

里程碑任务无需设置 end 和 progress（进度固定为 0），组件会自动以菱形或其他图标显示在时间轴上。

配置里程碑外观（taskBarMilestoneConfig）

通过 icon 和 iconStyle 函数可根据任务数据动态返回图标名称和样式：

taskBarMilestoneConfig: {
  icon({ row }) {
    // 根据任务 ID 返回不同的图标（使用 Vxe 内置图标库）
    if (row.id === 10001) return 'vxe-icon-warning-triangle-fill'
    if (row.id === 10007) return 'vxe-icon-square-fill'
    if (row.id === 10009) return 'vxe-icon-warning-circle-fill'
    return 'vxe-icon-radio-unchecked-fill'   // 默认图标
  },
  iconStyle({ row }) {
    // 动态设置图标颜色
    if (row.id === 10001) return { color: '#65c16f' }
    if (row.id === 10007) return { color: '#dc3cc7' }
    // 其他里程碑使用默认颜色
  }
}

这样，不同里程碑可以用不同形状和颜色区分，增强可视化辨识度

依赖线样式配置（taskLinkConfig）

taskLinkConfig 控制所有依赖连接线的全局样式：

taskLinkConfig: {
  lineType: 'flowDashed'   // 可选：'solid'（实线）、'dashed'（虚线）、'flowDashed'（流动虚线）
}

solid：实线，适用于标准依赖
dashed：虚线，常用于软依赖或建议性关系
flowDashed：流动虚线（带有动态动画效果），视觉上更突出，适合大屏展示

代码

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

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

const ganttOptions = reactive({
  border: true,
  height: 500,
  rowConfig: {
    keyField: 'id' // 行主键
  },
  taskBarConfig: {
    showProgress: true, // 是否显示进度条
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    resizable: true, // 是否允许拖拽任务调整日期
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskViewConfig: {
    tableStyle: {
      width: 280 // 表格宽度
    },
    gridding: {
      leftSpacing: 1, // 左侧间距多少列
      rightSpacing: 4 // 右侧间距多少列
    }
  },
  taskBarMilestoneConfig: {
    // 自定义里程碑图标
    icon({ row }) {
      if (row.id === 10001) {
        return 'vxe-icon-warning-triangle-fill'
      }
      if (row.id === 10007) {
        return 'vxe-icon-square-fill'
      }
      if (row.id === 10009) {
        return 'vxe-icon-warning-circle-fill'
      }
      return 'vxe-icon-radio-unchecked-fill'
    },
    // 自定义里程碑图标样式
    iconStyle({ row }) {
      if (row.id === 10001) {
        return {
          color: '#65c16f'
        }
      }
      if (row.id === 10007) {
        return {
          color: '#dc3cc7'
        }
      }
    }
  },
  taskLinkConfig: {
    lineType: 'flowDashed'
  },
  links: [
    { from: 10001, to: 10002, type: VxeGanttDependencyType.StartToFinish },
    { from: 10003, to: 10004, type: VxeGanttDependencyType.StartToStart },
    { from: 10007, to: 10008, type: VxeGanttDependencyType.StartToStart },
    { from: 10008, to: 10009, type: VxeGanttDependencyType.FinishToFinish },
    { from: 10009, to: 10010, type: VxeGanttDependencyType.FinishToStart }
  ],
  columns: [
    { type: 'seq', width: 70 },
    { field: 'title', title: '任务名称' }
  ],
  data: [
    { id: 10001, title: '项目启动会议', start: '2024-03-01', end: '', progress: 0, type: VxeGanttTaskType.Milestone },
    { id: 10002, title: '项目启动与计划', start: '2024-03-03', end: '2024-03-08', progress: 80, type: '' },
    { id: 10003, title: '需求评审完成', start: '2024-03-03', end: '', progress: 0, type: VxeGanttTaskType.Milestone },
    { id: 10004, title: '技术及方案设计', start: '2024-03-05', end: '2024-03-11', progress: 80, type: '' },
    { id: 10005, title: '功能开发', start: '2024-03-08', end: '2024-03-15', progress: 70, type: '' },
    { id: 10007, title: '测试环境发布', start: '2024-03-11', end: '', progress: 0, type: VxeGanttTaskType.Milestone },
    { id: 10008, title: '系统测试', start: '2024-03-14', end: '2024-03-19', progress: 80, type: '' },
    { id: 10009, title: '测试完成', start: '2024-03-19', end: '', progress: 0, type: VxeGanttTaskType.Milestone },
    { id: 10010, title: '正式发布上线', start: '2024-03-20', end: '', progress: 0, type: VxeGanttTaskType.Milestone }
  ]
})
</script>

关键点

里程碑日期
- 里程碑仅需设置 start 日期，end 应留空或与 start 相同。progress 固定为 0，组件会自动忽略。
依赖关系的合法性
- 当依赖连线涉及里程碑时，需确保逻辑合理。例如，一个里程碑（无工期）作为 from 或 to 时，依赖类型的语义可能需特殊处理（如 FinishToStart 中里程碑的“完成”即为到达该日期）。
图标库依赖
- 自定义图标使用了 vxe-pc-ui 内置图标库（vxe-icon-*），确保已正确引入。若需使用其他图标库（如 Font Awesome），需自行适配。
依赖线样式优先级
- taskLinkConfig 为全局设置，若需为单条连线定制样式，目前版本暂不支持（需通过 CSS 覆盖）。
流动虚线动画
- flowDashed 线型自带流动动画，可增强视觉提示，但在数据量极大或连线过多时，可能消耗一定性能，建议按需使用。

vxe-gantt 对里程碑和依赖线的支持非常灵活，通过简单的数据标记和配置函数，即可实现高度自定义的里程碑展示。结合丰富的依赖线样式（尤其是流动虚线），能够有效提升甘特图的表达力和视觉吸引力。
实际项目中，建议根据业务阶段合理设置里程碑节点，并配合依赖线清晰呈现项目推进路径，帮助团队聚焦关键节点。

https://gantt.vxeui.com

posted @ 2026-08-27 13:45 你个老六阅读(3) 评论(0) 收藏举报

刷新页面返回顶部

zhiy3