在展示多层级层次结构时，内层环代表高层级类别，外层环分解子类别，此时旭日图提供了一种简洁的径向替代方案，取代树状图。通过将嵌套类别排列成同心环，旭日图使用户能够探索多层级结构比例、父子关系以及分布路径在紧凑的空间内——例如全球产品类别、组织架构图或多步骤用户流失路径。
旭日图的机制
在 Apache ECharts 中，旭日图使用type: 'sunburst'。与树状图类似，该系列期望在data数组中包含嵌套的树状结构，父对象包含children数组。引擎将根节点或最顶层类别渲染在最内层圆中，并将子类别向外扩展到同心环层上。
1. 基础设置
要构建一个基本的旭日图，需提供一个嵌套树状数据集，并在系列对象中设置type: 'sunburst'在你的系列对象中：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: '祖辈',
children: [
{
name: '父辈 1',
value: 15,
children: [
{ name: '子辈 1', value: 5 },
{ name: '子辈 2', value: 10 }
]
},
{
name: '父辈 2',
value: 10,
children: [
{ name: '子辈 3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
高级结构技术
旭日图可以通过环级样式规则、颜色继承以及点击放大交互式下钻进行自定义。
1. 针对层级的环形自定义与下钻
使用levels数组，为从中心向外的每个同心环层定义不同的半径、标签行为和项目样式：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '2%',
left: 'center',
data: ['电子产品', '家居与生活']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radius: ['10%', '85%'],
nodeClick: 'rootToNode', // 点击节点时启用下钻
levels: [
{},
{
// 内环（顶级分类）
r0: '15%',
r: '40%',
label: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// 中环（子分类）
r0: '40%',
r: '65%',
label: { rotate: 'tangential', fontSize: 11 }
},
{
// 外环（叶子产品）
r0: '65%',
r: '85%',
label: { rotate: 'radial', fontSize: 10 }
}
],
data: [
{
name: '电子产品',
children: [
{
name: '音频',
children: [
{ name: '耳机', value: 40 },
{ name: '扬声器', value: 25 }
]
},
{
name: '计算机',
children: [
{ name: '笔记本电脑', value: 80 },
{ name: '台式机', value: 35 }
]
}
]
},
{
name: '家居与生活',
children: [
{
name: '家具',
children: [
{ name: '椅子', value: 50 },
{ name: '桌子', value: 30 }
]
},
{
name: '装饰',
children: [
{ name: '照明', value: 45 },
{ name: '地毯', value: 20 }
]
}
]
}
]
}
]
};
微调布局与标签对齐
控制标签旋转模式（径向 与 切向）可确保当扇区向外围收缩时，文本仍保持可读性。
1. 自定义扇区间隔与径向标签
应用项目边框并设置 rotate: 'radial'以使文本沿扇区半径整齐对齐：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
type: 'sunburst',
radius: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
rotate: 'radial',
align: 'right'
},
data: [
{
name: '软件',
itemStyle: { color: '#5470c6' },
children: [
{ name: 'SaaS', value: 120 },
{ name: '本地部署', value: 60 }
]
},
{
name: '硬件',
itemStyle: { color: '#91cc75' },
children: [
{ name: '服务器', value: 90 },
{ name: '网络设备', value: 110 }
]
},
{
name: '服务',
itemStyle: { color: '#fac858' },
children: [
{ name: '咨询', value: 70 },
{ name: '支持', value: 50 }
]
}
]
}
]
};
战略最佳实践
- 根据环层深度匹配标签旋转： 对于较宽的内环，使用水平（
rotate: 0）或切向标签；对于较窄的外环扇区，则切换为径向标签。 - 启用
nodeClick: 'rootToNode':交互式缩放功能允许用户点击任意父弧以直接聚焦其子树，而不会造成视觉混乱。 - 使用颜色继承：允许子扇区从父节点继承基础色调，并通过调整明度/饱和度，以在各层级间保持清晰的视觉分组。