Gráfico de Dispersão: Distribuição Bivariada e Agrupamento de Pontos

Ao explorar relações ou correlações entre duas variáveis contínuas, o Gráfico de Dispersão (ou Gráfico de Dispersão) é a principal ferramenta analítica. Ao plotar pontos de dados em uma grade bidimensional com base em coordenadas numéricas X e Y, os gráficos de dispersão ajudam a revelar agrupamentos, valores atípicos, tendências e correlações em conjuntos de dados complexos, como gastos com marketing em relação à geração de leads ou experiência de funcionários em relação ao salário.

Os Mecanismos dos Gráficos de Dispersão

Diferentemente dos gráficos de colunas ou linhas orientados por categorias, os gráficos de dispersão usam eixos de valor numérico para ambas as dimensões. No Apache ECharts, definir type: 'scatter' espera dados formatados como arrays de coordenadas numéricas com dois elementos [x, y] ou objetos de dados mapeados em relação aos eixos numéricos xAxis e yAxis configurações.

1. Configuração Básica

Para criar um gráfico de dispersão básico, defina type: 'value' em ambos os eixos e forneça pares de coordenadas numéricas dentro do array de dados da série:

option = {
    tooltip: {
        trigger: 'item',
        formatter: 'X: {c0}rnY: {c1}'
    },
    xAxis: {
        type: 'value',
        name: 'Gastos com Anúncios ($k)'
    },
    yAxis: {
        type: 'value',
        name: 'Conversões'
    },
    series: [
        {
            type: 'scatter',
            symbolSize: 12,
            data: [
                [10.0, 8.04],
                [8.07, 6.95],
                [13.0, 7.58],
                [9.05, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.03, 7.24],
                [12.0, 4.26],
                [7.08, 4.82],
                [5.02, 5.68]
            ]
        }
    ]
};

Técnicas Estruturais Avançadas

Os gráficos de dispersão podem incorporar dimensionamento dinâmico para representar uma terceira variável (gráfico de bolhas) ou exibir sobreposições de agrupamentos de múltiplas categorias.

1. Tamanho Variável de Pontos (Efeito de Bolha)

Passe uma função personalizada ou mapeamento de valores de dados para symbolSize para codificar uma terceira métrica quantitativa no tamanho do ponto:

option = {
    tooltip: {
        trigger: 'item',
        formatter: function (param) {
            return 'Gasto: $' + param.data[0] + 'k
' +
                   'Receita: $' + param.data[1] + 'k
' +
                   'ROAS: ' + param.data[2] + 'x';
        }
    },
    xAxis: {
        type: 'value',
        name: 'Gasto'
    },
    yAxis: {
        type: 'value',
        name: 'Receita'
    },
    series: [
        {
            name: 'Campanhas',
            type: 'scatter',
            symbolSize: function (data) {
                return data[2] * 5; // Escala o tamanho da bolha com base na terceira variável
            },
            data: [
                [15, 120, 8.0],
                [25, 180, 7.2],
                [10, 50, 5.0],
                [40, 380, 9.5],
                [30, 210, 7.0]
            ],
            itemStyle: {
                color: '#5470c6',
                opacity: 0.7
            }
        }
    ]
};

Ajuste fino do layout e do estilo

Controlar a opacidade dos marcadores e adicionar linhas de tendência alvo evita que agrupamentos densos se transformem em manchas visuais sólidas.

1. Marcadores translúcidos e estilização de agrupamentos

Aplicar traços de borda e preenchimentos semitransparentes mantém os pontos de dados sobrepostos visíveis dentro de agrupamentos de alta densidade:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        scale: true // Escala automática dos limites mínimo e máximo do eixo para ajustar bem aos dados
    },
    yAxis: {
        type: 'value',
        scale: true
    },
    series: [
        {
            type: 'scatter',
            symbolSize: 16,
            itemStyle: {
                color: 'rgba(84, 112, 198, 0.6)',
                borderColor: '#5470c6',
                borderWidth: 2
            },
            data: [
                [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
                [155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
                [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2]
            ]
        }
    ]
};

Melhores práticas estratégicas

• Habilite scale: true nos eixos numéricos: Defina scale: true em ambos os eixos numéricos para que o gráfico faça zoom automático na faixa de dados relevante, em vez de forçar a origem em (0,0).
• Use transparência de preenchimento para sobreposições: Ao plotar centenas de pontos, reduza a opacidade do preenchimento para cerca de 0,4–0,6 para que as áreas densas de sobreposição pareçam naturalmente mais escuras.
• Forneça rótulos de eixos contextualizados: Sempre rotule os eixos X e Y explicitamente com unidades de medida (por exemplo, “$ em Milhares” ou “Latência em ms”) para que os valores sejam imediatamente claros sem precisar verificar as dicas.