Gráfico de Caixa: Distribuição Estatística e Detecção de Outliers

Quando você precisa analisar a dispersão dos dados e identificar pontos de dados incomuns entre grupos, o Gráfico de Caixa (ou Gráfico de Caixa e Bigode) é a ferramenta visual estatística padrão. Ao resumir dados contínuos em cinco números-chave — Mínimo, Primeiro Quartil (Q1), Mediana (Q2), Terceiro Quartil (Q3) e Máximo — os gráficos de caixa revelam assimetria, variabilidade e outliers extremos de primeira vista, sem encher a tela com dados brutos.

O Funcionamento dos Gráficos de Caixa

No Apache ECharts, caixas estatísticas são renderizadas usando type: 'boxplot'. Cada entrada de conjunto de dados espera um array numérico de 5 elementos ordenado como [Mínimo, Q1, Mediana, Q3, Máximo]. O ECharts também inclui uma ferramenta integrada de preparação de dados para calcular esses limites estatísticos diretamente a partir de números brutos.

1. Configuração Básica

Para construir um gráfico de caixa básico, mapeie categorias ao longo do eixo X e forneça arrays de resumo de cinco números calculados dentro dos seus dados da série:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'category',
        data: ['Categoria 1', 'Categoria 2', 'Categoria 3', 'Categoria 4', 'Categoria 5']
    },
    yAxis: {
        type: 'value',
        name: 'Valor da Distribuição'
    },
    series: [
        {
            name: 'Gráfico de Caixa',
            type: 'boxplot',
            data: [
                [655, 850, 940, 980, 1070], // [Mín, Q1, Mediana, Q3, Máx]
                [760, 800, 845, 885, 960],
                [780, 840, 855, 880, 940],
                [720, 767, 815, 865, 920],
                [890, 920, 950, 970, 990]
            ]
        }
    ]
};

Técnicas Estruturais Avançadas

Você pode sobrepor pontos de dispersão de outliers ou criar gráficos de caixa horizontais para categorias com nomes longos.

1. Layout de Gráfico de Caixa Horizontal

Defina yAxis como escala de categoria e xAxis como escala de valor numérico para girar os gráficos de caixa horizontalmente para melhor legibilidade dos rótulos:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Servidor Alpha', 'Servidor Beta', 'Servidor Gama']
    },
    series: [
        {
            name: 'Latência (ms)',
            type: 'boxplot',
            data: [
                [12, 18, 22, 28, 35],
                [15, 24, 30, 38, 48],
                [8, 12, 15, 20, 27]
            ],
            itemStyle: {
                color: '#e0f2fe',
                borderColor: '#0284c7',
                borderWidth: 2
            }
        }
    ]
};

Ajuste fino de layout e estilo

Cores personalizadas de caixas, larguras de bigodes e formatação da linha da mediana melhoram a distinção visual em layouts complexos de painéis.

1. Preenchimento de caixa personalizado e estilo de pontos fora da curva

Estile as bordas da caixa, as cores de preenchimento e as propriedades da linha do bigode para corresponder ao seu design de interface:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Grupo A', 'Grupo B', 'Grupo C']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Distribuição de Pontuações',
            type: 'boxplot',
            boxWidth: ['20%', '50%'], // Limites de largura de caixa responsiva
            itemStyle: {
                color: '#f0fdf4',
                borderColor: '#16a34a',
                borderWidth: 2
            },
            data: [
                [40, 55, 68, 82, 95],
                [50, 62, 75, 88, 98],
                [30, 45, 58, 70, 85]
            ]
        }
    ]
};

Melhores práticas estratégicas

• Verifique novamente a ordem dos resumos:Verifique se os valores do array seguem a sequência estrita:[Mínimo, Q1, Mediana, Q3, Máximo]. A ordem incorreta causará falhas na renderização.
• Sobreponha pontos fora da curva com uma série de dispersão:Use uma segundasérie de dispersãosérie sobre o boxplot para exibir pontos fora da curva estatísticos extremos como pontos de dados individuais.
• Ajuste o preenchimento da grade:Garanta um preenchimento adequadogrid.bottomougrid.leftde preenchimento para que nomes longos de categorias não entrem em conflito com as linhas dos bigodes.