當呈現具有明確父子關係的結構化資料時——例如組織架構圖、檔案系統目錄、決策樹或分類學分類——樹狀圖提供直觀的視覺框架。透過將資料節點沿分支路徑排列，樹狀圖讓使用者能夠探索巢狀層級結構，並從中心根節點一路追蹤至子分支的連結。
樹狀圖的運作原理
在 Apache ECharts 中，樹狀圖使用type: 'tree'。與具有明確 X 軸和 Y 軸的標準圖表不同，樹狀圖會自動從包含name和一個可選的children陣列的巢狀 JavaScript 物件中建構佈局位置。
1. 基本設定
要建立基本的樹狀圖，請定義您的巢狀資料結構並設定type: 'tree'於 series 陣列內：
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屬性來以不同方式設定末端節點的樣式，使其與父容器節點區分開來，讓使用者能輕易分辨分支與終點。