График столбцов: основная настройка, стилизация и компоновка

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

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

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

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

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

option = {
    xAxis: {
        type: 'category',
        data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};

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

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

Сравнение нескольких серий

Чтобы сравнить несколько наборов данных бок о бок (например, выручку по годам), добавьте несколько объектов в массив series массив. Двигатель компоновки будет группировать связанные столбцы по каждой категории вдоль оси X:

option = {
    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]
        }
    ]
};

Пользовательские стили столбцов и индивидуальное выделение

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

• цвет: Задает цвет заливки (шестнадцатеричный, RGB или линейные градиенты).
• borderRadius: Добавляет закругленные углы столбцам (например, [5, 5, 0, 0] для верхних углов).
• прозрачность: Настройка прозрачности столбцов.
• shadowBlur & shadowColor: Добавляет эффект возвышения и теней к столбцам.

option = {
    xAxis: {
        type: 'category',
        data: ['Прямые', 'Почта', 'Рекламные сети', 'Видеореклама', 'Поиск']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [
                320,
                332,
                {
                    value: 401,
                    // Выделить один столбец с пиком
                    itemStyle: {
                        color: '#ee6666',
                        borderRadius: [6, 6, 0, 0]
                    }
                },
                334,
                390
            ],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

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

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

1. Управление шириной и ограничениями

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

• barWidth: Определяет ширину столбца с использованием фиксированных пикселей или процента ширины категории (например, '30%').
• barMaxWidth: Задает верхний предел ширины, чтобы столбцы не растягивались чрезмерно на широкоэкранных дисплеях.
• barMinHeight: Устанавливает минимальную высоту в пикселях, чтобы значения, близкие к нулю, оставались нажимаемыми и видимыми.

2. Интервалы между столбцами и фоновые треки

Чтобы придать вашим столбцам современный вид панели мониторинга, настройте внутренние интервалы или включите фоновые треки на всю высоту:

option = {
    xAxis: {
        type: 'category',
        data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            barWidth: '40%',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.15)',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

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

• Следите за балансом интервалов: Избегайте установки barWidth слишком широкой (свыше 60%), чтобы избежать перегруженности визуального макета.
• Выбор между горизонтальным и вертикальным расположением: Используйте столбчатые диаграммы, когда метки категорий короткие (например, месяцы, кварталы, коды). Если ваши метки — длинные описания или имена, рассмотрите возможность перемещения данных категорий на ось yAxis чтобы вместо этого создать горизонтальную столбчатую диаграмму.
• Целостность нулевой базовой линии: Всегда устанавливайте числовую ось, начинающуюся с нуля (0). Обрезка нижней шкалы в столбчатых диаграммах искажает соотношения высот и вводит зрителей в заблуждение.