Gráfico de Colunas Agrupadas: Dados Multisserie e Espaçamento

Na análise de dados e relatórios empresariais, o Gráfico de Colunas Agrupadas (também conhecido como Gráfico de Colunas Agrupadas) é a ferramenta principal para comparação lado a lado em múltiplas dimensões. Enquanto um gráfico de colunas padrão avalia uma única métrica por categoria, os gráficos de colunas agrupadas posicionam conjuntos de dados relacionados um ao lado do outro dentro da mesma categoria. Isso permite uma avaliação visual imediata de tendências ao longo do tempo, desempenho entre equipes ou desempenho multimeétrico.

Os Mecanismos das Colunas Agrupadas

Os gráficos de colunas agrupadas operam em um sistema de coordenadas compartilhado, onde o eixo horizontal representa categorias discretas e o eixo vertical lida com valores contínuos. O agrupamento é alcançado declarando múltiplos objetos de série que compartilham a mesma alinhamento de categoria no eixo horizontal. O motor de layout calcula automaticamente o deslocamento necessário e renderiza cada série lado a lado dentro de seu bloco de categoria respectivo.

1. Configuração Básica

Para criar um gráfico de colunas agrupadas, defina um único eixo categórico e forneça múltiplos objetos de série com type: 'bar':

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    legend: {
        data: ['Receita 2025', 'Receita 2026']
    },
    xAxis: {
        type: 'category',
        data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Receita 2025',
            type: 'bar',
            data: [320, 332, 301, 334]
        },
        {
            name: 'Receita 2026',
            type: 'bar',
            data: [220, 182, 191, 234]
        }
    ]
};

Técnicas Estruturais Avançadas

Adicionar uma terceira ou quarta série aumenta a densidade do gráfico. Para manter a clareza, você pode ajustar finamente o estilo das séries, o espaçamento do layout e as pistas visuais.

1. Estilo Personalizado entre Grupos

Aplicar cores únicas, cantos arredondados ou estilos personalizados para itens facilita a distinção entre grupos individuais em gráficos densos:

option = {
    legend: {
        data: ['Produto A', 'Produto B', 'Produto C']
    },
    xAxis: {
        type: 'category',
        data: ['América do Norte', 'Europa', 'Ásia-Pacífico']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Produto A',
            type: 'bar',
            data: [150, 230, 224],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        },
        {
            name: 'Produto B',
            type: 'bar',
            data: [180, 200, 210],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [4, 4, 0, 0]
            }
        },
        {
            name: 'Produto C',
            type: 'bar',
            data: [120, 140, 190],
            itemStyle: {
                color: '#fac858',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Ajuste Fino do Layout e Espaçamento

O espaçamento é crítico ao trabalhar com colunas agrupadas. Controlar a distância entre colunas no mesmo grupo em comparação com a distância entre grupos de categorias separadas evita o acúmulo visual.

1. Espaçamentos Internos vs. Espaçamentos de Categoria

Use atributos de espaçamento para equilibrar a densidade do layout:

• barGap: Controla o espaço entre as colunas dentro do mesmo grupo de categoria (por exemplo, '20%' ou '0%' para colunas adjacentes).
• barCategoryGap: Controla o espaço entre diferentes grupos de categoria (por exemplo, '40%').
• barWidth: Controla a largura da coluna em relação ao espaço da categoria.

option = {
    legenda: {
        dados: ['Planejado', 'Real']
    },
    eixoX: {
        tipo: 'categoria',
        dados: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai']
    },
    eixoY: {
        tipo: 'valor'
    },
    série: [
        {
            nome: 'Planejado',
            tipo: 'barra',
            dados: [100, 120, 140, 160, 180],
            barGap: '10%',
            barCategoryGap: '35%'
        },
        {
            nome: 'Real',
            tipo: 'barra',
            dados: [95, 125, 130, 170, 175]
        }
    ]
};

Melhores Práticas Estratégicas

• Limite o Número de Grupos: Evite colocar mais de 3 a 4 colunas em um único grupo. Muitas colunas por categoria tornam o gráfico difícil de ler.
• Sempre inclua uma legenda: Como os gráficos agrupados usam cor para diferenciar variáveis, uma legenda clara no topo ou na parte inferior é obrigatória para contexto.
• Ordem de Agrupamento Consistente: Mantenha a sequência das séries consistente em todas as categorias (por exemplo, coloque sempre “2025” antes de “2026”).