Группированная столбчатая диаграмма: Горизонтальное сравнение нескольких рядов

Сравнение второстепенных метрик по длинным названиям категорий лучше всего осуществляется с помощьюГруппированная столбчатая диаграмма. Размещая связанные горизонтальные полосы рядом вдоль оси Y, этот макет позволяет пользователям просматривать показатели производительности по нескольким категориям, не жертвуя читаемостью меток. Он является эффективным выбором для многолетнего разбиения бюджета, сравнения функций продуктов или многорегиональных показателей продаж, где названия категорий требуют значительного горизонтального пространства.

Принципы построения группированных горизонтальных полос

Как и вертикальные группировки столбцов, группировки горизонтальных полос создаются путем назначения одинаковых категориальных меток оси Y при определении нескольких рядов с использованиемtype: 'bar'. Движок отображения автоматически обрабатывает визуальную группировку, смещая каждый ряд внутри блока категории вдоль вертикальной плоскости.

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

Чтобы построить группированную столбчатую диаграмму, назначьте дискретные категорииyAxis.data, укажите числовуюxAxis, и включите несколько рядов столбцов:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    legend: {
        data: ['Выделено в 2025', 'Выделено в 2026']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Исследования и разработка', 'Маркетинг и продажи', 'Поддержка клиентов', 'Операции']
    },
    series: [
        {
            name: 'Выделено в 2025',
            type: 'bar',
            data: [320, 450, 210, 380]
        },
        {
            name: 'Выделено в 2026',
            type: 'bar',
            data: [380, 490, 240, 410]
        }
    ]
};

Расширенные структурные методы

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

1. Многофункциональный стиль с пользовательскими градиентами цветов

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

option = {
    legend: {
        data: ['Продажи Q1', 'Продажи Q2', 'Продажи Q3']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Северный регион', 'Южный регион', 'Восточный регион', 'Западный регион']
    },
    series: [
        {
            name: 'Продажи Q1',
            type: 'bar',
            data: [120, 200, 150, 80],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [0, 4, 4, 0]
            }
        },
        {
            name: 'Продажи Q2',
            type: 'bar',
            data: [140, 220, 170, 95],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [0, 4, 4, 0]
            }
        },
        {
            name: 'Продажи Q3',
            type: 'bar',
            data: [180, 250, 190, 110],
            itemStyle: {
                color: '#fac858',
                borderRadius: [0, 4, 4, 0]
            }
        }
    ]
};

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

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

1. Вертикальные внутренние интервалы и отступы категорий

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

option = {
    grid: {
        left: '20%',
        right: '10%',
        containLabel: true
    },
    legend: {
        data: ['Базовая линия', 'Оптимизировано']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Время отклика API', 'Длительность запроса к базе данных', 'Время загрузки ресурсов']
    },
    series: [
        {
            name: 'Базовая линия',
            type: 'bar',
            barGap: '15%',            // Промежуток между столбцами в одной категории
            barCategoryGap: '40%',    // Промежуток между блоками категорий
            data: [350, 180, 520]
        },
        {
            name: 'Оптимизировано',
            type: 'bar',
            data: [120, 65, 210]
        }
    ]
};

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

• Сохраняйте фокус группировки: Ограничьтесь максимум 3 или 4 рядами на категорию. За этим пределом лучше использовать наложенные или многооконные диаграммы, чтобы избежать вертикальной визуальной перегруженности.
• Выделяйте достаточный отступ по оси Y: Группированные горизонтальные диаграммы занимают значительную вертикальную высоту. Увеличьте высоту контейнера или отрегулируйте grid.left чтобы избежать обрезания текста.
• Согласованность порядка метрик: Убедитесь, что порядок рядов в вашем коде соответствует естественному ходу вашей повествовательной линии (например, исторический год первым, текущий год вторым).