Ketika menyajikan alokasi kategori relatif, Diagram Donatmenawarkan alternatif modern dengan kontras tinggi dibandingkan diagram pie padat tradisional. Dengan menghilangkan inti pusat, diagram donat mengalihkan fokus visual dari ukuran area yang terisi ke panjang busur sepanjang cincin luar. Pusat yang kosong ini menciptakan ruang visual utama untuk metrik kinerja utama, total ringkasan, atau indikator status—membuatnya menjadi komponen standar untuk dashboard status eksekutif dan ringkasan keuangan.
Mekanisme Diagram Donat
Dalam Apache ECharts, diagram donat dikonfigurasi menggunakan 'pie'tipe seri yang dipasangkan dengan array dua elemen radiusarray: ['innerRadius', 'outerRadius']. Nilai pertama menentukan pembukaan pusat yang kosong, sedangkan nilai kedua mengendalikan batas luar.
1. Pengaturan Dasar
Untuk membuat diagram donat standar, deklarasikan seri dengan type: 'pie', atur radius: ['50%', '70%'], dan lewatkan objek data Anda dengan name dan valueproperti:
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Alokasi Anggaran',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '55%'],
avoidLabelOverlap: true,
label: {
show: false
},
data: [
{ value: 1048, name: 'Teknik' },
{ value: 735, name: 'Pemasaran' },
{ value: 580, name: 'Operasi' },
{ value: 484, name: 'Penjualan' },
{ value: 300, name: 'Dukungan' }
]
}
]
};
Teknik Struktural Lanjutan
Diagram donat unggul ketika dipasangkan dengan statistik pusat atau gaya visual melengkung untuk menciptakan komponen antarmuka pengguna yang rapi.
1. Overlay Statistik Label Pusat
Gunakan elemen grafis atau komponen judul pusat untuk menampilkan total keseluruhan atau KPI utama langsung di dalam cincin donat:
option = {
judul: {
teks: '$3,147',
subteks: 'Total yang Dikeluarkan',
kiri: 'center',
atas: '42%',
gayaTeks: {
ukuranFont: 28,
tebal: 'bold',
warna: '#333'
},
gayaSubteks: {
ukuranFont: 14,
warna: '#666'
}
},
tooltip: {
pemicu: 'item'
},
seri: [
{
nama: 'Pengeluaran',
jenis: 'pie',
radius: ['60%', '80%'],
center: ['50%', '50%'],
hindariTumpangTindihLabel: false,
label: {
tampilkan: false
},
data: [
{ nilai: 1048, nama: 'Perangkat Keras' },
{ nilai: 735, nama: 'Langganan SaaS' },
{ nilai: 580, nama: 'Perlengkapan Kantor' },
{ nilai: 484, nama: 'Perjalanan' }
]
}
]
};
Penyesuaian Layout dan Gaya Segment
Menambahkan radius sudut halus dan jarak margin segment yang berbeda memberikan tampilan ramping dan modern pada grafik donat.
1. Ujung Bulat dan Jarak Segment
Gunakan itemStyle.borderRadiusbersamaan dengan batas putih yang jelas untuk memberikan setiap segment busur tampilan lembut seperti pil:
option = {
seri: [
{
nama: 'Penggunaan Penyimpanan',
jenis: 'pie',
radius: ['45%', '70%'],
itemStyle: {
borderRadius: 10,
borderColor: '#ffffff',
borderWidth: 4
},
label: {
tampilkan: true,
formatter: '{b}: {d}%'
},
data: [
{ nilai: 40, nama: 'Dokumen' },
{ nilai: 25, nama: 'File Media' },
{ nilai: 20, nama: 'Data Sistem' },
{ nilai: 15, nama: 'Ruangan Kosong' }
]
}
]
};
Praktik Terbaik Strategis
- Optimalkan Rasio Jari-Jari Dalam terhadap Luar:Pertahankan jari-jari dalam antara 50% hingga 70% dari jari-jari luar agar segment cukup tebal untuk kemudahan hover, sambil mempertahankan ruang yang cukup di tengah.
- Gunakan Ruang Tengah Secara Sengaja:Gunakan area kosong di tengah untuk menampilkan total keseluruhan atau metrik slice yang dipilih, alih-alih memenuhi keliling grafik dengan kotak teks tambahan.
- Batasi Jumlah Slice:Batasi cincin menjadi 5 atau 6 segment utama. Jika Anda memiliki banyak kategori kecil, gabungkan menjadi kategori ‘Lainnya’ untuk mencegah busur yang terlalu tipis dan tidak terbaca.