Gráfico de Colunas: Configuração Básica, Estilo e Layout

No domínio da visualização de dados e relatórios, o Gráfico de Colunas (um gráfico de barras vertical) é a ferramenta principal para comparar categorias discretas em uma ou múltiplas métricas. Diferentemente dos gráficos de barras horizontais, que são adequados para rótulos longos de texto, os gráficos de colunas verticais utilizam diferenças de altura para comunicar instantaneamente volume, crescimento e variação. Seja você exibindo dados de vendas trimestrais, picos de utilização da CPU do servidor ou tráfego web por canal, os gráficos de colunas fornecem um padrão visual claro para métricas baseadas em categorias.

Os Mecanismos das Colunas Verticais

No Apache ECharts, tanto os gráficos de barras horizontais quanto os gráficos de colunas verticais dependem do tipo de série 'bar' série. O fator-chave que cria um gráfico de colunas é posicionar rótulos de categoria no eixo horizontal (xAxis) enquanto define o eixo vertical (yAxis) para valores numéricos. O motor do gráfico lê a matriz de dados e escala dinamicamente a altura de cada coluna vertical em relação à escala numérica.

1. Configuração Básica

Para criar um gráfico de colunas básico, defina um eixo X baseado em categorias e mapeie seu conjunto de dados para um objeto de série com type: 'bar':

option = {
    xAxis: {
        type: 'category',
        data: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};

Técnicas Estruturais Avançadas

Ao construir painéis, gráficos simples de uma única série muitas vezes são insuficientes. O ECharts oferece opções de sintaxe limpa para gerenciar comparações de múltiplas séries, dimensões personalizadas e espaçamento de layout.

Comparação de Múltiplas Séries

Para comparar múltiplos conjuntos de dados lado a lado (como receita ano a ano), adicione múltiplos objetos dentro do array series array. O motor de layout agrupará colunas relacionadas por categoria ao longo do eixo X:

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

Estilos Personalizados de Colunas e Destaque Individual

Você pode aplicar estilos globais a uma série inteira ou direcionar pontos de dados específicos diretamente. Isso é especialmente útil para destacar eventos importantes, valores atípicos ou metas específicas.

• cor: Define a cor de preenchimento (hex, RGB ou gradientes lineares).
• borderRadius: Adiciona cantos arredondados às colunas (por exemplo, [5, 5, 0, 0] para os cantos superiores).
• opacidade: Ajusta a transparência das colunas.
• shadowBlur & shadowColor: Adiciona elevação e sombras projetadas às colunas.

option = {
    xAxis: {
        type: 'category',
        data: ['Direto', 'E-mail', 'Redes de Anúncios', 'Anúncios de Vídeo', 'Pesquisa']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [
                320,
                332,
                {
                    value: 401,
                    // Destaque de uma coluna de pico única
                    itemStyle: {
                        color: '#ee6666',
                        borderRadius: [6, 6, 0, 0]
                    }
                },
                334,
                390
            ],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Ajuste fino do Layout e Tamanho

As dimensões das colunas e o espaçamento impactam significativamente a legibilidade, especialmente ao exibir gráficos em telas responsivas ou painéis densos.

1. Controle de Largura e Limites

Por padrão, as larguras das colunas escalonam dinamicamente com base no contêiner do gráfico. Você pode controlar essas proporções usando propriedades de dimensionamento:

• barWidth: Define a largura da coluna usando pixels fixos ou uma porcentagem da largura da categoria (por exemplo, '30%').
• barMaxWidth: Define um limite superior para a largura, para que as colunas não se estiquem excessivamente em telas widescreen.
• barMinHeight: Força uma altura mínima em pixels para que valores próximos de zero permaneçam clicáveis e visíveis.

2. Espaçamento das Colunas e Traços de Fundo

Para dar às suas colunas uma aparência moderna de painel, ajuste os espaços internos ou habilite traços de fundo de altura total:

option = {
    xAxis: {
        type: 'category',
        data: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            barWidth: '40%',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.15)',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Melhores Práticas Estratégicas

• Mantenha o Espaçamento Equilibrado: Evite definir barWidth muito largo (acima de 60%) para evitar que a disposição visual pareça lotada.
• Decisão entre Horizontal e Vertical: Use gráficos de colunas quando os rótulos das categorias forem curtos (por exemplo, meses, trimestres, códigos). Se seus rótulos forem descrições longas ou nomes, considere trocar os dados da categoria para o eixoY para criar um gráfico de barras horizontal em vez disso.
• Integridade da Linha de Base Zero: Mantenha sempre o eixo numérico começando em zero (0). Cortar a escala inferior nos gráficos de colunas distorce as proporções de altura e engana os espectadores.