5 分钟开始

建议按三个步骤接入 Yotsuba Gantt：选择平台包、准备不可变任务数据，再根据业务边界接入事件、控制器与自定义渲染。

1. 选择平台

你的项目	安装	适合的入口
Vue 3	pnpm add @iyotsuba/gantt-vue@alpha @iyotsuba/gantt-core@alpha	Vue 快速开始
React 18 / 19	pnpm add @iyotsuba/gantt-react@alpha @iyotsuba/gantt-core@alpha	React 快速开始
Flutter 3.22+	flutter pub add yotsuba_gantt	Flutter 快速开始

Web 端还需要在应用入口加载一次组件 CSS：

import '@iyotsuba/gantt-vue/style.css'
// React 项目改为：import '@iyotsuba/gantt-react/style.css'

Flutter 版本是原生 Widget，不使用 WebView。日期选择器由宿主应用决定，因此可以直接接入 Material、Cupertino 或你的业务日历组件。

2. 准备任务数据

每个任务至少需要稳定的 id、标题、开始时间和结束时间。Web 端日期接受字符串、数字或 Date；Flutter 使用 DateTime。组件不会直接修改你传入的对象。

const tasks = [
  {
    id: 'design',
    title: '交互设计',
    start: '2026-08-03',
    end: '2026-08-12',
    progress: 68,
    status: 'active',
    owner: { name: '小叶' },
  },
]

依赖关系单独放在 links 中，任务层级使用 parentId 和 level 表达。这样可以在服务端分页、撤销和冲突合并时保持数据边界清晰。

3. 放入第一个甘特图

<script setup lang="ts">
import { ref } from 'vue'
import { YgGantt } from '@iyotsuba/gantt-vue'
import type { ViewPresetId } from '@iyotsuba/gantt-core'

const view = ref<ViewPresetId>('week')
</script>

<template>
  <YgGantt
    v-model:view="view"
    title="产品研发"
    :tasks="tasks"
    :auto-focus="{ enabled: true, strategy: 'dense', onViewChange: true }"
    @task-click="({ task }) => openInspector(task)"
    @task-dblclick="({ task }) => openDetails(task)"
  />
</template>

autoFocus 会在首次加载和维度切换后把时间轴带到有数据的位置；dense 会优先选择任务密度较高的窗口。若你需要完全控制定位，可以关闭它并调用实例方法 focus()、scrollToDate() 或 scrollTaskIntoView()。

下一步怎么走

• 需要双图联动：阅读多图联动，了解同步滚动、维度和独立模式。
• 需要自定义任务条：阅读样式与扩展，查看 Vue Slot、React Render Props 和 Flutter Builder。
• 需要接入 10K 以上数据：阅读大数据性能，再根据 visible-range-change 做远程窗口加载。
• 需要核对所有参数：直接进入 Vue API、React API 或 Flutter API。

完整的可操作样例在在线演示，Flutter 的可安装体验在 GitHub Android Release。