當呈現多層級層次結構時，內圈代表高階類別，外圈則分解為子類別，此時太陽射線圖提供了一種乾淨的徑向替代方案，取代樹狀圖。透過將嵌套類別排列成同心環，太陽射線圖讓使用者能夠探索多層級結構比例、父節點與子節點關係，以及分佈路徑於緊湊空間中——例如全球產品類別、組織架構圖，或多重步驟的使用者流失路徑。
太陽射線圖的運作原理
在 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: '徑向'
}
}
]
};
進階結構技術
太陽射線圖可透過環層級樣式規則、色彩繼承，以及點擊放大互動式下探功能進行自訂。
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':互動式縮放功能允許使用者點擊任何父弧以直接聚焦於其子樹，避免視覺混亂。 - 使用色彩繼承：允許子扇區從其父節點繼承基礎色調，並透過調整明暗度/飽和度，以維持各層級之間清晰的視覺分組。