Ketika menyajikan hierarki multi-tier di mana cincin bagian dalam mewakili kategori tingkat tinggi dan cincin luar memecah kategori bawah, makaDiagram Matahari menawarkan alternatif radial yang bersih dibandingkan peta pohon. Dengan mengatur kategori bersarang ke dalam cincin konsentris, diagram matahari memungkinkan pengguna untuk mengeksplorasiproporsi struktural multi-level, hubungan induk-anak, dan jalur distribusi dalam ruang yang ringkas—seperti kategori produk global, bagan organisasi, atau jalur drop-off pengguna multi-langkah.
Mekanisme Diagram Matahari
Di Apache ECharts, diagram matahari menggunakantype: 'sunburst'. Mirip dengan peta pohon, seri mengharapkan struktur pohon bersarang dalam arraydata array di mana objek induk berisichildren array. Mesin merender simpul akar atau kategori tingkat atas dalam lingkaran paling dalam dan memperluas kategori bawah ke luar melintasi lapisan cincin konsentris.
1. Pengaturan Dasar
Untuk membuat diagram matahari dasar, sediakan dataset pohon bersarang dan aturtype: 'sunburst'di dalam objek seri Anda:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: 'Kakek',
children: [
{
name: 'Orang Tua 1',
value: 15,
children: [
{ name: 'Anak 1', value: 5 },
{ name: 'Anak 2', value: 10 }
]
},
{
name: 'Orang Tua 2',
value: 10,
children: [
{ name: 'Anak 3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
Teknik Struktural Lanjutan
Diagram matahari dapat disesuaikan dengan aturan penataan tingkat cincin, pewarisan warna, dan drill-down interaktif klik-zoom.
1. Penyesuaian Cincin Khusus Tingkat dan Drill-Down
Gunakanlevels array untuk menentukan jari-jari yang berbeda, perilaku label, dan gaya item untuk setiap lapisan cincin konsentris dari pusat ke luar:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '2%',
left: 'center',
data: ['Elektronik', 'Rumah & Kehidupan']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radius: ['10%', '85%'],
nodeClick: 'rootToNode', // Mengaktifkan drill-down saat mengklik node
levels: [
{},
{
// Cincin dalam (Kategori tingkat atas)
r0: '15%',
r: '40%',
label: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// Cincin tengah (Sub-kategori)
r0: '40%',
r: '65%',
label: { rotate: 'tangensial', fontSize: 11 }
},
{
// Cincin luar (Produk daun)
r0: '65%',
r: '85%',
label: { rotate: 'radial', fontSize: 10 }
}
],
data: [
{
name: 'Elektronik',
children: [
{
name: 'Audio',
children: [
{ name: 'Headphone', value: 40 },
{ name: 'Speaker', value: 25 }
]
},
{
name: 'Komputer',
children: [
{ name: 'Laptop', value: 80 },
{ name: 'Desktop', value: 35 }
]
}
]
},
{
name: 'Rumah & Kehidupan',
children: [
{
name: 'Furniture',
children: [
{ name: 'Kursi', value: 50 },
{ name: 'Meja', value: 30 }
]
},
{
name: 'Hiasan',
children: [
{ name: 'Pencahayaan', value: 45 },
{ name: 'Karpet', value: 20 }
]
}
]
}
]
}
]
};
Penyesuaian Halus Tata Letak dan Penyelarasan Label
Mengendalikan mode rotasi label (radial vs tangensial) menjaga teks tetap mudah dibaca saat sektor menyempit menuju cincin luar.
1. Pemisahan Sektor Kustom dan Label Radial
Terapkan batas item dan atur rotate: 'radial'untuk menyelaraskan teks sepanjang radius sektor dengan rapi:
option = {
series: [
{
type: 'sunburst',
radius: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
rotate: 'radial',
align: 'right'
},
data: [
{
name: 'Perangkat Lunak',
itemStyle: { color: '#5470c6' },
children: [
{ name: 'SaaS', value: 120 },
{ name: 'On-Prem', value: 60 }
]
},
{
name: 'Perangkat Keras',
itemStyle: { color: '#91cc75' },
children: [
{ name: 'Server', value: 90 },
{ name: 'Jaringan', value: 110 }
]
},
{
name: 'Layanan',
itemStyle: { color: '#fac858' },
children: [
{ name: 'Konsultasi', value: 70 },
{ name: 'Dukungan', value: 50 }
]
}
]
}
]
};
Praktik Terbaik Strategis
- Sesuaikan Rotasi Label dengan Kedalaman Cincin: Gunakan horizontal (
rotate: 0) atau label tangensial untuk cincin dalam yang lebar, dan beralih keradiallabel untuk sektor luar yang sempit. - Aktifkan
nodeClick: 'rootToNode':Zoom interaktif memungkinkan pengguna mengklik setiap busur induk untuk langsung fokus pada sub-pohonnya tanpa kekacauan visual. - Gunakan Pewarisan Warna:Izinkan sektor anak untuk mewarisi nuansa dasar dari node induknya dengan perbedaan kecerahan/kejenuhan untuk menjaga pengelompokan visual yang jelas di seluruh tingkatan.