Gráfico Paralelo: Análise de Dados Multidimensionais

Quando comparando pontos de dados multivariados ao longo de muitos eixos numéricos ou categóricos simultaneamente, o Gráfico de Coordenadas Paralelas é uma ferramenta visual essencial. Em vez de mapear coordenadas para eixos horizontais e verticais perpendiculares, os gráficos paralelos posicionam todas as dimensões lado a lado como linhas paralelas. As entradas individuais de dados são representadas como caminhos polilinha contínuos que intersectam cada eixo, facilitando a identificação de aglomerados de múltiplas atributos, compromissos, correlações e valores atípicos—como comparar modelos de carros em potência, peso, eficiência de combustível, preço e classificação de segurança.

Os Mecanismos dos Gráficos Paralelos

No Apache ECharts, os gráficos de coordenadas paralelas dependem de um bloco de configuração dedicado parallelAxis que define cada escala paralela (seu índice de eixo, nome da dimensão e tipo de dados). A série do gráfico define type: 'parallel' e mapeia linhas de arrays de valores com múltiplos elementos para cada índice de eixo correspondente.

1. Configuração Básica

Para construir um gráfico paralelo básico, defina suas dimensões no array parallelAxis e passe os arrays de coordenadas correspondentes dentro da sua série data:

option = {
    parallelAxis: [
        { dim: 0, name: 'Preço ($)' },
        { dim: 1, name: 'Avaliação' },
        { dim: 2, name: 'Peso (kg)' },
        { dim: 3, name: 'Potência (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 Estruturais Avançadas

Gráficos paralelos podem ser combinados com gradientes de cor visuais ou escalas categóricas mistas para avaliar compromissos complexos entre categorias distintas de produtos.

1. Gradientes de Cor do Mapa Visual ao Longo das Dimensões

Combine um visualMapcomponente com uma dimensão-chave de eixo (por exemplo, mapear a cor da linha para classificações de desempenho) para destacar instantaneamente os melhores desempenhados em todos os eixos paralelos:

option = {
    parallelAxis: [
        { dim: 0, name: 'Núcleos do CPU' },
        { dim: 1, name: 'RAM (GB)' },
        { dim: 2, name: 'Armazenamento (TB)' },
        { dim: 3, name: 'Custo Mensal ($)', min: 0, max: 200 }
    ],
    visualMap: {
        show: true,
        type: 'contínuo',
        min: 0,
        max: 200,
        dimension: 3, // Cor das linhas com base no índice de dimensão 3 (Custo Mensal)
        inRange: {
            color: ['#91cc75', '#fac858', '#ee6666'] // Verde (Baixo Custo) até Vermelho (Alto Custo)
        },
        orient: 'horizontal',
        top: '2%',
        left: 'center'
    },
    parallel: {
        top: '18%',
        bottom: '10%'
    },
    series: [
        {
            type: 'parallel',
            lineStyle: {
                width: 3,
                opacity: 0.8
            },
            data: [
                [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 do layout e filtragem interativa

Adicionar curvas suaves e opacidade nas linhas evita que fios de dados densos e cruzados sobrecarreguem a interface do usuário.

1. Caminhos de curvas suaves e fios de baixa opacidade

Defina smooth: truee reduza a opacidade da linha para tornar os sobreposições e agrupamentos de dados de alta densidade naturalmente visíveis:

option = {
    parallelAxis: [
        { dim: 0, name: 'Nota A' },
        { dim: 1, name: 'Nota B' },
        { dim: 2, name: 'Nota C' },
        { dim: 3, name: 'Nota D' },
        { dim: 4, name: 'Nota E' }
    ],
    parallel: {
        left: '10%',
        right: '10%',
        bottom: '12%',
        top: '12%'
    },
    series: [
        {
            type: 'parallel',
            smooth: true, // Curvas nos caminhos das linhas para visualizações mais limpas
            lineStyle: {
                color: '#5470c6',
                width: 2,
                opacity: 0.45
            },
            data: [
                [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]
            ]
        }
    ]
};

Melhores Práticas Estratégicas

• Organize os eixos com cuidado:Coloque métricas fortemente correlacionadas ou diretamente comparáveis em eixos adjacentes para que relações e tendências de sobreposição sejam mais fáceis de identificar.
• Use opacidade mais baixa para grandes volumes de dados:Ao plotar dezenas ou centenas de linhas, reduza lineStyle.opacity para 0.2–0.5para que tendências sobrepostas criem bandas escuras e de alta densidade naturalmente.
• Habilite smooth: true para conjuntos de dados complexos:Aplicar curvatura sutil aos caminhos das linhas reduz ângulos visuais acentuados quando os fios cruzam múltiplos eixos paralelos em rápida sucessão.