Ketika mengevaluasi profil kinerja yang kompleks di berbagai metrik kualitatif atau kuantitatif secara bersamaan, Grafik Radar (atau Grafik Jaring Laba-laba) adalah alat visualisasi yang ideal. Dengan menempatkan beberapa skala fitur sepanjang sumbu radial yang berasal dari titik pusat, grafik radar menampilkan perbandingan multi-dimensi sebagai bentuk poligon yang berbeda. Ini membuat mereka sangat cocok untuk penilaian keterampilan, kartu penilaian vendor, benchmark fitur produk, atau profil kinerja pemain.
Mekanisme Grafik Radar
Dalam Apache ECharts, grafik radar bergantung pada blok konfigurasi khusus radar yang mendefinisikan sumbu radial, dikenal sebagai indicator kunci. Objek seri mengatur type: 'radar' dan memetakan nilai array numerik yang sesuai dengan setiap skala indicator yang dideklarasikan.
1. Pengaturan Dasar
Untuk membuat grafik radar dasar, tentukan ambang batas dimensi Anda di dalam radar.indicator dan lewatkan array numerik dalam data seri Anda:
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['Anggaran yang Dialokasikan', 'Pengeluaran Nyata']
},
radar: {
indicator: [
{ name: 'Penjualan', max: 6500 },
{ name: 'Administrasi', max: 16000 },
{ name: 'Teknologi Informasi', max: 30000 },
{ name: 'Dukungan Pelanggan', max: 38000 },
{ name: 'Pengembangan', max: 52000 },
{ name: 'Pemasaran', max: 25000 }
]
},
series: [
{
name: 'Anggaran vs Pengeluaran',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Anggaran yang Dialokasikan'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Pengeluaran Nyata'
}
]
}
]
};
Teknik Struktural Lanjutan
Grafik radar dapat diberi gaya menggunakan poligon area yang diisi, bentuk kisi lingkaran, atau tema warna yang berbeda untuk memudahkan pembacaan tumpang tindih profil.
1. Isian Area Poligon dengan Bentuk Kisi Khusus
Mengganti kisi latar belakang web dari poligon menjadi lingkaran dan menerapkan isian area transparan menyoroti jejak keseluruhan dari setiap profil metrik:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['Model A', 'Model B']
},
radar: {
shape: 'circle', // Latar belakang web berbentuk lingkaran
indicator: [
{ name: 'Umur Baterai', max: 100 },
{ name: 'Kekuatan Pemrosesan', max: 100 },
{ name: 'Kualitas Konstruksi', max: 100 },
{ name: 'Kualitas Layar', max: 100 },
{ name: 'Kamera', max: 100 },
{ name: 'Nilai', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: 'Model A',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: 'Model B',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
Penyesuaian Tata Letak dan Gaya
Menyesuaikan warna teks indikator, garis pemisah, dan ukuran simbol mencegah garis web multi-sumbu mengalahkan data.
1. Format Grid Web dan Label Kustom
Gaya garis sumbu, area pemisah, dan label luar untuk menjaga kontras visual yang bersih pada antarmuka gelap atau terang:
option = {
radar: {
indicator: [
{ name: 'Kemudahan Penggunaan', max: 10 },
{ name: 'Kinerja', max: 10 },
{ name: 'Keamanan', max: 10 },
{ name: 'Skalabilitas', max: 10 },
{ name: 'Efisiensi Biaya', max: 10 }
],
axisName: {
color: '#333',
fontSize: 13,
fontWeight: 'bold'
},
splitArea: {
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.1)']
}
},
splitLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
type: 'radar',
symbolSize: 8,
lineStyle: {
width: 3
},
data: [
{
value: [8.5, 9.0, 7.5, 8.0, 9.5],
name: 'Skor Platform',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
Praktik Terbaik Strategis
- Standarisasi Skala Sumbu:Pastikan semua indikator menggunakan rentang skala yang dinormalisasi (misalnya, 0 hingga 100 atau 1 hingga 10) sebisa mungkin agar area poligon luar mencerminkan perbandingan yang seimbang.
- Jaga Overlay Seri Rendah:Batasi bentuk perbandingan radar menjadi 2 atau 3 per grafik. Tumpang tindih 4 atau lebih poligon yang terisi membuat batas bentuk individu sulit dipisahkan.
- Gunakan Isian Area Opasitas Rendah:Selalu terapkan isian transparan (opasitas sekitar 0,2–0,4) agar garis-garis grid di bawah dan profil yang saling berpotongan tetap terlihat di bawah lapisan atas.