5 分钟快速上手

只需 5 分钟，你就能掌握 GanttFlow 的核心用法。

Step 1: 安装（1 分钟）

npm

npm install @agions/gantt-flow

yarn

yarn add @agions/gantt-flow

pnpm

pnpm add @agions/gantt-flow

Step 2: 基础使用（2 分钟）

React

import React from "react"
import { EnhancedGanttChart } from "@agions/gantt-flow"
import "@agions/gantt-flow/style"

// 定义任务数据
const tasks = [
  { id: "1", name: "任务一", start: "2024-01-01", end: "2024-01-05", progress: 100 },
  { id: "2", name: "任务二", start: "2024-01-03", end: "2024-01-10", progress: 60 },
  { id: "3", name: "任务三", start: "2024-01-08", end: "2024-01-15", progress: 30 },
]

function App() {
  return (
    <div style={{ height: "400px" }}>
      <EnhancedGanttChart tasks={tasks} viewMode="week" />
    </div>
  )
}

export default App

Vue

<template>
  <div style="height: 400px">
    <GanttChart :tasks="tasks" view-mode="week" />
  </div>
</template>

<script setup>
import { GanttChart } from "@agions/gantt-flow/vue"
import "@agions/gantt-flow/style"

const tasks = [
  { id: "1", name: "任务一", start: "2024-01-01", end: "2024-01-05", progress: 100 },
  { id: "2", name: "任务二", start: "2024-01-03", end: "2024-01-10", progress: 60 },
  { id: "3", name: "任务三", start: "2024-01-08", end: "2024-01-15", progress: 30 },
]
</script>

Step 3: 添加交互（1 分钟）

import React, { useRef } from "react"
import { EnhancedGanttChart } from "@agions/gantt-flow"
import "@agions/gantt-flow/style"

function App() {
  const ganttRef = useRef(null)
  
  const tasks = [
    { id: "1", name: "需求分析", start: "2024-01-01", end: "2024-01-05", progress: 100 },
    { id: "2", name: "系统设计", start: "2024-01-06", end: "2024-01-12", progress: 80 },
    { id: "3", name: "编码开发", start: "2024-01-13", end: "2024-01-25", progress: 50 },
  ]

  // 点击任务
  const handleTaskClick = (task) => {
    console.log("点击了:", task.name)
  }

  // 拖拽任务
  const handleTaskDrag = (task, e, newStart, newEnd) => {
    console.log(`${task.name} 被拖动到 ${newStart} - ${newEnd}`)
  }

  // 切换视图
  const handleViewChange = (mode) => {
    console.log("切换到:", mode)
  }

  return (
    <div>
      {/* 工具栏 */}
      <div style={{ marginBottom: 16 }}>
        <button onClick={() => ganttRef.current?.setViewMode('day')}>日</button>
        <button onClick={() => ganttRef.current?.setViewMode('week')}>周</button>
        <button onClick={() => ganttRef.current?.setViewMode('month')}>月</button>
        <button onClick={() => ganttRef.current?.fitToScreen()}>适应屏幕</button>
      </div>

      {/* 甘特图 */}
      <div style={{ height: "400px" }}>
        <EnhancedGanttChart
          ref={ganttRef}
          tasks={tasks}
          viewMode="week"
          onTaskClick={handleTaskClick}
          onTaskDrag={handleTaskDrag}
          onViewChange={handleViewChange}
        />
      </div>
    </div>
  )
}

export default App

Step 4: 进阶功能（1 分钟）

添加依赖关系

const dependencies = [
  { fromId: "1", toId: "2", type: "finish_to_start" },  // 任务一完成后开始任务二
  { fromId: "2", toId: "3", type: "finish_to_start" },  // 任务二完成后开始任务三
]

<EnhancedGanttChart
  tasks={tasks}
  dependencies={dependencies}
  enableDependencies={true}
/>

添加里程碑

const tasks = [
  { id: "1", name: "开发阶段", start: "2024-01-01", end: "2024-01-15" },
  { id: "m1", name: "Alpha 发布", start: "2024-01-15", end: "2024-01-15", type: "milestone" },
  { id: "2", name: "测试阶段", start: "2024-01-16", end: "2024-01-25" },
]

主题切换

<EnhancedGanttChart
  tasks={tasks}
  options={{
    theme: "dark"  // 或 "light" 或 "auto"
  }}
/>

🎉 完成！

你已经掌握了 GanttFlow 的核心用法：

功能	相关文档
更多示例	React 示例 / Vue 示例
完整 API	组件属性
拖拽功能	拖拽与调整
主题定制	主题系统

常见问题

Q: 样式没有生效？
A: 确保引入了样式文件：import "@agions/gantt-flow/style"

Q: 任务不显示？
A: 检查任务数据格式，确保 start 和 end 是有效日期

Q: 如何处理大数据量？
A: 启用虚拟滚动：虚拟滚动

学习路径

1. 快速开始 - 详细安装和配置
2. 核心概念 - 了解内部原理
3. 主题系统 - 自定义外观
4. 最佳实践 - 工程实践建议