Gráfico de Barras: Disposição Horizontal e Otimização de Rótulos

Horizontal Gráficos de Barrassão ideais para exibir dados de classificação, nomes de categorias longos ou métricas de progresso. Ao estender as barras ao longo do eixo X, essa estrutura visual oferece bastante espaço horizontal para os rótulos das categorias, eliminando a necessidade de inclinar ou truncar o texto. Seja você construindo tabelas de classificação dos 10 principais, análises de respostas de pesquisas ou comparações de desempenho horizontais, os gráficos de barras garantem legibilidade clara em telas de desktop e móveis.

Os Mecanismos das Barras Horizontais

No Apache ECharts, gráficos de colunas e gráficos de barras usam exatamente o mesmo 'bar' tipo de série. A transição para uma disposição horizontal ocorre ao atribuir os dados da categoria diretamente ao eixo vertical (yAxis) e definindo o eixo horizontal (xAxis) como um eixo de valor numérico. O motor do gráfico gira a direção de renderização, desenhando as barras horizontalmente da esquerda para a direita.

1. Configuração Básica

Para criar um gráfico de barras horizontal básico, defina type: 'category' no yAxis e forneça seu array de dados, enquanto define type: 'value' no xAxis:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Brasil', 'Indonésia', 'EUA', 'Índia', 'China']
    },
    series: [
        {
            type: 'bar',
            data: [214, 273, 331, 1380, 1411]
        }
    ]
};

Técnicas Estruturais Avançadas

Gráficos de barras horizontais suportam múltiplos grupos de dados, realce direcionado e tratamentos personalizados de cantos para designs modernos de painéis.

1. Comparação Horizontal de Múltiplas Séries

Coloque múltiplos objetos no série array para criar barras horizontais agrupadas por rótulo de categoria:

opcao = {
    legenda: {
        dados: ['Meta 2025', 'Real 2025']
    },
    eixoX: {
        tipo: 'valor'
    },
    eixoY: {
        tipo: 'categoria',
        dados: ['Projeto A', 'Projeto B', 'Projeto C', 'Projeto D']
    },
    série: [
        {
            nome: 'Meta 2025',
            tipo: 'barra',
            dados: [80, 95, 70, 85]
        },
        {
            nome: 'Real 2025',
            tipo: 'barra',
            dados: [85, 90, 75, 92]
        }
    ]
};

2. Pontas arredondadas e estilização de destaque

Aplicar cantos direitos arredondados usando borderRadius nas barras horizontais (especificando [superior-direito, inferior-direito, inferior-esquerdo, superior-esquerdo]):

opcao = {
    eixoX: {
        tipo: 'valor'
    },
    eixoY: {
        tipo: 'categoria',
        dados: ['Pesquisa Direta', 'Campanhas de E-mail', 'Mídias Sociais', 'Pesquisa Paga']
    },
    série: [
        {
            tipo: 'barra',
            dados: [
                120,
                200,
                {
                    valor: 450,
                    estiloItem: {
                        cor: '#fac858'
                    }
                },
                280
            ],
            estiloItem: {
                cor: '#91cc75',
                borderRadius: [0, 6, 6, 0] // Arredondar apenas as pontas direitas
            }
        }
    ]
};

Ajuste fino do layout e espaçamento

Como os rótulos de categoria horizontais variam em comprimento de texto, ajustar as margens esquerdas e a alinhamento dos rótulos evita o corte dos rótulos.

1. Margens da grade do contêiner

Use o bloco de configuração grid para alocar espaço suficiente para rótulos longos do eixo Y:

opcao = {
    grade: {
        esquerda: '15%',  // Aumentar a margem esquerda para texto longo de categoria
        direita: '8%',
        inferior: '10%',
        contemRótulo: true
    },
    eixoX: {
        tipo: 'valor'
    },
    eixoY: {
        tipo: 'categoria',
        dados: [
            'Modernização da Infraestrutura Empresarial',
            'Migração para a Nuvem Fase 2',
            'Otimização do Banco de Dados',
            'Reconstrução do Gateway de API'
        ]
    },
    série: [
        {
            tipo: 'barra',
            dados: [75, 60, 90, 40],
            larguraBarra: '50%'
        }
    ]
};

Práticas recomendadas estratégicas

• Organize os dados intencionalmente: Organize as barras horizontais em ordem crescente ou decrescente sempre que possível. Listas classificadas tornam os melhores desempenhos imediatamente óbvios para os leitores.
• Use containLabel: true: Sempre inclua containLabel: true dentro do grade configuração para evitar que títulos longos de categorias transbordem da borda da tela.
• Rótulos de Valor Direto: Para classificações limpas, considere exibir os valores de dados diretamente na extremidade de cada barra usando label: { show: true, position: 'right' } e ocultando completamente o eixo numérico inferior.