Гистограмма: горизонтальная компоновка и оптимизация меток

Горизонтальный Гистограммы идеально подходят для отображения данных о рейтингах, длинных названиях категорий или метриках прогресса. Расширяя полосы вдоль оси X, эта визуальная структура предоставляет меткам категорий достаточное горизонтальное пространство, устраняя необходимость наклонять или обрезать текст. Независимо от того, создаете ли вы таблицы лидеров в топ-10, разбивку ответов на опросы или горизонтальные сравнения производительности, гистограммы обеспечивают четкую читаемость на экранах как десктопов, так и мобильных устройств.

Механика горизонтальных полос

В Apache ECharts столбчатые и гистограммные диаграммы используют один и тот же тип серии 'bar' типа серии. Переход к горизонтальной компоновке происходит за счет прямого назначения данных категорий вертикальной оси (yAxis), а горизонтальная ось (xAxis) определяется как числовая ось значений. Движок диаграмм поворачивает направление отрисовки, рисуя полосы горизонтально слева направо.

1. Основная настройка

Чтобы создать базовую горизонтальную гистограмму, установите type: 'category' на оси yAxis и передайте массив ваших данных, при этом установив type: 'value' на оси xAxis:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Бразилия', 'Индонезия', 'США', 'Индия', 'Китай']
    },
    series: [
        {
            type: 'bar',
            data: [214, 273, 331, 1380, 1411]
        }
    ]
};

Расширенные структурные техники

Горизонтальные гистограммы поддерживают несколько групп данных, целевое выделение и кастомные обработки углов для современных дизайнов панелей управления.

1. Горизонтальное сравнение нескольких серий

Разместите несколько объектов в серия массив для создания группированных горизонтальных столбцов для каждого метки категории:

option = {
    legend: {
        data: ['Цель на 2025', 'Фактически в 2025']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Проект A', 'Проект B', 'Проект C', 'Проект D']
    },
    series: [
        {
            name: 'Цель на 2025',
            type: 'bar',
            data: [80, 95, 70, 85]
        },
        {
            name: 'Фактически в 2025',
            type: 'bar',
            data: [85, 90, 75, 92]
        }
    ]
};

2. Закруглённые концы и стили выделения

Применить закруглённые правые углы с помощьюborderRadius на горизонтальных столбцах (указав[верхний-правый, нижний-правый, нижний-левый, верхний-левый]):

option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Прямой поиск', 'Рассылки по электронной почте', 'Социальные сети', 'Платный поиск']
    },
    series: [
        {
            type: 'bar',
            data: [
                120,
                200,
                {
                    value: 450,
                    itemStyle: {
                        color: '#fac858'
                    }
                },
                280
            ],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [0, 6, 6, 0] // Закруглить только правые концы
            }
        }
    ]
};

Тонкая настройка макета и интервалов

Поскольку горизонтальные метки категорий различаются по длине текста, настройка левых отступов и выравнивания меток предотвращает обрезку меток.

1. Отступы сетки контейнера

Используйте блок конфигурацииgrid для выделения достаточного пространства для длинных меток оси Y:

option = {
    grid: {
        left: '15%',  // Увеличить левый отступ для длинного текста категории
        right: '8%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: [
            'Модернизация корпоративной инфраструктуры',
            'Переход в облако, этап 2',
            'Оптимизация базы данных',
            'Перепроектирование шлюза API'
        ]
    },
    series: [
        {
            type: 'bar',
            data: [75, 60, 90, 40],
            barWidth: '50%'
        }
    ]
};

Стратегические лучшие практики

• Сознательно сортируйте данные: Располагайте горизонтальные столбцы в порядке возрастания или убывания, когда это возможно. Упорядоченные списки сразу показывают лучших участников читателям.
• ИспользуйтеcontainLabel: true: Всегда включите containLabel: true внутри сетка конфигурация, чтобы предотвратить переполнение длинных названий категорий за край холста.
• Прямые метки значений: Для чистых таблиц лидеров рассмотрите возможность отображения значений данных непосредственно в конце каждой полосы с помощью label: { show: true, position: 'right' } и полностью скрывая числовую нижнюю ось.