Skip to content
Yotsuba Gantt 四叶草甘特图
为项目计划、研发排期与跨团队交付而做。核心目标是轻量、快速、易接入和高度可配置；基础动效保留，但始终服从视口预算与宿主设置。
轻量
Core 零运行时依赖；React 组件约 6.57 kB gzip JS。
快速
行与时间列双向虚拟化，10,000 条任务仍保持约一千个 DOM 节点。
专业
六档维度、依赖线、层级任务、拖放缩放、自动聚焦与多图联动。
开放
Vue Slots、React Render Props、Resolver、CSS 变量与 Flutter Builder 覆盖主要扩展面。
安装后直接进入业务代码
Vue、React 与框架无关 Core 发布到 npm；Flutter 使用原生 Widget 发布到 pub.dev。
Vue 3
pnpm add @iyotsuba/gantt-vue @iyotsuba/gantt-coreReact 18 / 19
pnpm add @iyotsuba/gantt-react @iyotsuba/gantt-coreFlutter
flutter pub add yotsuba_gantt一套组件，覆盖真实排期工作流
多个甘特图可以按日期锚点联动，也可以完全独立。视口外任务提供逐行边缘导航，维度变化后自动定位到最密集的数据区。
10,000 条任务仍然可工作
虚拟化、逐帧滚动合并、密度桶聚焦与 Viewport Activity Budget 共同控制渲染和动效成本。
| 场景 | DOM 节点 | 平均帧间隔 | P95 | Long Task |
|---|---|---|---|---|
| 10,000 条本地任务 | 1,034 | 8.22 ms | 10.5 ms | 0 |