Gráfico de columnas: Configuración básica, estilo y diseño

En el ámbito de la visualización de datos y los informes, el Gráfico de columnas (un gráfico de barras vertical) es la herramienta principal para comparar categorías discretas sobre una o múltiples métricas. A diferencia de los gráficos de barras horizontales, que son adecuados para etiquetas de texto largas, los gráficos de columnas verticales utilizan diferencias de altura para comunicar de inmediato volumen, crecimiento y variación. Ya sea que esté mostrando cifras de ventas trimestrales, picos de utilización de CPU del servidor o tráfico web por canal, los gráficos de columnas proporcionan una referencia visual clara para métricas basadas en categorías.

La mecánica de las columnas verticales

En Apache ECharts, tanto los gráficos de barras horizontales como los gráficos de columnas verticales dependen del tipo de serie 'bar' series. El factor clave que crea un gráfico de columnas es colocar las etiquetas de categoría en el eje horizontal (xAxis) mientras se establece el eje vertical (yAxis) a valores numéricos. El motor del gráfico lee la matriz de datos y escala dinámicamente la altura de cada columna vertical en relación con la escala numérica.

1. Configuración esencial

Para crear un gráfico de columnas básico, defina un eje X basado en categorías y asigne su conjunto de datos a un objeto de serie con type: 'bar':

option = {
    xAxis: {
        type: 'category',
        data: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};

Técnicas estructurales avanzadas

Al construir paneles, los gráficos simples de una sola serie a menudo resultan insuficientes. ECharts ofrece opciones de sintaxis claras para gestionar comparaciones de múltiples series, dimensiones personalizadas y espaciado de diseño.

Comparación de múltiples series

Para comparar múltiples conjuntos de datos lado a lado (como los ingresos año tras año), agregue múltiples objetos dentro del array series array. El motor de diseño agrupará las columnas relacionadas por categoría a lo largo del eje X:

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

Estilos personalizados de columnas y resaltado individual

Puedes aplicar estilos globales a una serie completa o seleccionar puntos de datos específicos directamente. Esto es especialmente útil para resaltar eventos clave, valores atípicos o objetivos específicos.

• color: Establece el color de relleno (hex, RGB o gradientes lineales).
• borderRadius: Añade esquinas redondeadas a las columnas (por ejemplo, [5, 5, 0, 0] para las esquinas superiores).
• opacidad: Ajusta la transparencia de las columnas.
• shadowBlur & shadowColor: Añade elevación y sombras proyectadas a las columnas.

option = {
    xAxis: {
        type: 'category',
        data: ['Directo', 'Correo electrónico', 'Redes de anuncios', 'Anuncios de video', 'Búsqueda']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [
                320,
                332,
                {
                    value: 401,
                    // Resaltar una columna pico individual
                    itemStyle: {
                        color: '#ee6666',
                        borderRadius: [6, 6, 0, 0]
                    }
                },
                334,
                390
            ],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Ajuste fino del diseño y tamaño

Las dimensiones de las columnas y el espacio entre ellas afectan significativamente la legibilidad, especialmente al mostrar gráficos en pantallas responsivas o paneles densos.

1. Control del ancho y límites

Por defecto, el ancho de las columnas se ajusta dinámicamente según el contenedor del gráfico. Puedes controlar estas proporciones usando propiedades de tamaño:

• barWidth: Define el ancho de la columna usando píxeles fijos o un porcentaje del ancho de la categoría (por ejemplo, '30%').
• barMaxWidth: Establece un límite superior en el ancho para que las columnas no se estiren excesivamente en pantallas de gran formato.
• barMinHeight: Impone una altura mínima en píxeles para que los valores cercanos a cero sigan siendo clicables y visibles.

2. Espaciado de columnas y pistas de fondo

Para dar a tus columnas un aspecto moderno de panel de control, ajusta los espacios interiores o habilita pistas de fondo de altura completa:

option = {
    xAxis: {
        type: 'category',
        data: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie']
    },
    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]
            }
        }
    ]
};

Mejores prácticas estratégicas

• Mantén el espaciado equilibrado:Evita establecerbarWidth demasiado ancho (por encima del 60%) para evitar que el diseño visual se sienta abarrotado.
• Decisión entre horizontal y vertical:Utiliza gráficos de columnas cuando las etiquetas de categoría son cortas (por ejemplo, meses, trimestres, códigos). Si tus etiquetas son descripciones largas o nombres, considera intercambiar los datos de categoría alejeY para crear un gráfico de barras horizontal en su lugar.
• Integridad de la línea de base cero:Mantén siempre el eje numérico comenzando en cero (0). Truncar la escala inferior en los gráficos de columnas distorsiona las proporciones de altura y engaña a los espectadores.