Podczas monitorowania pojedynczych KPI w stosunku do kluczowych celów lub progów bezpieczeństwa operacyjnego, Wykres miernika (lub wykres prędkościomierza) zapewnia natychmiastowy, łatwo rozpoznawalny sygnał wizualny. Przyporządkowując pojedynczą wartość wzdłuż łuku okrągłego za pomocą wskazówki i stref statusu oznaczonych kolorami, wykresy mierników pozwalają użytkownikom ocenić obecny poziom wydajności w stosunku do progów ostrzegawczych i limitów celu—na przykład obciążenie CPU serwera, procent ukończenia projektu, punkty kredytowe lub prędkości pojazdów.
Zasada działania wykresów mierników
W Apache ECharts wykresy mierników używają type: 'gauge'. W przeciwieństwie do wykresów wielokategorii, wykres miernika zwykle wyświetla jedną wartość lub małą liczbę wskazówek wzdłuż łuku promieniowego. Skala osi jest definiowana za pomocą min i maxwłaściwości, podczas gdy axisLine.lineStyle.colordzieli łuk obwodowy na wyraźne strefy ostrzegawcze (np. zielony, żółty, czerwony).
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres miernika, ustaw min, max, a podaj pojedynczy wpis wartości wewnątrz tablicy serii data tablicy:
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: 'Stan systemu',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'Obciążenie CPU'
}
]
}
]
};
Zaawansowane techniki strukturalne
Wykresy mierników mogą być stylizowane za pomocą wielokolorowych pasów osi, niestandardowych wypełnień postępu lub wielu wskazówek w celu porównania rzeczywistych wartości z celami na jednym tarczy.
1. Kolorowe pasma progowe i niestandardowe wskaźniki
Zdefiniuj jasne punkty kolorystyczne wzdłuż osi okrągłej przy użyciuaxisLine.lineStyle.coloraby oznaczyć strefy ostrzegawcze (np. Bezpieczne, Ostrzegawcze, Krytyczne):
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'], // Zielony do 30%
[0.7, '#e6a23c'], // Pomarańczowy do 70%
[1, '#f56c6c'] // Czerwony do 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/h',
color: 'inherit'
},
data: [
{
value: 80,
name: 'Prędkość'
}
]
}
]
};
Dokładna dostosowanie układu i metryk centralnych
Zastosowanie nowoczesnych zaokrąglonych pierścieni postępu oraz niestandardowej typografii etykiet centralnych przekształca standardowe mierniki w eleganckie karty pulpitu.
1. Elegancki miernik pierścieniowy z wyświetlaniem etykiety w centrum
Ukryj tradycyjne wskazówki i użyj grubego, zaokrąglonego pierścienia postępu w połączeniu z dużym tekstem wyśrodkowanym, aby uzyskać czysty, nowoczesny element interfejsu użytkownika:
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 // Ukrywa wskazówkę w celu czystego wyświetlania pierścienia
},
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: 'Postęp projektu'
}
]
}
]
};
Strategiczne najlepsze praktyki
- Zachowaj skupienie na zakresie:Mierniki zajmują znaczną przestrzeń wizualną, aby pokazać jedną metrykę. Zarezerwuj je dla kluczowych metryk o wysokim priorytecie, które wymagają natychmiastowej oceny stanu.
- Używaj kolorów z myślą:Dostosuj pasma kolorystyczne progowe do uniwersalnych standardów (np. zielony dla bezpiecznego, pomarańczowy/yellow dla ostrożności, czerwony dla niebezpieczeństwa), aby użytkownicy mogli ocenić stan bez odczytywania dokładnych liczb.
- Rozważ układ pierścieni bez wskazówki:W przypadku cyfrowych pulpitu i ekranów mobilnych, mierniki łukowe bez wskazówki często wyglądają czystsze i zajmują mniej wysokości pionowej niż tradycyjne mierniki z wskazówką.