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

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

Механика группированных столбцов

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

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

Чтобы построить группированную столбчатую диаграмму, определите одну категориальную ось и предоставьте несколько объектов рядов с type: 'bar':

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    legend: {
        data: ['Выручка 2025', 'Выручка 2026']
    },
    xAxis: {
        type: 'category',
        data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Выручка 2025',
            type: 'bar',
            data: [320, 332, 301, 334]
        },
        {
            name: 'Выручка 2026',
            type: 'bar',
            data: [220, 182, 191, 234]
        }
    ]
};

Продвинутые структурные методы

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

1. Индивидуальная настройка стиля в группах

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

option = {
    legend: {
        data: ['Продукт A', 'Продукт B', 'Продукт C']
    },
    xAxis: {
        type: 'category',
        data: ['Северная Америка', 'Европа', 'Азиатско-Тихоокеанский регион']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Продукт A',
            type: 'bar',
            data: [150, 230, 224],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        },
        {
            name: 'Продукт B',
            type: 'bar',
            data: [180, 200, 210],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [4, 4, 0, 0]
            }
        },
        {
            name: 'Продукт C',
            type: 'bar',
            data: [120, 140, 190],
            itemStyle: {
                color: '#fac858',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

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

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

1. Внутренние интервалы против интервалов между категориями

Используйте атрибуты интервалов для балансировки плотности компоновки:

• barGap: Управляет расстоянием между столбцами в пределах одной и той же группы категорий (например, '20%' или '0%' для соприкасающихся столбцов).
• barCategoryGap: Управляет пространством между различными группами категорий (например, '40%').
• barWidth: Управляет шириной столбца относительно пространства категории.

option = {
    legend: {
        data: ['План', 'Факт']
    },
    xAxis: {
        type: 'category',
        data: ['Янв', 'Фев', 'Мар', 'Апр', 'Май']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'План',
            type: 'bar',
            data: [100, 120, 140, 160, 180],
            barGap: '10%',
            barCategoryGap: '35%'
        },
        {
            name: 'Факт',
            type: 'bar',
            data: [95, 125, 130, 170, 175]
        }
    ]
};

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

• Ограничьте количество групп: Избегайте размещения более чем 3–4 столбцов в одной группе. Слишком много столбцов на категорию делает график трудным для просмотра.
• Всегда включайте легенду: Поскольку группированные диаграммы используют цвет для различения переменных, четкая легенда сверху или снизу обязательна для контекста.
• Последовательный порядок групп: Сохраняйте последовательность рядов одинаковой во всех категориях (например, всегда размещайте «2025» перед «2026»).