Cuando se evalúan perfiles de rendimiento complejos a través de múltiples métricas cualitativas o cuantitativas simultáneamente, el Gráfico de radar (o gráfico de telaraña) es una herramienta de visualización ideal. Al colocar múltiples escalas de características a lo largo de ejes radiales que parten de un punto central, los gráficos de radar muestran comparaciones multidimensionales como formas poligonales distintas. Esto los hace adecuados para evaluaciones de habilidades, tarjetas de evaluación de proveedores, benchmarks de características de productos o perfiles de rendimiento de jugadores.
La mecánica de los gráficos de radar
En Apache ECharts, los gráficos de radar dependen de un bloque de configuración dedicado radar que define los ejes radiales, conocidos como indicador claves. El objeto serie establece type: 'radar' y asigna valores de matriz numérica correspondientes a cada escala de indicador declarada.
1. Configuración esencial
Para crear un gráfico de radar básico, define tus umbrales de dimensión dentro de radar.indicator y pasa matrices numéricas dentro de tus datos de serie:
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['Presupuesto asignado', 'Gastos reales']
},
radar: {
indicator: [
{ name: 'Ventas', max: 6500 },
{ name: 'Administración', max: 16000 },
{ name: 'Tecnología de la información', max: 30000 },
{ name: 'Soporte al cliente', max: 38000 },
{ name: 'Desarrollo', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Presupuesto frente a gastos',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Presupuesto asignado'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Gastos reales'
}
]
}
]
};
Técnicas estructurales avanzadas
Los gráficos de radar se pueden estilizar usando polígonos de área rellena, formas de cuadrícula circular o temas de color distintos para facilitar la lectura de superposiciones de perfiles.
1. Relleno de área poligonal con formas de cuadrícula personalizadas
Cambiar la cuadrícula de fondo de la red de polígono a círculo y aplicar rellenos de área transparentes resalta la huella general de cada perfil de métrica:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['Modelo A', 'Modelo B']
},
radar: {
shape: 'circle', // Red de fondo circular
indicator: [
{ name: 'Duración de la batería', max: 100 },
{ name: 'Potencia de procesamiento', max: 100 },
{ name: 'Calidad de construcción', max: 100 },
{ name: 'Calidad de pantalla', max: 100 },
{ name: 'Cámara', 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 del diseño y estilo
Ajustar los colores del texto del indicador, las líneas de división y los tamaños de los símbolos evita que las líneas de red de múltiples ejes sobrecarguen los datos.
1. Formato personalizado de cuadrícula y etiquetas web
Estile las líneas del eje, las áreas de división y las etiquetas externas para mantener un contraste visual limpio en interfaces oscuras o claras:
option = {
radar: {
indicator: [
{ name: 'Usabilidad', max: 10 },
{ name: 'Rendimiento', max: 10 },
{ name: 'Seguridad', max: 10 },
{ name: 'Escalabilidad', max: 10 },
{ name: 'Eficiencia de costos', 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: 'Puntuación de la plataforma',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
Prácticas recomendadas estratégicas
- Estandarice las escalas de los ejes:Asegúrese de que todos los indicadores utilicen rangos de escala normalizados (por ejemplo, de 0 a 100 o de 1 a 10) siempre que sea posible, para que las áreas poligonales externas reflejen comparaciones equilibradas.
- Mantenga los superposiciones de series bajas:Límite las formas de comparación de radar a 2 o 3 por gráfico. La superposición de 4 o más polígonos rellenos dificulta aislar los bordes de cada forma individual.
- Use rellenos de área con baja opacidad:Aplicar siempre rellenos transparentes (alrededor de 0.2–0.4 de opacidad) para que las líneas de cuadrícula subyacentes y los perfiles de intersección permanezcan visibles debajo de las capas superiores.