Wenn einzelne KPIs gegenüber kritischen Zielen oder operativen Sicherheitsschwellen überwacht werden, bietet die Messskala (oder Drehzahlmesser) liefert eine sofort erkennbare, deutliche visuelle Anzeige. Durch die Abbildung eines einzelnen Werts entlang eines kreisförmigen Bogens mit einer Nadel und farbcodierten Statuszonen ermöglichen Messskalen es Benutzern, die aktuelle Leistung gegenüber Warnschwellen und Zielgrenzen zu bewerten—zum Beispiel Server-CPU-Auslastung, Projektabschlussprozentsätze, Kreditwerte oder Fahrzeuggeschwindigkeiten.
Die Funktionsweise von Messskalen
In Apache ECharts verwenden Messskalen type: 'gauge'. Im Gegensatz zu mehrkategorischen Diagrammen zeigt eine Messskala typischerweise einen einzelnen Wert oder eine kleine Anzahl von Zeigern entlang eines radialen Bogens. Die Achsenskala wird mithilfe der Eigenschaften min und max definiert, während axisLine.lineStyle.color den Umfangsbogen in deutlich abgegrenzte Warnbereiche (z. B. grün, gelb, rot) unterteilt.
1. Grundlegende Einrichtung
Um eine grundlegende Messskala zu erstellen, legen Sie min, max, und geben Sie einen einzelnen Wert in Ihrem Series-dataArray an:
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: 'Systemzustand',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'CPU-Auslastung'
}
]
}
]
};
Fortgeschrittene strukturelle Techniken
Messskalen können mit mehrfarbigen Achsenbändern, benutzerdefinierten Füllungen für den Fortschritt oder mehreren Nadeln gestaltet werden, um tatsächliche Werte mit Zielwerten auf einer einzigen Skala zu vergleichen.
1. Farbkodierte Schwellenbänder und benutzerdefinierte Zeiger
Definieren Sie explizite Farbstopps entlang der kreisförmigen Achse mit Hilfe vonaxisLine.lineStyle.colorum Warnzonen zu markieren (z. B. Sicher, Warnung, Kritisch):
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'], // Grün bis 30%
[0.7, '#e6a23c'], // Orange bis 70%
[1, '#f56c6c'] // Rot bis 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: 'Geschwindigkeit'
}
]
}
]
};
Feinabstimmung von Layout und zentrale Metriken
Durch die Anwendung moderner abgerundeter Fortschrittsringe und benutzerdefinierter Schriftarten für zentrale Beschriftungen werden herkömmliche Messgeräte in schicke Dashboard-Karten verwandelt.
1. Schicker Ringmesser mit zentraler Beschriftung
Verstecken Sie traditionelle Zeiger und verwenden Sie einen dicken, abgerundeten Fortschrittsring zusammen mit großem zentriertem Text für ein sauberes, modernes UI-Element:
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 // Versteckt den Zeiger für eine saubere Ringanzeige
},
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: 'Projektfortschritt'
}
]
}
]
};
Strategische Best Practices
- Halten Sie den Fokus auf das Wesentliche:Messgeräte beanspruchen erheblichen visuellen Raum, um eine einzelne Metrik darzustellen. Verwenden Sie sie ausschließlich für zentrale, hochpriorisierte Metriken, die eine sofortige Statusbewertung erfordern.
- Verwenden Sie Farben sinnvoll:Richten Sie die Farbbänder für Schwellenwerte nach universellen Standards aus (z. B. Grün für sicher, Orange/Gelb für Vorsicht, Rot für Gefahr), damit Benutzer den Status beurteilen können, ohne genaue Zahlen ablesen zu müssen.
- Berücksichtigen Sie zeigerlose Ringlayouts:Für digitale Dashboards und mobile Bildschirme wirken zeigerlose Bogen-Fortschrittsmesser oft sauberer und beanspruchen weniger vertikalen Platz als herkömmliche Nadelmesser.