Gantt

gantt

甘特图(只读) · 项目排期可视化 · 左固定列(按 group 分组小标题) + 右时间轴(day/week/month 刻度) · CSS grid + 百分比定位条形 + progress 深色填充层 + today 竖线 · 自带 UTC 日期数学(零依赖) · 横向滚动

用法

基础用法

传入 tasks（start/end 为 YYYY-MM-DD 闭区间），自动按数据范围铺满时间轴。

工序

5/29

6/1

6/8

6/15

需求评审

100%

接口联调

70%

灰度上线

10%

tsx

const tasks = [
  { id: "s1", name: "需求评审", start: "2026-06-01", end: "2026-06-03", progress: 100 },
  { id: "s2", name: "接口联调", start: "2026-06-03", end: "2026-06-10", progress: 70 },
  { id: "s3", name: "灰度上线", start: "2026-06-10", end: "2026-06-14", progress: 10 },
];

<Gantt tasks={tasks} unit="week" />

进度与今日线

progress 0-100 驱动条内深色填充；today 落在范围内时绘制红色竖线。

工序

5/29

6/1

6/8

6/15

需求评审

100%

接口联调

70%

灰度上线

10%

tsx

<Gantt tasks={tasks} unit="week" today="2026-06-08" />

分组

相同 group 的任务在左列以小标题聚拢（按传入顺序，不强制重排）。

工序

5/29

6/1

6/8

6/15

6/22

6/29

7/6

7/13

前期

现场勘测

100%

材料进场

100%

施工

主体施工

60%

机电安装

25%

收尾

竣工验收

结算交付

tsx

const tasks = [
  { id: "t1", name: "现场勘测", start: "2026-06-01", end: "2026-06-05", progress: 100, group: "前期" },
  { id: "t3", name: "主体施工", start: "2026-06-08", end: "2026-06-24", progress: 60, group: "施工" },
  { id: "t5", name: "竣工验收", start: "2026-07-01", end: "2026-07-06", progress: 0, group: "收尾" },
];

<Gantt tasks={tasks} unit="week" today="2026-06-18" />

刻度单位

unit 切 day / week / month 改变表头刻度密度；day 刻度密集时横向滚动。

工序

5月

6月

7月

前期

现场勘测

100%

材料进场

100%

施工

主体施工

60%

机电安装

25%

收尾

竣工验收

结算交付

tsx

<Gantt tasks={tasks} unit="month" today="2026-06-18" />

自定义条形色

task.color 覆盖默认主题色（CSS 颜色，如 token var() 或 hex）。

工序

5/29

6/1

6/8

6/15

需求评审

100%

接口联调

70%

灰度上线

10%

tsx

const tasks = [
  { id: "s1", name: "需求评审", start: "2026-06-01", end: "2026-06-03", progress: 100 },
  { id: "s2", name: "接口联调", start: "2026-06-03", end: "2026-06-10", progress: 70, color: "var(--color-chart-2)" },
  { id: "s3", name: "灰度上线", start: "2026-06-10", end: "2026-06-14", progress: 10, color: "var(--color-chart-4)" },
];

<Gantt tasks={tasks} unit="week" />

何时用

只读展示「项目排期/工序时间线」时用——施工排期、迭代计划、含进度的任务条。条形不可拖拽改期（纯展示）；要拖拽编辑日期/时长用 Scheduler（事件日历）。要看依赖流向用 Flow。Gantt 胜在零依赖、自带 UTC 日期数学、CSS grid 渲染。

导入

import { Gantt } from "@hulianui/ui"

Props

继承 HTMLAttributes<HTMLDivElement>（除 children）。

名称	类型	默认	说明
tasks*	`GanttTask[]`	—	任务列表（只读，不可拖拽改期）
rangeStart	`string`	—	时间轴起点 `"YYYY-MM-DD"`；省略自动取最早 start 并向前留 padding
rangeEnd	`string`	—	时间轴终点 `"YYYY-MM-DD"`；省略自动取最晚 end 并向后留 padding
unit	`"day" \| "week" \| "month"`	`"day"`	表头刻度密度（week 周一起）；仅影响刻度，不改条形定位
today	`string`	—	今日竖线日期 `"YYYY-MM-DD"`；落在范围内才绘制
rowHeight	`number`	`36`	每行高度（px）
className	`string`	—	外层类名

GanttTask：{id, name, start, end, progress?, group?, color?}。start/end 为 "YYYY-MM-DD" 闭区间（含首尾两端）；progress 0-100 驱动条内深色填充层；相同 group 在左列以小标题聚拢；color 为 CSS 颜色（token var() 或 hex），省略走主题 primary。

禁忌 / 坑

日期字符串是闭区间 "YYYY-MM-DD"，组件用 UTC 日期数学避开时区漂移——别传带时分或本地时区偏移的 ISO datetime（那是 Scheduler 的输入）。
color 用 token 变量时须带 --color- 前缀（var(--color-chart-2)），裸变量不解析，见 [[hulian-token-color-var-needs-color-prefix]]。
时间轴可能比容器宽，组件靠横向滚动——外层给确定宽度（如 w-[680px] max-w-full）才有滚动条。

