Ketika menyajikan proporsi relatif atau bagian persentase dari satu total statis, Diagram Lingkaran adalah pilihan yang akrab dan intuitif. Dengan membagi lingkaran menjadi potongan-potongan proporsional, diagram lingkaran memungkinkan penonton untuk dengan cepat memahami bagaimana komponen-komponen individu berkontribusi terhadap satu kesatuan utuh, seperti distribusi pangsa pasar, pembagian preferensi perangkat, atau alokasi kategori pengeluaran.
Mekanisme Diagram Lingkaran
Berbeda dengan grafik Kartesius yang menggunakan sumbu horizontal dan vertikal, diagram lingkaran memetakan data kategorikal langsung ke sudut radial pada sistem koordinat polar. Dalam Apache ECharts, diagram lingkaran dibuat dengan mengatur seri tipe menjadi 'pie' dan menyediakan array objek di mana setiap entri berisi nilai numerik nilai dan deskriptif nama.
1. Pengaturan Dasar
Untuk membuat diagram lingkaran dasar, tentukan satu seri dengan tipe: 'pie' dan lewatkan dataset terstruktur Anda di dalam array data array:
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Sumber Akses',
type: 'pie',
radius: '60%',
data: [
{ value: 1048, name: 'Mesin Pencari' },
{ value: 735, name: 'Langsung' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Iklan Gabungan' },
{ value: 300, name: 'Iklan Video' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Teknik Struktural Lanjutan
Diagram lingkaran dapat disesuaikan menjadi tata letak donat berbentuk cincin atau diberi gaya dengan jari-jari khusus untuk menekankan segmen data utama.
1. Variasi Diagram Donat
Menetapkan jari-jari properti sebagai array dua nilai (contoh: ['40%', '70%']) membuat bagian tengah kosong untuk membuat grafik donat yang bersih. Ini meninggalkan ruang di tengah untuk label ringkasan khusus:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Jenis Perangkat',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: 'Desktop' },
{ value: 735, name: 'Mobile' },
{ value: 580, name: 'Tablet' },
{ value: 484, name: 'Lainnya' }
]
}
]
};
Penyesuaian Halus Tata Letak dan Gaya
Mengendalikan garis arahan label dan batas potongan menjaga grafik pie tetap mudah dibaca bahkan saat menangani nilai data yang lebih kecil.
1. Pemisahan Potongan Kustom dan Arah Label
Menerapkan lebar batas item dan mengonfigurasi garis panduan eksternal mencegah tumpang tindih teks pada potongan yang bersebelahan:
option = {
series: [
{
name: 'Pemilikan Pasar',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 40, name: 'Merek A' },
{ value: 30, name: 'Merek B' },
{ value: 15, name: 'Merek C' },
{ value: 10, name: 'Merek D' },
{ value: 5, name: 'Lainnya' }
],
label: {
formatter: '{b}: {d}%'
},
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Praktik Terbaik Strategis
- Batasi Potongan Hingga 5 atau 6:Terlalu banyak potongan kecil membuat grafik pie sulit dibaca. Kelompokkan nilai-nilai kecil di bawah kategori ‘Lainnya’ agar fokus tetap tajam.
- Urutkan Potongan Berdasarkan Ukuran:Tempatkan segmen terbesar dimulai dari pukul 12 dan urutkan sisa potongan secara berurutan searah jarum jam untuk memudahkan pemindaian cepat.
- Tampilkan Persentase Langsung di Tooltip atau Label: Selalu sertakan
{d}%dalam format label atau tooltip agar penonton langsung melihat rasio proporsi tanpa harus melakukan perhitungan dalam pikiran.