Ketika memantau satu KPI terhadap target kritis atau ambang batas keselamatan operasional, maka Grafik Pengukur (atau Grafik Speedometer) memberikan petunjuk visual yang langsung dan sangat mudah dikenali. Dengan memetakan satu nilai di sepanjang busur melingkar menggunakan penunjuk jarum dan zona status berwarna, grafik pengukur memungkinkan pengguna mengevaluasi kinerja saat ini terhadap ambang batas peringatan dan batas target—seperti beban CPU server, persentase penyelesaian proyek, skor kredit, atau kecepatan kendaraan.
Mekanisme Grafik Pengukur
Di Apache ECharts, grafik pengukur menggunakan type: 'gauge'. Berbeda dengan grafik multi-kategori, grafik pengukur biasanya menampilkan satu nilai atau sejumlah kecil penunjuk di sepanjang busur radial. Skala sumbu didefinisikan menggunakan min dan max properti, sementara axisLine.lineStyle.colormembagi busur keliling menjadi zona peringatan yang berbeda (misalnya, hijau, kuning, merah).
1. Pengaturan Dasar
Untuk membuat grafik pengukur dasar, atur min, max, dan sediakan entri nilai tunggal di dalam array series data array:
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: 'Kesehatan Sistem',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'Beban CPU'
}
]
}
]
};
Teknik Struktural Lanjutan
Grafik pengukur dapat diberi gaya dengan pita sumbu berwarna ganda, isian kemajuan khusus, atau beberapa jarum untuk membandingkan nilai aktual terhadap nilai target pada satu dial.
1. Pita Ambang Berwarna dan Penunjuk Khusus
Tentukan titik warna eksplisit sepanjang sumbu melingkar menggunakan axisLine.lineStyle.color untuk menandai zona peringatan (misalnya, Aman, Peringatan, Kritis):
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'], // Hijau hingga 30%
[0.7, '#e6a23c'], // Oranye hingga 70%
[1, '#f56c6c'] // Merah hingga 100%
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -20,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
distance: -20,
length: 20,
lineStyle: {
color: '#fff',
width: 4
}
},
axisLabel: {
color: 'inherit',
distance: 25,
fontSize: 14
},
detail: {
valueAnimation: true,
formatter: '{value} km/jam',
color: 'inherit'
},
data: [
{
value: 80,
name: 'Kecepatan'
}
]
}
]
};
Penyesuaian Halus Tata Letak dan Metrik Pusat
Menerapkan cincin progres melengkung modern dan tipografi label pusat khusus mengubah pengukur standar menjadi kartu dasbor yang ramping.
1. Pengukur Cincin Ramping dengan Tampilan Label Pusat
Sembunyikan jarum tradisional dan gunakan cincin progres tebal dengan ujung melengkung yang dipasangkan dengan teks besar di tengah untuk komponen UI yang bersih dan modern:
option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 5,
itemStyle: {
color: '#5470c6',
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 18
},
pointer: {
show: false // Sembunyikan jarum penunjuk untuk tampilan cincin yang bersih
},
axisLine: {
roundCap: true,
lineStyle: {
width: 18
}
},
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
title: {
offsetCenter: [0, '20%'],
fontSize: 14,
color: '#666'
},
detail: {
offsetCenter: [0, '-10%'],
valueAnimation: true,
formatter: '{value}%',
fontSize: 32,
fontWeight: 'bold',
color: '#333'
},
data: [
{
value: 78,
name: 'Progress Proyek'
}
]
}
]
};
Praktik Terbaik Strategis
- Pertahankan Fokus Lingkup:Pengukur memakan ruang visual yang signifikan untuk menampilkan satu metrik. Cadangkan untuk metrik penting berprioritas tinggi yang memerlukan penilaian status segera.
- Gunakan Warna Secara Bermakna:Selaraskan pita warna ambang dengan standar universal (misalnya, hijau untuk aman, oranye/kuning untuk waspada, merah untuk bahaya) agar pengguna dapat menilai status tanpa membaca angka pasti.
- Pertimbangkan Tata Letak Cincin Tanpa Penunjuk:Untuk dashboard digital dan layar ponsel, pengukur cincin progres tanpa penunjuk sering terlihat lebih bersih dan memakan tinggi vertikal yang lebih sedikit dibandingkan meter jarum tradisional.