Ao avaliar perfis de desempenho complexos em múltiplos métricas qualitativas ou quantitativas simultaneamente, o Gráfico de Radar (ou Gráfico de Teia de Aranha) é uma ferramenta de visualização ideal. Ao posicionar múltiplas escalas de características ao longo de eixos radiais que partem de um ponto central, os gráficos de radar exibem comparações multidimensionais como formas poligonais distintas. Isso os torna adequados para avaliações de habilidades, cartões de avaliação de fornecedores, benchmarks de recursos de produtos ou perfis de desempenho de jogadores.
Os Mecanismos dos Gráficos de Radar
No Apache ECharts, os gráficos de radar dependem de um bloco de configuração dedicado radar que define os eixos radiais, conhecidos como indicadorchaves. O objeto série define type: 'radar' e mapeia valores de array numéricos correspondentes a cada escala de indicador declarada.
1. Configuração Básica
Para criar um gráfico de radar básico, defina seus limites de dimensão dentro de radar.indicator e passe arrays numéricos dentro dos seus dados da série:
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['Orçamento Alocado', 'Despesas Reais']
},
radar: {
indicator: [
{ name: 'Vendas', max: 6500 },
{ name: 'Administração', max: 16000 },
{ name: 'Tecnologia da Informação', max: 30000 },
{ name: 'Suporte ao Cliente', max: 38000 },
{ name: 'Desenvolvimento', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Orçamento vs Despesas',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Orçamento Alocado'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Despesas Reais'
}
]
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de radar podem ser estilizados usando polígonos preenchidos, formas de grade circular ou temas de cores distintos para tornar a sobreposição de perfis mais fácil de ler.
1. Preenchimento de Área Poligonal com Formas Personalizadas de Grade
Alterar a grade de fundo da teia de polígono para círculo e aplicar preenchimentos de área transparentes destaca a extensão geral de cada perfil de métrica:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['Modelo A', 'Modelo B']
},
radar: {
shape: 'circle', // Grade de fundo circular
indicator: [
{ name: 'Tempo de Bateria', max: 100 },
{ name: 'Potência de Processamento', max: 100 },
{ name: 'Qualidade da Construção', max: 100 },
{ name: 'Qualidade da Tela', max: 100 },
{ name: 'Câmera', max: 100 },
{ name: 'Valor', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: 'Modelo A',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: 'Modelo B',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
Ajuste fino do layout e do estilo
Ajustar as cores do texto dos indicadores, as linhas de divisão e os tamanhos dos símbolos evita que as linhas web de múltiplos eixos sobrecarreguem os dados.
1. Formatação personalizada da grade web e dos rótulos
Estile as linhas dos eixos, as áreas de divisão e os rótulos externos para manter um contraste visual limpo em interfaces escuras ou claras:
option = {
radar: {
indicator: [
{ name: 'Usabilidade', max: 10 },
{ name: 'Desempenho', max: 10 },
{ name: 'Segurança', max: 10 },
{ name: 'Escalabilidade', max: 10 },
{ name: 'Eficiência de Custos', max: 10 }
],
axisName: {
color: '#333',
fontSize: 13,
fontWeight: 'bold'
},
splitArea: {
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.1)']
}
},
splitLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
type: 'radar',
symbolSize: 8,
lineStyle: {
width: 3
},
data: [
{
value: [8.5, 9.0, 7.5, 8.0, 9.5],
name: 'Pontuação da Plataforma',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
Melhores Práticas Estratégicas
- Padronize as escalas dos eixos:Garanta que todos os indicadores usem faixas de escala normalizadas (por exemplo, de 0 a 100 ou de 1 a 10) sempre que possível, para que as áreas dos polígonos externos reflitam comparações equilibradas.
- Mantenha as sobreposições de séries baixas:Limite as formas de comparação radar a 2 ou 3 por gráfico. A sobreposição de 4 ou mais polígonos preenchidos torna difícil isolar os contornos individuais das formas.
- Use preenchimentos de área com baixa opacidade:Aplique sempre preenchimentos transparentes (com opacidade em torno de 0,2–0,4) para que as linhas de grade subjacentes e os perfis de interseção permaneçam visíveis sob as camadas superiores.