Playground

刻度单位

工序

5/29

6/1

6/8

6/15

6/22

6/29

7/6

7/13

前期

现场勘测

100%

材料进场

100%

施工

主体施工

60%

机电安装

25%

收尾

竣工验收

结算交付

<Gantt tasks={tasks} unit="week" today="2026-06-18" />

用法

基础用法

传入 tasks（start/end 为 YYYY-MM-DD 闭区间），自动按数据范围铺满时间轴。

工序

5/29

6/1

6/8

6/15

需求评审

100%

接口联调

70%

灰度上线

10%

tsx

const tasks = [
  { id: "s1", name: "需求评审", start: "2026-06-01", end: "2026-06-03", progress: 100 },
  { id: "s2", name: "接口联调", start: "2026-06-03", end: "2026-06-10", progress: 70 },
  { id: "s3", name: "灰度上线", start: "2026-06-10", end: "2026-06-14", progress: 10 },
];

<Gantt tasks={tasks} unit="week" />

进度与今日线

progress 0-100 驱动条内深色填充；today 落在范围内时绘制红色竖线。

工序

5/29

6/1

6/8

6/15

需求评审

100%

接口联调

70%

灰度上线

10%

tsx

<Gantt tasks={tasks} unit="week" today="2026-06-08" />

分组

相同 group 的任务在左列以小标题聚拢（按传入顺序，不强制重排）。

工序

5/29

6/1

6/8

6/15

6/22

6/29

7/6

7/13

前期

现场勘测

100%

材料进场

100%

施工

主体施工

60%

机电安装

25%

收尾

竣工验收

结算交付

tsx

const tasks = [
  { id: "t1", name: "现场勘测", start: "2026-06-01", end: "2026-06-05", progress: 100, group: "前期" },
  { id: "t3", name: "主体施工", start: "2026-06-08", end: "2026-06-24", progress: 60, group: "施工" },
  { id: "t5", name: "竣工验收", start: "2026-07-01", end: "2026-07-06", progress: 0, group: "收尾" },
];

<Gantt tasks={tasks} unit="week" today="2026-06-18" />

刻度单位

unit 切 day / week / month 改变表头刻度密度；day 刻度密集时横向滚动。

工序

5月

6月

7月

前期

现场勘测

100%

材料进场

100%

施工

主体施工

60%

机电安装

25%

收尾

竣工验收

结算交付

tsx

<Gantt tasks={tasks} unit="month" today="2026-06-18" />

自定义条形色

task.color 覆盖默认主题色（CSS 颜色，如 token var() 或 hex）。

工序

5/29

6/1

6/8

6/15

需求评审

100%

接口联调

70%

灰度上线

10%

tsx

const tasks = [
  { id: "s1", name: "需求评审", start: "2026-06-01", end: "2026-06-03", progress: 100 },
  { id: "s2", name: "接口联调", start: "2026-06-03", end: "2026-06-10", progress: 70, color: "var(--color-chart-2)" },
  { id: "s3", name: "灰度上线", start: "2026-06-10", end: "2026-06-14", progress: 10, color: "var(--color-chart-4)" },
];

<Gantt tasks={tasks} unit="week" />

何时用

Props

继承 HTMLAttributes<HTMLDivElement>（除 children）。

名称	类型	默认	说明
tasks*	`GanttTask[]`	—	任务列表（只读，不可拖拽改期）
rangeStart	`string`	—	时间轴起点 `"YYYY-MM-DD"`；省略自动取最早 start 并向前留 padding
rangeEnd	`string`	—	时间轴终点 `"YYYY-MM-DD"`；省略自动取最晚 end 并向后留 padding
unit	`"day" \| "week" \| "month"`	`"day"`	表头刻度密度（week 周一起）；仅影响刻度，不改条形定位
today	`string`	—	今日竖线日期 `"YYYY-MM-DD"`；落在范围内才绘制
rowHeight	`number`	`36`	每行高度（px）
className	`string`	—	外层类名

禁忌 / 坑

日期字符串是闭区间 "YYYY-MM-DD"，组件用 UTC 日期数学避开时区漂移——别传带时分或本地时区偏移的 ISO datetime（那是 Scheduler 的输入）。

color 用 token 变量时须带 --color- 前缀（var(--color-chart-2)），裸变量不解析，见 [[hulian-token-color-var-needs-color-prefix]]。

时间轴可能比容器宽，组件靠横向滚动——外层给确定宽度（如 w-[680px] max-w-full）才有滚动条。

Gantt

用法

基础用法

进度与今日线

分组

刻度单位

自定义条形色

何时用

导入

Props

禁忌 / 坑

相关

Playground

Gantt

用法

基础用法

进度与今日线

分组

刻度单位

自定义条形色

何时用

导入

Props

禁忌 / 坑

相关

Playground