Ketika menyajikan data terstruktur dengan hubungan induk-anak yang jelas—seperti bagan organisasi, direktori sistem file, pohon keputusan, atau klasifikasi taksonomi—makaDiagram Pohonmemberikan kerangka visual yang intuitif. Dengan mengatur node data sepanjang jalur bercabang, diagram pohon memungkinkan pengguna menelusuri hierarki bersarang dan melacak koneksi dari node akar pusat turun melalui cabang-cabang bawah.
Mekanisme Diagram Pohon
Dalam Apache ECharts, diagram pohon menggunakantype: 'tree'. Berbeda dengan grafik standar yang memiliki sumbu X dan Y yang jelas, diagram pohon membuat posisi tata letak secara otomatis dari objek JavaScript bersarang yang berisinama dan sebuah array opsionalanakarray.
1. Pengaturan Dasar
Untuk membuat diagram pohon dasar, tentukan struktur data bersarang Anda dan aturtype: 'tree'di dalam array series:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'CEO',
children: [
{
name: 'VP Produk',
children: [
{ name: 'Manajer Produk' },
{ name: 'Desainer UX' }
]
},
{
name: 'VP Teknik',
children: [
{ name: 'Kepala Teknologi' },
{ name: 'Insinyur 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
}
]
};
Orientasi Tata Letak Lanjutan
Diagram pohon dapat disesuaikan dengan berbagai batasan ruang dan kebutuhan desain dengan mengubah arah tata letak atau beralih ke tampilan radial.
1. Tata Letak Pohon Radial
Aturlayout: 'radial'untuk memproyeksikan cabang keluar dari titik pusat, sangat ideal untuk hierarki lebar dengan banyak node daun:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: 'Akar',
children: [
{
name: 'Cabang A',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: 'Cabang B',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: 'Cabang C',
children: [
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' }
]
}
]
}],
top: '18%',
bottom: '14%',
right: '18%',
left: '18%',
symbolSize: 12,
initialTreeDepth: 2,
animationDurationUpdate: 750
}
]
};
Menyesuaikan Tata Letak dan Gaya
Menyesuaikan simbol node, lengkungan garis, dan format khusus tingkat membantu menonjolkan tingkatan struktur utama di seluruh diagram besar.
1. Konektor Melengkung dan Penyempurnaan Gaya Node Berdasarkan Tingkat
Gunakan lineStyle.curveness untuk meratakan garis koneksi, dan tentukan levelskonfigurasi array untuk menata gaya node berdasarkan kedalaman mereka dalam hierarki:
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // Orientasi atas ke bawah
data: [{
name: 'Akar Proyek',
children: [
{
name: 'Frontend',
children: [
{ name: 'React' },
{ name: 'Vue' }
]
},
{
name: 'Backend',
children: [
{ name: 'Node.js' },
{ name: 'Python' }
]
}
]
}],
top: '10%',
left: '10%',
bottom: '10%',
right: '10%',
symbol: 'emptyCircle',
symbolSize: 14,
edgeShape: 'polyline', // Menggunakan koneksi persegi panjang tajam alih-alih lengkungan
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
Praktik Terbaik Strategis
- Kontrol Kedalaman Lipatan Awal: Atur
initialTreeDepth(misalnya,1atau2) pada dataset besar untuk menjaga tampilan grafik tetap bersih saat muat awal, sambil memungkinkan pengguna mengklik node untuk memperluas detail. - Pilih Orientasi yang Tepat: Gunakan tata letak horizontal (`LR`) atau radial (`radial`) untuk struktur bersarang yang dalam dengan teks label panjang, dan tata letak vertikal (`TB`) untuk struktur organisasi yang dangkal dan lebar.
- Bedakan Node Daun: Gunakan
leavesproperti untuk menata gaya node akhir secara berbeda dari node container induk, sehingga pengguna dapat dengan mudah membedakan cabang dari titik akhir.