甘特图 ​

@dou-ui/gantt 提供甘特图 DouGantt：左边是任务表格，右边是时间轴上的任务条，任务之间可以有依赖。适合项目排期、迭代计划这类有起止时间和前后关系的任务。

安装 ​

甘特图是单独的包，需要和 dou-ui 一起使用：

bun add dou-ui @dou-ui/gantt

引入样式，再注册组件：

import 'dou-ui/style.css'
import '@dou-ui/gantt/style.css'
import { DouGantt } from '@dou-ui/gantt'

app.use(DouGantt)

基础用法 ​

v-model 绑定一份排期，里面的 tasks 是任务列表，links 是任务之间的依赖，格式见文档数据。

• 有子任务的任务是汇总任务，它的起止时间和进度由子任务算出；
• type: 'milestone' 的任务是里程碑，画成一个菱形；
• 不设置 readonly 时可以直接拖动编辑，见编辑。

表格与任务条 ​

columns 设置左侧表格的列，默认是名称、开始和工期，写法见列。tableWidth 是表格的初始宽度，rowHeight 是行高。

barLabel 决定任务名放在哪里：

• auto（默认）：放得下时在任务条内，否则在任务条旁；
• inside、outside：总是在条内或条旁；
• none：不显示。

bar 插槽可以替换任务条里的内容，cell 插槽可以替换表格的单元格。

窄屏 ​

宽度小于 520px 时表格自动收起，只显示时间轴。任务名显示在任务条上或旁边；任务条不在视野里的行，任务名固定显示在时间轴左侧。也可以用 :table="false" 主动隐藏表格。

语言 ​

甘特图里的文字（表头、菜单、提示、读屏播报等）跟随 ConfigProvider 的语言，内置简体中文、繁体中文和英文。

messages 可以改写其中几条，只需写要改的部分。ganttLocales 是内置的三份文案，按语言名称索引；useGanttMessages(override?) 返回当前语言的文案，在扩展或插槽里需要相同的文字时使用。

API ​

Gantt Props ​

Gantt Events ​

Gantt Slots ​

Gantt Exposes ​