在展示多层级的层次数据集或在空间有限的情况下显示大型视觉分解时，树状图提供了一种高效的视觉解决方案。通过将嵌套的矩形排列在一个统一的边界区域内，树状图通过矩形面积大小来编码数值，使用户能够评估复杂嵌套结构中的相对比例——例如磁盘空间使用情况、产品目录收入，或父部门与子部门之间的预算分配。
树状图的工作原理
在 Apache ECharts 中，树状图使用type: 'treemap'。该系列期望一个树状结构的data数组，其中每个对象包含一个name，一个定量的value，以及一个可选的children数组，用于更深层次的嵌套层级。
1. 基础设置
要构建一个基本的树状图，请定义一个具有嵌套children的层次数据数组，并在系列配置中设置type: 'treemap'在系列配置中：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
formatter: '{b}: ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: '电子产品',
value: 400,
children: [
{ name: '手机', value: 240 },
{ name: '笔记本电脑', value: 160 }
]
},
{
name: '服装',
value: 300,
children: [
{ name: '衬衫', value: 180 },
{ name: '鞋子', value: 120 }
]
}
]
}
]
};
高级结构技术
树状图可以配置多层级样式规则、颜色渐变映射以及用于深层数据树的交互式下钻控制。
1. 多级面包屑下钻
启用顶部图例和面包屑导航，以便用户识别顶级类别并平滑地导航到嵌套的子目录：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} GB'
},
legend: {
top: '5%',
left: 'center',
data: ['系统盘 (C:)', '数据盘 (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // 每次点击显示一层，实现下钻
breadcrumb: {
show: true,
left: 'center',
bottom: '2%'
},
levels: [
{
itemStyle: {
borderColor: '#555',
borderWidth: 2,
gapWidth: 2
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderWidth: 1,
gapWidth: 1,
borderColorSaturation: 0.7
}
}
],
data: [
{
name: '系统盘 (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: '程序文件', value: 230 },
{ name: '用户', value: 150 }
]
},
{
name: '数据盘 (D:)',
value: 800,
children: [
{ name: '媒体', value: 450 },
{ name: '备份', value: 250 },
{ name: '项目', value: 100 }
]
}
]
}
]
};
布局与样式的精细调整
应用间距宽度、清晰的边框和分明的层级颜色，可使嵌套的矩形保持有序且视觉上易于阅读。
1. 自定义单元格边框与标签对齐
调整 gapWidth 和 label配置以保持父容器与子段之间的清晰边界：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
type: 'treemap',
roam: false, // 禁用手动缩放/平移
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: '北美洲',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: '欧洲',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: '亚太地区',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: '拉丁美洲',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
战略最佳实践
- 使用
gapWidth以增强嵌套可见性： 在嵌套矩形之间添加较小的gapWidth（例如 2px 到 4px）可在嵌套矩形之间创建清晰的间距，从而明确区分父类别与子项。 - 对于深层嵌套结构，请启用面包屑： 当显示 3 层或更多嵌套层级时，启用 `breadcrumb: { show: true }`，以便用户能轻松追踪当前位置并向上导航。
- 保持标签简洁： 文本容易溢出到小型叶矩形中。可将简短名称与提示工具结合使用，或使用
leafDepth在放大之前隐藏微小的子矩形。