Gráfico paralelo: análisis de datos multidimensionales

Cuando se comparan puntos de datos multivariados a lo largo de muchas dimensiones numéricas o categóricas simultáneamente, el Gráfico de coordenadas paralelas es una herramienta visual esencial. En lugar de mapear coordenadas a ejes horizontales y verticales perpendiculares, los gráficos paralelos colocan todas las dimensiones lado a lado como líneas paralelas. Las entradas de datos individuales se representan como caminos de polilínea continua que intersectan cada eje, lo que facilita identificar clústeres de múltiples atributos, compromisos, correlaciones y valores atípicos—por ejemplo, comparar modelos de automóviles según potencia, peso, eficiencia de combustible, precio y calificación de seguridad.

La mecánica de los gráficos paralelos

En Apache ECharts, los gráficos de coordenadas paralelas dependen de un bloque de configuración dedicado parallelAxis que define cada escala paralela (su índice de eje, nombre de dimensión y tipo de datos). La serie del gráfico establece type: 'parallel' y asigna filas de arreglos de valores de múltiples elementos a cada índice de eje correspondiente.

1. Configuración esencial

Para construir un gráfico paralelo básico, defina sus dimensiones en el arreglo parallelAxis y pase los arreglos de coordenadas correspondientes dentro de la serie data:

option = {
    parallelAxis: [
        { dim: 0, name: 'Precio ($)' },
        { dim: 1, name: 'Calificación' },
        { dim: 2, name: 'Peso (kg)' },
        { dim: 3, name: 'Potencia (HP)' }
    ],
    series: [
        {
            type: 'parallel',
            lineStyle: {
                width: 2
            },
            data: [
                [1299, 4.5, 1.2, 120],
                [899, 4.0, 1.5, 95],
                [1599, 4.8, 1.1, 150],
                [499, 3.5, 2.0, 80],
                [2100, 4.9, 0.9, 180]
            ]
        }
    ]
};

Técnicas estructurales avanzadas

Los gráficos paralelos pueden combinarse con gradientes de color visuales o escalas categóricas mixtas para evaluar compromisos complejos entre categorías de productos distintas.

1. Gradientes de color del mapa visual a lo largo de dimensiones

Asocie un visualMapcomponente con una dimensión clave del eje (por ejemplo, mapear el color de la línea a las calificaciones de rendimiento) para resaltar instantáneamente a los mejores desempeñadores en todos los ejes paralelos:

option = {
    axisParalela: [
        { dim: 0, nombre: 'Núcleos de CPU' },
        { dim: 1, nombre: 'RAM (GB)' },
        { dim: 2, nombre: 'Almacenamiento (TB)' },
        { dim: 3, nombre: 'Costo mensual ($)', min: 0, max: 200 }
    ],
    mapaVisual: {
        mostrar: true,
        tipo: 'continuo',
        min: 0,
        max: 200,
        dimension: 3, // Color de las rutas de línea según el índice de dimensión 3 (Costo mensual)
        enRango: {
            color: ['#91cc75', '#fac858', '#ee6666'] // Verde (costo bajo) a Rojo (costo alto)
        },
        orientacion: 'horizontal',
        arriba: '2%',
        izquierda: 'centro'
    },
    paralelo: {
        arriba: '18%',
        abajo: '10%'
    },
    series: [
        {
            tipo: 'paralelo',
            estiloLinea: {
                ancho: 3,
                opacidad: 0.8
            },
            datos: [
                [4, 8, 0.5, 25],
                [8, 16, 1.0, 50],
                [16, 32, 2.0, 110],
                [32, 64, 4.0, 185],
                [12, 24, 1.5, 80]
            ]
        }
    ]
};

Ajuste fino del diseño y filtrado interactivo

Agregar curvas suaves y opacidad en las líneas evita que los hilos de datos densos y entrecruzados sobrecarguen la interfaz de usuario.

1. Rutas de curvas suaves y hilos de baja opacidad

Establecer suave: verdaderoy reducir la opacidad de la línea para que las superposiciones y agrupaciones de datos de alta densidad sean visibles de forma natural:

option = {
    axisParalela: [
        { dim: 0, nombre: 'Puntuación A' },
        { dim: 1, nombre: 'Puntuación B' },
        { dim: 2, nombre: 'Puntuación C' },
        { dim: 3, nombre: 'Puntuación D' },
        { dim: 4, nombre: 'Puntuación E' }
    ],
    paralelo: {
        izquierda: '10%',
        derecha: '10%',
        abajo: '12%',
        arriba: '12%'
    },
    series: [
        {
            tipo: 'paralelo',
            suave: true, // Curvas en las rutas de línea para una visualización más limpia
            estiloLinea: {
                color: '#5470c6',
                ancho: 2,
                opacidad: 0.45
            },
            datos: [
                [85, 92, 78, 90, 88],
                [70, 65, 80, 72, 75],
                [95, 88, 92, 96, 94],
                [60, 75, 68, 62, 70],
                [88, 90, 85, 89, 91],
                [78, 82, 74, 80, 83]
            ]
        }
    ]
};

Prácticas recomendadas estratégicas

• Organiza los ejes con cuidado:Coloca métricas fuertemente correlacionadas o directamente comparables en ejes adyacentes para que las relaciones y tendencias de cruce sean más fáciles de identificar.
• Usa baja opacidad para volúmenes altos de datos:Cuando se trazan decenas o cientos de líneas, reduce opacidadEstiloLinea a 0.2–0.5para que las tendencias superpuestas creen bandas más oscuras y de alta densidad de forma natural.
• Habilita suave: verdaderopara conjuntos de datos complejos:Aplicar una curvatura sutil a las rutas de las líneas reduce los ángulos visuales agudos cuando los hilos cruzan múltiples ejes paralelos de forma rápida sucesiva.