Quando monitorando KPIs individuais em relação a metas críticas ou limites de segurança operacional, o Gráfico de Medidor (ou Gráfico de Velocímetro) fornece uma indicação visual imediata e altamente reconhecível. Ao mapear um único valor ao longo de um arco circular com um ponteiro e zonas de status codificadas por cor, os gráficos de medidor permitem que os usuários avaliem o desempenho atual em relação aos limites de aviso e aos limites alvo—como carga da CPU do servidor, porcentagens de conclusão de projetos, pontuações de crédito ou velocidades de veículos.
Os Mecanismos dos Gráficos de Medidor
No Apache ECharts, os gráficos de medidor usam type: 'gauge'. Diferentemente dos gráficos de múltiplas categorias, um gráfico de medidor geralmente exibe um único valor ou um pequeno conjunto de ponteiros ao longo de um arco radial. A escala do eixo é definida usando min e max propriedades, enquanto axisLine.lineStyle.colordivide o arco periférico em faixas distintas de aviso (por exemplo, verde, amarelo, vermelho).
1. Configuração Básica
Para construir um gráfico de medidor básico, defina min, max, e forneça uma entrada de valor único dentro do array de série data array:
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: 'Saúde do Sistema',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'Carga da CPU'
}
]
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de medidor podem ser estilizados com faixas de eixo multicoloridas, preenchimentos personalizados de progresso ou múltiplos ponteiros para comparar valores reais versus alvo em um único mostrador.
1. Faixas de Limite com Codificação por Cor e Ponteiros Personalizados
Defina paradas de cor explícitas ao longo do eixo circular usando axisLine.lineStyle.color para marcar zonas de alerta (por exemplo, Seguro, Aviso, Crítico):
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'], // Verde até 30%
[0.7, '#e6a23c'], // Laranja até 70%
[1, '#f56c6c'] // Vermelho até 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: 'Velocidade'
}
]
}
]
};
Ajuste fino do layout e das métricas centrais
Aplicar anéis de progresso arredondados modernos e tipografia personalizada para rótulos centrais transforma medidores padrão em cartões de painel elegantes.
1. Medidor de Anel Elegante com Exibição de Rótulo Central
Oculte agulhas tradicionais e use um anel de progresso grosso e arredondado combinado com texto grande centralizado para um componente de interface moderno e limpo:
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 a agulha do ponteiro para exibição limpa do anel
},
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: 'Progresso do Projeto'
}
]
}
]
};
Melhores Práticas Estratégicas
- Mantenha o Escopo Focado:Os medidores ocupam um espaço visual significativo para mostrar uma única métrica. Reserve-os para métricas-chave de alta prioridade que exigem avaliação imediata do status.
- Use a Cor de Forma Significativa:Alinhe as faixas de cor de limite com padrões universais (por exemplo, verde para seguro, laranja/amarelo para cautela, vermelho para perigo) para que os usuários possam avaliar o status sem precisar ler números exatos.
- Considere Layouts de Anel sem Ponteiro:Para painéis digitais e telas móveis, os medidores de progresso em arco sem ponteiro geralmente parecem mais limpos e ocupam menos altura vertical do que os medidores tradicionais com agulha.