在做 项目管理系统 / 任务管理系统 / 生产排产系统（APS） 时，甘特图几乎是一个绕不开的组件。

但如果你的技术栈是 Vue3，会发现一个比较现实的问题：

好用的甘特图组件其实并不多。

常见情况通常是：

• 一些库 只支持 Vue2

• 一些库 TypeScript 支持不完整

• 一些库 功能比较基础

• 比较成熟的方案基本都是 商业组件

因此去年开始，我尝试做一个开源组件：

jordium-gantt-vue3

一个基于 Vue3 + TypeScript 的甘特图组件，目前已经迭代了一段时间，并逐渐形成了一套比较完整的功能组件。

最近发布了 v1.10.0，主要带来了一次质的性能优化升级。

GitHub：

Github Repohttps://github.com/nelson820125/jordium-gantt-vue3Gitee：

Gitee Repohttps://gitee.com/jordium/jordium-gantt-vue3在线 Demo：

Jordium Gantt Vue3 Demohttps://jordium.gitee.io/jordium-gantt-vue3/

---

Vue3 甘特图生态现状

如果在 Vue3 项目中寻找甘特图方案，大致会遇到三类选择：

1 商业组件

例如：

• DHTMLX Gantt

• Syncfusion Gantt

优点：

• 功能非常完整

• 企业级能力

缺点：

• 价格较高

• Vue3 适配有时比较重

---

2 轻量级组件

例如一些简单的 Vue Gantt 实现。

优点：

• 轻量

• 易集成

缺点：

• 功能较少

• 扩展能力有限

---

3 自己实现

很多团队最后都会选择：

自己实现甘特图。

原因很简单：

• 需求通常比较定制

• 需要与业务深度结合

但问题是甘特图的实现其实并不简单，例如：

• 时间轴计算

• 任务布局算法

• 拖拽交互

• 依赖关系绘制

• 大数据量渲染优化

这些都会带来不少开发成本。

---

jordium-gantt-vue3 提供了什么

这个项目的目标其实很明确：

做一个现代化、可扩展的 Vue3 开源甘特图组件。

目前已经支持的能力包括：

任务管理

• 任务层级结构

• 任务拖拽

• 任务调整时间

• 任务进度

任务依赖关系

支持：

• 前置任务

• 后置任务

• 可视化依赖线

多时间尺度

支持：

• Hour

• Day

• Week

• Month

• Quarter

• Year

实际任务进度

支持：

• 实际开始时间

• 实际结束时间

• 任务状态

可以实现：

计划 vs 实际对比。

资源视图（Resource View）

这是 v1.9.0 引入的重要能力。

甘特图可以按资源维度展示，例如：

开发A
  ├─ 任务1
  ├─ 任务2

开发B
  ├─ 任务3

并支持：

• 资源投入比例

• 资源负荷检测

• 多任务条布局

这对于：

• 团队资源管理

• 项目排期

• 制造业排产

都比较有用。

---

v1.10.0：一次性能优化升级

最新发布的 v1.10.0 主要集中在 针对中低端资源以及移动设备访问时的性能优化。

包括：

• 甘特图内部算法优化

• 渲染性能优化

• 移动设备访问兼容性提升

这些优化主要改善：

• 大数据量任务场景

• 高频拖拽交互

• 移动设备访问体验

---

一次来自社区的优化

这次版本还有一个比较有意思的背景。

在 GitHub 上，一位用户针对组件性能提出了一些深入的技术讨论，并提供了一种 应用层优化方案。

讨论在这里：

Memory leak and high CPU usehttps://github.com/nelson820125/jordium-gantt-vue3/discussions/16通过这次讨论：

• 发现了一些潜在性能瓶颈

• 对内部算法进行了优化

• 同时给用户提供了 组件层 + 应用层的优化思路

最终形成了 v1.10.0 的性能提升版本。

这其实也是开源项目比较理想的一种发展方式：

用户提出问题 → 社区讨论 → 项目改进

---

Demo

在线 Demo：

Jordium Gantt Vue3 Demohttps://jordium.gitee.io/jordium-gantt-vue3/GitHub：

Github Repohttps://github.com/nelson820125/jordium-gantt-vue3Gitee：

Gitee Repohttps://gitee.com/jordium/jordium-gantt-vue3

---

如果你正在开发：

• 项目管理系统

• 任务管理系统

• APS 排产系统

• 资源调度系统

可能会需要甘特图组件，也欢迎体验这个项目。

如果有建议或问题，也欢迎：

• 提 Issue

• 发 Discussion

• 或者 PR

开源项目的成长，很大程度上依赖社区反馈 ⭐。