當呈現多層級的層級資料集，或在空間有限的情況下顯示大型視覺分解時，樹狀圖提供了一種高效的視覺解決方案。透過將嵌套的矩形排列於統一的邊界區域中，樹狀圖透過矩形面積大小來編碼數值，使使用者能夠評估複雜嵌套結構中的相對比例——例如磁碟空間使用情況、產品目錄收益，或父部門與子部門之間的預算分配。
樹狀圖的運作原理
在 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. 自訂單元格邊框與標籤對齊
調整 間距寬度 和 標籤設定以維持父容器與子區段之間的清晰界線：
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' }
}
]
}
]
};
戰略性最佳實務
- 使用
間距寬度以提升嵌套可見性： 在嵌套矩形之間加入微小的間距寬度（例如 2px 到 4px）可在嵌套矩形之間創造清晰的間距，使父類別與子項目之間的區分更明確。 - 針對深度層級結構，啟用面包屑： 當顯示 3 層或更多嵌套層級時，啟用 `breadcrumb: { show: true }`，讓使用者能輕鬆追蹤自身位置並向上導航。
- 保持標籤簡潔： 文字容易溢出至小型葉子矩形中。可結合簡短名稱與工具提示，或使用
葉子深度在縮放之前隱藏微小的子矩形。