Gráfico de barras agrupadas: comparación horizontal de múltiples series

Comparar métricas secundarias a través de nombres de categorías largos se maneja mejor con unGráfico de barras agrupadas. Al colocar barras horizontales relacionadas lado a lado a lo largo del eje Y, este diseño permite a los usuarios escanear métricas de rendimiento a través de múltiples categorías sin sacrificar la legibilidad de las etiquetas. Sirve como una opción efectiva para desgloses presupuestarios de varios años, comparaciones de características de productos o benchmarks de ventas en múltiples regiones, donde las etiquetas de categoría requieren un espacio horizontal amplio.

La mecánica de las barras horizontales agrupadas

Al igual que los grupos de columnas verticales, los grupos de barras horizontales se crean asignando etiquetas categóricas idénticas al eje Y mientras se definen múltiples series contype: 'bar'. El motor de renderizado maneja automáticamente el agrupamiento visual, desplazando cada serie dentro del bloque de categoría a lo largo del plano vertical.

1. Configuración esencial

Para crear un gráfico de barras agrupadas, asigne sus categorías discretas ayAxis.data, especifique unxAxis, e incluya múltiples series de barras:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    legend: {
        data: ['Asignado 2025', 'Asignado 2026']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Investigación y desarrollo', 'Marketing y ventas', 'Soporte al cliente', 'Operaciones']
    },
    series: [
        {
            name: 'Asignado 2025',
            type: 'bar',
            data: [320, 450, 210, 380]
        },
        {
            name: 'Asignado 2026',
            type: 'bar',
            data: [380, 490, 240, 410]
        }
    ]
};

Técnicas estructurales avanzadas

Ampliar su gráfico a tres o más series proporciona información más rica, siempre que la densidad visual siga siendo fácil de leer.

1. Estilo multi-métrico con gradientes de color personalizados

Aplicar paletas de color únicas o rellenos sutiles con degradado a lo largo de las series horizontales para mantener grupos distintos legibles:

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

Ajuste fino del diseño y el espaciado

Gestionar los espacios entre las barras a lo largo del eje Y vertical es clave para mantener una separación limpia entre los bloques de categorías.

1. Espacios internos verticales y márgenes de categoría

Ajuste los atributos de espaciado para mantener las barras de series agrupadas de forma ordenada sin que se mezclen con los grupos de categorías vecinas:

option = {
    grid: {
        left: '20%',
        right: '10%',
        containLabel: true
    },
    leyenda: {
        datos: ['Base', 'Optimizado']
    },
    ejeX: {
        tipo: 'valor'
    },
    ejeY: {
        tipo: 'categoría',
        datos: ['Tiempo de respuesta de la API', 'Duración de la consulta de la base de datos', 'Tiempo de carga de activos']
    },
    series: [
        {
            nombre: 'Base',
            tipo: 'barra',
            barGap: '15%',            // Espacio entre barras dentro de la misma categoría
            barCategoryGap: '40%',    // Espacio entre bloques de categorías
            datos: [350, 180, 520]
        },
        {
            nombre: 'Optimizado',
            tipo: 'barra',
            datos: [120, 65, 210]
        }
    ]
};

Prácticas Estratégicas Mejores

• Mantenga los grupos enfocados: Manténgase en un máximo de 3 o 4 series por categoría. Más allá de esto, los gráficos apilados o de múltiples paneles son más adecuados para evitar el desorden visual vertical.
• Asigne un margen adecuado en el eje Y: Los gráficos horizontales agrupados ocupan una altura vertical considerable. Aumente la altura del contenedor o ajuste grid.left para evitar que el texto se corte.
• Orden de métricas consistente: Asegúrese de que el orden de las series en su código coincida con el flujo natural de su narrativa (por ejemplo, año histórico primero, año actual segundo).