Ketika menyajikan dataset hierarkis multi-level atau menampilkan pemecahan visual besar di mana ruang sangat terbatas, makaDiagram Peta Pohon memberikan solusi visual yang efisien. Dengan menata persegi panjang bersarang ke dalam area batas yang menyatu, peta pohon mengkodekan nilai numerik melalui ukuran area persegi panjang, memungkinkan pengguna untuk mengevaluasiproporsi relatif di seluruh struktur bersarang yang kompleks—seperti penggunaan ruang disk, pendapatan katalog produk, atau alokasi anggaran di antara departemen induk dan anak.
Mekanisme Diagram Peta Pohon
Di Apache ECharts, peta pohon menggunakantype: 'treemap'. Seri mengharapkan array berstruktur pohondata yang setiap objeknya berisinama, nilai kuantitatifnilai, dan array opsionalanak untuk tingkat bersarang yang lebih dalam.
1. Pengaturan Dasar
Untuk membuat peta pohon dasar, definisikan array data hierarkis dengananak dan aturtype: 'treemap'di dalam konfigurasi seri Anda:
option = {
tooltip: {
formatter: '{b}: ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: 'Elektronik',
value: 400,
children: [
{ name: 'Ponsel', value: 240 },
{ name: 'Laptop', value: 160 }
]
},
{
name: 'Pakaian',
value: 300,
children: [
{ name: 'Kemeja', value: 180 },
{ name: 'Sepatu', value: 120 }
]
}
]
}
]
};
Teknik Struktural Lanjutan
Peta pohon dapat dikonfigurasi dengan aturan gaya multi-level, pemetaan gradien warna, dan kontrol drill-down interaktif untuk pohon data yang dalam.
1. Penurunan Breadcrumb Multi-Tingkat
Aktifkan legenda atas dan navigasi breadcrumb agar pengguna dapat mengidentifikasi kategori tingkat atas dan menavigasi dengan lancar ke direktori bawah yang bersarang:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} GB'
},
legend: {
top: '5%',
left: 'center',
data: ['Drive Sistem (C:)', 'Drive Data (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // Menampilkan satu tingkat pada satu waktu dengan klik untuk menurun
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: 'Drive Sistem (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: 'Program Files', value: 230 },
{ name: 'Users', value: 150 }
]
},
{
name: 'Drive Data (D:)',
value: 800,
children: [
{ name: 'Media', value: 450 },
{ name: 'Backups', value: 250 },
{ name: 'Projects', value: 100 }
]
}
]
}
]
};
Penyesuaian Halus Tata Letak dan Gaya
Menerapkan lebar jarak, batas bersih, dan warna tingkat yang berbeda membantu menjaga persegi panjang bersarang tetap teratur dan mudah dibaca secara visual.
1. Batas Sel Kustom dan Penyelarasan Label
Sesuaikan lebarJarak dan labelkonfigurasi untuk mempertahankan batas yang jelas antara kontainer induk dan segmen anak:
option = {
series: [
{
type: 'treemap',
roam: false, // Menonaktifkan zooming/panning manual
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: 'Amerika Utara',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: 'Eropa',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: 'Asia Pasifik',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: 'Amerika Latin',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
Praktik Terbaik Strategis
- Gunakan
lebarJarakuntuk Visibilitas Penyusunan Bersarang: MenambahkanlebarJarak(misalnya, 2px hingga 4px) antara persegi panjang bersarang menciptakan ruang yang jelas antara kategori induk dan sub-item anak. - Aktifkan Breadcrumb untuk Hierarki yang Dalam: Saat menampilkan 3 atau lebih tingkat bersarang, aktifkan `breadcrumb: { show: true }` agar pengguna dapat dengan mudah melacak lokasi mereka dan kembali ke atas.
- Jaga Label Tetap Singkat: Teks dapat dengan mudah meluap ke persegi panjang daun kecil. Gabungkan nama pendek dengan tooltip atau gunakan
leafDepthuntuk menyembunyikan persegi panjang kecil hingga diperbesar.