在展示具有明确父子关系的结构化数据时——例如组织架构图、文件系统目录、决策树或分类体系——树状图提供了一个直观的视觉框架。通过将数据节点沿分支路径排列，树状图使用户能够探索嵌套的层级结构，并从中心根节点向下追踪到各个子分支的连接关系。
树状图的工作原理
在 Apache ECharts 中，树状图使用type: 'tree'。与具有明确 X 轴和 Y 轴的标准图表不同，树状图会从包含一个name和一个可选的children数组的嵌套 JavaScript 对象中自动构建布局位置。
1. 基础设置
要构建一个基本的树状图，需定义您的嵌套数据结构，并在系列数组中设置type: 'tree'在系列数组中：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: '首席执行官',
children: [
{
name: '产品副总裁',
children: [
{ name: '产品经理' },
{ name: '用户体验设计师' }
]
},
{
name: '工程副总裁',
children: [
{ name: '技术负责人' },
{ name: 'DevOps 工程师' }
]
}
]
}],
top: '5%',
left: '15%',
bottom: '5%',
right: '20%',
symbolSize: 10,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDurationUpdate: 750
}
]
};
高级布局方向
通过改变布局方向或切换到径向显示，树状图可以适应不同的空间限制和设计需求。
1. 径向树状布局
设置layout: 'radial'以将分支从中心点向外投射，非常适合具有大量叶节点的宽广层级结构：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: '根节点',
children: [
{
name: '分支 A',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: '分支 B',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: '分支 C',
children: [
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' }
]
}
]
}],
top: '18%',
bottom: '14%',
right: '18%',
left: '18%',
symbolSize: 12,
initialTreeDepth: 2,
animationDurationUpdate: 750
}
]
};
微调布局和样式
自定义节点符号、线条曲线和层级特定格式有助于突出大型图表中的关键结构层级。
1. 曲线连接线和基于层级的节点样式
使用 lineStyle.curveness来平滑连接线，并定义 levels数组配置，根据节点在层级中的深度来设置样式：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // 从上到下的方向
data: [{
name: '项目根目录',
children: [
{
name: '前端',
children: [
{ name: 'React' },
{ name: 'Vue' }
]
},
{
name: '后端',
children: [
{ name: 'Node.js' },
{ name: 'Python' }
]
}
]
}],
top: '10%',
left: '10%',
bottom: '10%',
right: '10%',
symbol: 'emptyCircle',
symbolSize: 14,
edgeShape: 'polyline', // 使用清晰的矩形连接线，而非曲线
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
战略最佳实践
- 控制初始折叠深度： 设置
initialTreeDepth（例如，1或2）在大型数据集上使用，以在初始加载时保持图表整洁，同时允许用户点击节点展开详细信息。 - 选择合适的布局方向：对于具有长标签文本的深层嵌套结构，使用水平（`LR`）或径向（`radial`）布局；对于浅层、宽广的组织结构，使用垂直（`TB`）布局。
- 区分叶节点： 使用
leaves属性，以区别于父级容器节点来设置末端节点的样式，使用户能够轻松区分分支与终点。