Gráfico de barras: diseño horizontal y optimización de etiquetas

HorizontalGráficos de barrasson ideales para mostrar datos de clasificación, nombres de categorías alargados o métricas de progreso. Al extender las barras a lo largo del eje X, esta estructura visual proporciona suficiente espacio horizontal para las etiquetas de categoría, eliminando la necesidad de inclinar o acortar el texto. Ya sea que esté creando tablas de clasificación de los 10 primeros, desgloses de respuestas de encuestas o comparaciones de rendimiento horizontales, los gráficos de barras ofrecen una legibilidad clara en pantallas tanto de escritorio como móviles.

La mecánica de las barras horizontales

En Apache ECharts, los gráficos de columnas y de barras utilizan exactamente el mismo'bar'tipo de serie. La transición a un diseño horizontal ocurre asignando los datos de categoría directamente al eje vertical (yAxis) y definiendo el eje horizontal (xAxis) como un eje de valores numéricos. El motor del gráfico rota la dirección de renderizado, dibujando las barras horizontalmente de izquierda a derecha.

1. Configuración esencial

Para crear un gráfico de barras horizontal básico, establezcatype: 'category' en elyAxis y proporcione su matriz de datos, mientras establecetype: 'value' en elxAxis:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Brasil', 'Indonesia', 'EE. UU.', 'India', 'China']
    },
    series: [
        {
            type: 'bar',
            data: [214, 273, 331, 1380, 1411]
        }
    ]
};

Técnicas estructurales avanzadas

Los gráficos de barras horizontales admiten múltiples grupos de datos, resaltado dirigido y tratamientos personalizados de esquinas para diseños modernos de paneles.

1. Comparación horizontal múltiple de series

Coloque múltiples objetos en elseries matriz para crear barras horizontales agrupadas por etiqueta de categoría:

option = {
    leyenda: {
        datos: ['Objetivo 2025', 'Real 2025']
    },
    ejeX: {
        tipo: 'valor'
    },
    ejeY: {
        tipo: 'categoría',
        datos: ['Proyecto A', 'Proyecto B', 'Proyecto C', 'Proyecto D']
    },
    series: [
        {
            nombre: 'Objetivo 2025',
            tipo: 'barra',
            datos: [80, 95, 70, 85]
        },
        {
            nombre: 'Real 2025',
            tipo: 'barra',
            datos: [85, 90, 75, 92]
        }
    ]
};

2. Bordes redondeados y estilo de resaltado

Aplicar esquinas redondeadas en el lado derecho usandoborderRadius en las barras horizontales (especificando[superior-derecho, inferior-derecho, inferior-izquierdo, superior-izquierdo]):

option = {
    ejeX: {
        tipo: 'valor'
    },
    ejeY: {
        tipo: 'categoría',
        datos: ['Búsqueda directa', 'Campañas de correo electrónico', 'Redes sociales', 'Búsqueda pagada']
    },
    series: [
        {
            tipo: 'barra',
            datos: [
                120,
                200,
                {
                    valor: 450,
                    estiloElemento: {
                        color: '#fac858'
                    }
                },
                280
            ],
            estiloElemento: {
                color: '#91cc75',
                borderRadius: [0, 6, 6, 0] // Redondear solo las esquinas del lado derecho
            }
        }
    ]
};

Ajuste fino del diseño y el espaciado

Dado que las etiquetas de categoría horizontales varían en longitud de texto, ajustar los márgenes izquierdos y la alineación de las etiquetas evita que se corten.

1. Márgenes de la cuadrícula del contenedor

Utilice el bloque de configuracióngrid para asignar suficiente espacio a las etiquetas largas del eje Y:

option = {
    cuadrícula: {
        izquierda: '15%',  // Aumentar el margen izquierdo para texto largo de categoría
        derecha: '8%',
        abajo: '10%',
        contieneEtiqueta: true
    },
    ejeX: {
        tipo: 'valor'
    },
    ejeY: {
        tipo: 'categoría',
        datos: [
            'Modernización de la infraestructura empresarial',
            'Migración a la nube Fase 2',
            'Optimización de bases de datos',
            'Rediseño de la puerta de enlace de API'
        ]
    },
    series: [
        {
            tipo: 'barra',
            datos: [75, 60, 90, 40],
            anchoBarra: '50%'
        }
    ]
};

Prácticas recomendadas estratégicas

• Organice los datos intencionalmente:Organice las barras horizontales en orden ascendente o descendente siempre que sea posible. Las listas clasificadas hacen que los mejores resultados sean inmediatamente evidentes para los lectores.
• UsecontainLabel: true: Siempre incluir containLabel: true dentro del cuadrícula configuración para evitar que los títulos largos de categoría se salgan del borde de la superficie de dibujo.
• Etiquetas de valor directo: Para tablas de clasificación limpias, considere mostrar los valores de datos directamente al final de cada barra utilizando label: { show: true, position: 'right' } y ocultando completamente el eje numérico inferior.