在做 项目管理系统 / 任务管理系统 / 生产排产系统（APS） 时，甘特图几乎是一个绕不开的组件。
但如果你的技术栈是 Vue3，会发现一个比较现实的问题：
好用的甘特图组件其实并不多。
常见情况通常是：
- 一些库 只支持 Vue2
- 一些库 TypeScript 支持不完整
- 一些库 功能比较基础
- 比较成熟的方案基本都是 商业组件
因此去年开始，我尝试做一个开源组件：
jordium-gantt-vue3
一个基于 Vue3 + TypeScript 的甘特图组件，目前已经迭代了一段时间，并逐渐形成了一套比较完整的功能组件。
最近发布了 v1.10.0，主要带来了一次质的性能优化升级。
Github: nelson820125/jordium-gantt-vue3
Gitee：jordium_gantt_vue3: 基于Vue3的甘特图插件
在线 Demo：Jordium Gantt Vue3 - Modern Gantt Chart Component for Vue 3
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 上，一位用户针对组件性能提出了一些深入的技术讨论，并提供了一种 应用层优化方案。
讨论在这里：
通过这次讨论：
- 发现了一些潜在性能瓶颈
- 对内部算法进行了优化
- 同时给用户提供了 组件层 + 应用层的优化思路
最终形成了 v1.10.0 的性能提升版本。
这其实也是开源项目比较理想的一种发展方式：
用户提出问题 → 社区讨论 → 项目改进
Demo
在线 Demo：Jordium Gantt Vue3 - Modern Gantt Chart Component for Vue 3
GitHub：nelson820125/jordium-gantt-vue3
Gitee：jordium_gantt_vue3: 基于Vue3的甘特图插件
如果你正在开发：
- 项目管理系统
- 任务管理系统
- APS 排产系统
- 资源调度系统
可能会需要甘特图组件，也欢迎体验这个项目。
如果有建议或问题，也欢迎：
- 提 Issue
- 发 Discussion
- 或者 PR
开源项目的成长，很大程度上依赖社区反馈 ⭐。
