树图
层级结构。建议英文标识：TreeChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.tree-chart |
| 名称 | 树图 |
| 二级分类 | 图表（charts） |
| 用途 | 层级结构 |
| 描述 | 建议英文标识：TreeChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="tree-chart">；正交布局，根节点定位后逐层展开，曲线/折线连边；叶子节点取色板次色，中间节点取首色；节点可点击触发 onSelect。
DSL 结构
{
"type": "TreeChart",
"props": {
"data": [
{
"name": "总经理",
"children": [
{
"name": "技术部",
"children": [
{
"name": "前端组"
},
{
"name": "后端组"
}
]
},
{
"name": "市场部"
}
]
}
],
"orient": "vertical",
"edgeShape": "curve",
"initialTreeDepth": -1
}
}何时用
何时使用
- 层级结构的节点关系展示（组织架构、分类树、依赖树、文件目录）。
- 节点-连线形态（对齐 echarts 2.2.4 tree 系列）的根到叶展开表达。
何时不用
- 层级构成占比：用 PieChart / DonutChart（面积表达构成）。
- 流向关系：用 SankeyChart。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 垂直展开 | orient: 'vertical'（TB，根在上） | 组织架构、向下展开的层级 |
| 水平展开 | orient: 'horizontal'（LR，根在左） | 向左对齐的目录 / 依赖树 |
| 折线连边 | edgeShape: 'polyline' | 规整的直角连线诉求 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 层级数据：通常为单根 [{ name, children: [...] }] |
orient | `'vertical' | 'horizontal'` | 'vertical' |
edgeShape | `'curve' | 'polyline'` | 'curve' |
initialTreeDepth | number | 2 | 初始展开层级深度；-1 全部展开 |
title / height / onSelect | — | — | 标题 / 高度 / 点击节点 |
使用规范
- 数据为单根层级结构（name + children），层级 ≤ 5 保证可读。
- 全展开（initialTreeDepth: -1）仅适合小树；大树用默认深度 + 节点点击展开。
- 水平方向适合层级深、节点名长的数据。
正例
- ✓ 组织架构：总经理 → 部门 → 小组三级，垂直曲线连边。
反例
- ✕ 用树图表达占比（面积无语义，应使用饼图/矩形构成图）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。