logo

Ant Design Charts

  • 教程
  • 图表组件
  • 图表示例
  • 选项
  • 所有产品antv logo arrow
  • 2.6.0-beta.0
  • 📈 图表分类
  • 统计图表
    • 图表概览
    • Line 折线图
    • Column 柱状图
    • Bar 条形图
    • Area 面积图
    • Pie 饼图
    • DualAxes 双轴图
    • Scatter 散点图
    • WordCloud 词云图
    • Funnel 漏斗图
    • Heatmap 热力图
    • Histogram 直方图
    • Liquid 水波图
    • BidirectionalBar 对称条形图
    • Box 箱线图
    • Bullet 子弹图
    • CirclePacking 捆绑图
    • Gauge 仪表盘
    • Radar 雷达图
    • Rose 玫瑰图
    • Sankey 桑基图
    • Stock 股票图
    • Sunburst 旭日图
    • Treemap 矩阵树图
    • Venn 韦恩图
    • Tiny 迷你图
    • Violin 小提琴图
    • Waterfall 瀑布图
    • RadialBar 玉珏图
  • 关系图组件
    • 总览
    • MindMap 思维导图
    • Fishbone 鱼骨图
    • IndentedTree 缩进树图
    • Dendrogram 生态树图
    • OrganizationChart 组织结构图
    • FlowGraph 流程图
    • FlowDirectionGraph 流向图
    • NetworkGraph 网络图
    • FAQ

Tree Data Zh

下一篇
📈 图表分类

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

Data

支持两种数据格式:

  1. (👍 推荐) 树图数据

类型定义:

type TreeData = {
id: string;
children?: TreeData[];
[key: string]: unknown;
};

例如:

const data = {
id: 'root',
children: [
{
id: 'Child 1',
value: 10,
children: [
{ id: 'Sub 1-1', value: 5 },
{ id: 'Sub 1-2', value: 5 },
],
},
{
id: 'Child 2',
value: 20,
children: [
{ id: 'Sub 2-1', value: 10 },
{ id: 'Sub 2-2', value: 10 },
],
},
],
};
  1. 图数据。若开启“展开-收起”交互,需确保数据中包含 children 字段。
const graphData = {
nodes: [
{ id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
{ id: '2', data: { label: 'Node 2' }, children: ['4'] },
{ id: '3', data: { label: 'Node 3' } },
{ id: '4', data: { label: 'Node 4' } },
],
edges: [
{ source: '1', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' },
],
};