Lors du suivi des indicateurs clés de performance (KPI) individuels par rapport à des objectifs critiques ou à des seuils de sécurité opérationnelle, le Graphique-jauge (ou graphique de compteur de vitesse) fournit un signal visuel immédiat et très reconnaissable. En cartographiant une valeur unique le long d’un arc circulaire avec une aiguille et des zones d’état codées par couleur, les graphiques-jauge permettent aux utilisateurs d’évaluer la performance actuelle par rapport aux seuils d’alerte et aux limites cibles—par exemple, la charge du processeur du serveur, les pourcentages de progression des projets, les scores de crédit ou les vitesses des véhicules.
Le fonctionnement des graphiques-jauge
Dans Apache ECharts, les graphiques-jauge utilisent type : 'gauge'. Contrairement aux graphiques à plusieurs catégories, un graphique-jauge affiche généralement une seule valeur ou un petit ensemble d’aiguilles le long d’un arc radial. L’échelle de l’axe est définie à l’aide des propriétés min et max propriétés, tandis que axisLine.lineStyle.colordivise l’arc périphérique en bandes d’alerte distinctes (par exemple, vert, jaune, rouge).
1. Configuration essentielle
Pour créer un graphique-jauge de base, définissez min, max, et fournissez une entrée unique de valeur dans le tableau de votre série data tableau :
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: 'État du système',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'Charge du CPU'
}
]
}
]
};
Techniques structurelles avancées
Les graphiques-jauge peuvent être stylisés avec des bandes d’axe multicolores, des remplissages de progression personnalisés ou plusieurs aiguilles pour comparer les valeurs réelles aux valeurs cibles sur un même cadran.
1. Bandes de seuil codées par couleur et aiguilles personnalisées
Définissez des arrêts de couleur explicites le long de l’axe circulaire en utilisantaxisLine.lineStyle.color pour marquer les zones d’alerte (par exemple, Sécurité, Avertissement, Critique) :
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'], // Vert jusqu'à 30 %
[0.7, '#e6a23c'], // Orange jusqu'à 70 %
[1, '#f56c6c'] // Rouge jusqu'à 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: 'Vitesse'
}
]
}
]
};
Affinage du layout et des métriques centrales
L’application d’anneaux de progression arrondis modernes et de typographie personnalisée pour les étiquettes centrales transforme les jaugeurs standards en cartes de tableau de bord élégantes.
1. Jauge annulaire élégante avec affichage de l’étiquette centrale
Masquez les aiguilles traditionnelles et utilisez un anneau de progression épais et arrondi associé à un grand texte centré pour un composant d’interface utilisateur propre et moderne :
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 // Masque l'aiguille du pointeur pour une affichage propre de l'anneau
},
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: 'Progression du projet'
}
]
}
]
};
Meilleures pratiques stratégiques
- Gardez le périmètre centré :Les jaugeurs occupent un espace visuel important pour afficher une seule métrique. Réservez-les pour les métriques clés à haute priorité nécessitant une évaluation immédiate de leur état.
- Utilisez la couleur de manière significative :Alignez les bandes de couleur des seuils avec des normes universelles (par exemple, vert pour sûr, orange/jaune pour précaution, rouge pour danger) afin que les utilisateurs puissent évaluer l’état sans lire les chiffres exacts.
- Considérez les dispositions d’anneaux sans aiguille :Pour les tableaux de bord numériques et les écrans mobiles, les jaugeurs d’arc sans aiguille ont souvent un aspect plus propre et occupent moins de hauteur verticale que les jaugeurs traditionnels à aiguille.