---
tagName: ai-portal.gantt-chart
displayName: WrappedAiPortalGanttChart
description: 甘特图组件，以树状层级结构展示任务节点及其时间条，支持折叠展开和全屏操作。
category: chart
source: "@next-bricks/ai-portal"
---

# ai-portal.gantt-chart

> 甘特图组件，以树状层级结构展示任务节点及其时间条，支持折叠展开和全屏操作。

## Props

| 属性       | 类型          | 必填 | 默认值 | 说明                                                     |
| ---------- | ------------- | ---- | ------ | -------------------------------------------------------- |
| chartTitle | `string`      | 否   | -      | 甘特图标题                                               |
| nodes      | `GanttNode[]` | 否   | -      | 任务节点树数据，每个节点包含名称、状态、时间范围及子节点 |

## Events

| 事件             | detail                                                                                                              | 说明                 |
| ---------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------- |
| node.click       | `GanttNode` — { name: 节点名称, state: 节点状态, startTime: 开始时间戳, endTime: 结束时间戳, children: 子节点列表 } | 点击甘特图节点时触发 |
| fullscreen.click | `void`                                                                                                              | 点击全屏按钮时触发   |

## Examples

### Basic

展示基础甘特图，包含父子任务节点和时间条。

```yaml preview
brick: ai-portal.gantt-chart
properties:
  chartTitle: 项目执行计划
  nodes:
    - name: 需求分析
      state: completed
      startTime: 1700000000000
      endTime: 1700200000000
      children:
        - name: 业务需求梳理
          state: completed
          startTime: 1700000000000
          endTime: 1700100000000
        - name: 技术方案评审
          state: completed
          startTime: 1700100000000
          endTime: 1700200000000
    - name: 开发阶段
      state: working
      startTime: 1700200000000
      endTime: 1700600000000
      children:
        - name: 后端开发
          state: working
          startTime: 1700200000000
          endTime: 1700500000000
        - name: 前端开发
          state: ready
          startTime: 1700300000000
          endTime: 1700600000000
    - name: 测试上线
      state: ready
      startTime: 1700600000000
      endTime: 1700800000000
events:
  node.click:
    action: "console.log"
  fullscreen.click:
    action: "console.log"
```

### Simple Flat Nodes

展示无子节点的平铺任务甘特图。

```yaml preview
brick: ai-portal.gantt-chart
properties:
  chartTitle: 迭代任务
  nodes:
    - name: 任务 A
      state: completed
      startTime: 1700000000000
      endTime: 1700150000000
    - name: 任务 B
      state: working
      startTime: 1700150000000
      endTime: 1700400000000
    - name: 任务 C
      state: ready
      startTime: 1700400000000
      endTime: 1700600000000
events:
  node.click:
    action: "console.log"
  fullscreen.click:
    action: "console.log"
```