Gráfico de Barras Agrupadas: Comparação Horizontal de Múltiplas Séries

Comparar métricas secundárias entre nomes de categorias longos é melhor tratado com umGráfico de Barras Agrupadas. Ao posicionar barras horizontais relacionadas lado a lado ao longo do eixo Y, este layout permite que os usuários analisem métricas de desempenho em múltiplas categorias sem comprometer a legibilidade dos rótulos. Serve como uma escolha eficaz para análises orçamentárias de vários anos, comparações de recursos de produtos ou benchmarks de vendas em múltiplas regiões, onde os rótulos das categorias exigem amplo espaço horizontal.

Os Mecanismos das Barras Horizontais Agrupadas

Como os grupos de colunas verticais, os grupos de barras horizontais são criados atribuindo rótulos categóricos idênticos ao eixo Y, enquanto se definem múltiplas séries comtype: 'bar'. O motor de renderização trata o agrupamento visual automaticamente, deslocando cada série dentro do bloco da categoria ao longo do plano vertical.

1. Configuração Básica

Para criar um gráfico de barras agrupadas, atribua suas categorias discretas ayAxis.data, especifique umxAxis, e inclua múltiplas séries de barras:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    legend: {
        data: ['Alocado em 2025', 'Alocado em 2026']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Pesquisa e Desenvolvimento', 'Marketing e Vendas', 'Suporte ao Cliente', 'Operações']
    },
    series: [
        {
            name: 'Alocado em 2025',
            type: 'bar',
            data: [320, 450, 210, 380]
        },
        {
            name: 'Alocado em 2026',
            type: 'bar',
            data: [380, 490, 240, 410]
        }
    ]
};

Técnicas Estruturais Avançadas

Expandir seu gráfico para três ou mais séries fornece insights mais ricos, desde que a densidade visual permaneça fácil de ler.

1. Estilização de Múltiplas Métricas com Gradientes de Cor Personalizados

Aplique paletas de cor únicas ou preenchimentos sutis em degradê em séries horizontais para manter grupos distintos legíveis:

option = {
    legend: {
        data: ['Vendas do Q1', 'Vendas do Q2', 'Vendas do Q3']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Região Norte', 'Região Sul', 'Região Leste', 'Região Oeste']
    },
    series: [
        {
            name: 'Vendas do Q1',
            type: 'bar',
            data: [120, 200, 150, 80],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [0, 4, 4, 0]
            }
        },
        {
            name: 'Vendas do Q2',
            type: 'bar',
            data: [140, 220, 170, 95],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [0, 4, 4, 0]
            }
        },
        {
            name: 'Vendas do Q3',
            type: 'bar',
            data: [180, 250, 190, 110],
            itemStyle: {
                color: '#fac858',
                borderRadius: [0, 4, 4, 0]
            }
        }
    ]
};

Ajuste Fino do Layout e Espaçamento

Gerenciar os espaçamentos entre as barras ao longo do eixo Y vertical é essencial para manter uma separação clara entre os blocos de categorias.

1. Espaçamentos Internos Verticais e Margens de Categoria

Ajuste os atributos de espaçamento para manter as barras das séries agrupadas de forma organizada, sem se fundirem com grupos de categorias vizinhas:

option = {
    grid: {
        left: '20%',
        right: '10%',
        containLabel: true
    },
    legend: {
        data: ['Baseline', 'Otimizado']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Tempo de Resposta da API', 'Duração da Consulta ao Banco de Dados', 'Tempo de Carregamento de Ativos']
    },
    series: [
        {
            name: 'Baseline',
            type: 'bar',
            barGap: '15%',            // Espaço entre barras dentro da mesma categoria
            barCategoryGap: '40%',    // Espaço entre blocos de categoria
            data: [350, 180, 520]
        },
        {
            name: 'Otimizado',
            type: 'bar',
            data: [120, 65, 210]
        }
    ]
};

Melhores Práticas Estratégicas

• Mantenha os Grupos Focados: Mantenha um máximo de 3 ou 4 séries por categoria. Além disso, gráficos empilhados ou de múltiplos painéis são mais adequados para evitar o acúmulo visual vertical.
• Atribua Margem Adequada ao Eixo Y: Gráficos horizontais agrupados ocupam uma altura vertical significativa. Aumente a altura do contêiner ou ajuste grid.left para evitar a truncagem do texto.
• Ordem Consistente de Métricas: Certifique-se de que a ordem das séries no seu código corresponda ao fluxo natural da sua narrativa (por exemplo, ano histórico primeiro, ano atual em segundo lugar).