甘特图示例

https://github.com/nelson820125/jordium-gantt-vue3

https://nelson820125.github.io/jordium-gantt-vue3/

下面把目前「Vue3 生态里最好用、文档最全」的几款甘特图组件一次性梳理给你,并给出可以直接跳过去的官方文档/示例地址,按「功能丰富度 → 轻量级 → 国产中文友好」3 个梯度排序,方便你根据项目体量做取舍。


1. 功能最全:dhtmlxGantt(企业级,官方 Vue3 示例已上线)

  • 特点

  • 支持任务、里程碑、依赖线、关键路径、资源负荷、基线对比、PDF/Excel 导出等全套项目管理功能

  • 官方已提供 `@dhtmlx/gantt` 的 Vue3 组合式封装,可直接 `<gantt />` 标签使用

  • 文档/示例

  • 快速入门(Vue3 版):https://developer.aliyun.com/article/1627840(https://developer.aliyun.com/article/1627840)

  • 完整 API 手册(英文):https://docs.dhtmlx.com/gantt/(https://docs.dhtmlx.com/gantt/)

  • 开源仓库(MIT):https://github.com/DHTMLX/gantt(https://github.com/DHTMLX/gantt)

  • 安装

```bash

npm i dhtmlx-gantt

```

引入后即可在 `<script setup>` 里 `import { gantt } from 'dhtmlx-gantt'` 调用 。


2. 轻量开源:frappe-gantt(只有 20 kB,无依赖)

```bash

npm i frappe-gantt

```


3. 国产中文友好:jordium-gantt-vue3(刚刚迭代到 v2,文档全中文)

  • 特点

  • 纯 Vue3 + TS 重写,虚拟滚动 + 懒加载,单表 10 000 行流畅

  • 内置「亮/暗」主题、国际化(zh/en)、右键菜单、里程碑、拖拽、缩放、关键路径

  • 提供 `<gantt-chart>` 单文件组件,开箱即用

  • 文档/示例

  • 在线 demo(GitHub Pages):https://nelson820125.github.io/jordium-gantt-vue3(https://nelson820125.github.io/jordium-gantt-vue3)

  • 中文 README/API 手册:https://github.com/nelson820125/jordium-gantt-vue3(https://github.com/nelson820125/jordium-gantt-vue3)

  • 安装

```bash

npm i jordium-gantt-vue3

```


4. 其他可选项(一句话速览)

  • **vue-ganttastic** -- 语法糖风格,支持 Vue2/3,适合喜欢声明式模板的同学

  • **gantt-elastic** -- 弹性时间轴 + 自定义列,API 类似 dhtmlx,但已停止维护,仅建议老项目沿用

  • **vxe-gantt** -- 基于 vxe-table 生态,如果你项目已经用 vxe-table 做表格,可以无缝衔接

  • **vue-gantt-3** -- 个人作者作品,虚拟化做得不错,文档在 GitHub Pages,适合二次开发


结论(怎么选)

| 项目需求 | 推荐方案 |

| --- | --- |

| 需要「项目管理级」能力(导出、资源、基线) | dhtmlxGantt |

| 只想「轻量嵌入」一个甘特图 | frappe-gantt |

| 希望「中文文档 + 纯 Vue3 + 可定制」 | jordium-gantt-vue3 |

把上面官方文档/仓库收藏即可,照着 README 的「Install → Import → Demo data」三步跑通,最快 10 分钟就能在 Vue3 页面里把甘特图拉起来。祝开发顺利!

相关推荐
猴哥聊项目管理12 小时前
项目进度管理:甘特图、里程碑和关键路径实操指南
项目管理·甘特图·里程碑·进度管理·关键路径·项目进度管理
SL-staff2 天前
JVS-APS实战:用多策略排产+主资源甘特图识别并优化设备伪瓶颈
智能制造·甘特图·aps·jvs·排产优化·设备利用率·生产调度
研之有李-10 天前
需求变更频繁怎么办?瀑布项目范围基线与变更控制实操
项目管理·甘特图·需求变更·瀑布项目管理·瀑布开发
daols881 个月前
vue 甘特图 vxe-gantt 小时视图设置日期轴每间隔 3 个小时
vue.js·甘特图·vxe-gantt
daols881 个月前
vue 甘特图 vxe-gantt 实现双进度条:计划 vs 实际,支持多级子任务拆分
vue.js·甘特图·vxe-table·vxe-gantt
项目管理者1 个月前
PMP 专业项目管理软件核心应用场景指南
人工智能·甘特图·敏捷流程
项目管理者2 个月前
项目计划制定新手实战指南
甘特图·敏捷流程
项目管理者2 个月前
Microsoft Project 甘特图实战:从计划制定到落地管控
甘特图
关中老四2 个月前
【PJMan3.0】从Excel数据,一键生成甘特图(支持AI智能识别)
项目管理·甘特图·进度管理·pjman
猴哥聊项目管理2 个月前
2026年信创项目管理:如何用甘特图提升进度管控
大数据·数据库·项目管理·企业数字化转型·甘特图·敏捷开发·项目进度管理软件