Cuando se monitorean KPI individuales frente a objetivos críticos o umbrales de seguridad operativa, el Gráfico de medidor (o gráfico de velocímetro) proporciona una señal visual inmediata y altamente reconocible. Al mapear un valor único a lo largo de un arco circular con una aguja indicadora y zonas de estado codificadas por colores, los gráficos de medidor permiten a los usuarios evaluar el rendimiento actual frente a umbrales de advertencia y límites objetivo—por ejemplo, carga de CPU del servidor, porcentajes de finalización de proyectos, puntajes de crédito o velocidades de vehículos.
La mecánica de los gráficos de medidor
En Apache ECharts, los gráficos de medidor utilizan type: 'gauge'. A diferencia de los gráficos de múltiples categorías, un gráfico de medidor muestra típicamente un solo valor o un pequeño conjunto de indicadores a lo largo de un arco radial. La escala del eje se define utilizando min y max propiedades, mientras que axisLine.lineStyle.colordivide el arco periférico en bandas de advertencia distintas (por ejemplo, verde, amarillo, rojo).
1. Configuración esencial
Para construir un gráfico de medidor básico, establezca min, max, y proporcione una entrada de valor único dentro del arreglo de series data matriz:
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: 'Estado del sistema',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'Carga de CPU'
}
]
}
]
};
Técnicas estructurales avanzadas
Los gráficos de medidor se pueden personalizar con bandas de eje multicolores, rellenos de progreso personalizados o múltiples agujas para comparar valores reales frente a valores objetivo en un único indicador.
1. Bandas de umbral con codificación por colores y marcadores personalizados
Define paradas de color explícitas a lo largo del eje circular usando axisLine.lineStyle.color para marcar zonas de advertencia (por ejemplo, Seguro, Advertencia, Crítico):
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'], // Verde hasta un 30%
[0.7, '#e6a23c'], // Naranja hasta un 70%
[1, '#f56c6c'] // Rojo hasta un 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: 'Velocidad'
}
]
}
]
};
Ajuste fino del diseño y métricas centrales
Aplicar anillos de progreso redondeados modernos y tipografía personalizada para etiquetas centrales transforma los medidores estándar en tarjetas de panel elegantes.
1. Medidor de anillo elegante con visualización de etiqueta central
Ocultar las agujas tradicionales y usar un anillo grueso y redondeado de progreso combinado con texto grande centrado para crear un componente de interfaz moderno y limpio:
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 // Oculta la aguja del puntero para una visualización limpia del anillo
},
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: 'Progreso del proyecto'
}
]
}
]
};
Prácticas recomendadas estratégicas
- Mantén el alcance enfocado:Los medidores ocupan un espacio visual significativo para mostrar una sola métrica. Resérvalos para métricas clave de alta prioridad que requieran una evaluación inmediata del estado.
- Usa el color de forma significativa:Alinea las bandas de color de umbral con estándares universales (por ejemplo, verde para seguro, naranja/amarillo para precaución, rojo para peligro) para que los usuarios puedan evaluar el estado sin necesidad de leer números exactos.
- Considera diseños de anillo sin puntero:Para paneles digitales y pantallas móviles, los medidores de progreso en arco sin puntero suelen verse más limpios y ocupan menos altura vertical que los medidores tradicionales con aguja.