Когда вам нужно отслеживать как общий объем, так и вклад отдельных подкомпонентов во времени, Гистограмма с наложением является идеальным инструментом визуализации. Вертикальное наложение областей создает непрерывное композитное представление, где верхняя линия представляет собой суммарный объем, а ширина отдельных полос показывает изменение вклада подкатегорий, например, общий трафик сайта, разбитый по поисковым системам, органическому и прямому реферальному трафику в течение нескольких месяцев.
Механика гистограмм с наложением
Гистограммы с наложением объединяют конфигурации линейных рядов с совпадающими стекатрибутами. Когда рендеринг-движок обнаруживает идентичные стекидентификаторы в нескольких рядах с type: 'line' и areaStyleактивными, он последовательно налагает каждый точечный элемент выше предыдущего пути линии ряда вдоль вертикальной оси Y.
1. Основная настройка
Чтобы построить базовую гистограмму с наложением, определите непрерывную ось X, установите type: 'line' для каждого ряда, включите areaStyle, и присвойте идентичный стекидентификатор всем рядам:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
Расширенные структурные методы
Гистограммы с наложением можно настроить так, чтобы они фокусировались либо на общем кумулятивном росте, либо на относительных пропорциональных изменениях во времени.
1. Гистограмма с наложением в процентах, нормализованная до 100%
Когда оцениваются пропорциональные изменения, а не общий объем в течение времени, нормализуйте ваш набор данных до 100% для каждого горизонтального временного пункта:
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['ПК', 'Мобильные устройства', 'Планшеты']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'ПК',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: 'Мобильные устройства',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: 'Планшеты',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
Тонкая настройка макета и стилей
Поскольку наложенные области полностью перекрывают фон, изменение прозрачности заливки и ширины линий помогает сохранить четкость и читаемость отдельных слоев.
1. Настройка прозрачности слоев и разделителей границ
Установка сплошных линий поверх слегка прозрачных заливок областей создает четкие визуальные границы между соседними наложенными полосами:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Продукт A',
type: 'line',
stack: 'объем',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: 'Продукт B',
type: 'line',
stack: 'объем',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: 'Продукт C',
type: 'line',
stack: 'объем',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
Стратегические лучшие практики
- Закрепите стабильные серии внизу: Разместите самую большую или наименее изменчивую серию внизу стека, чтобы создать предсказуемую базовую линию для полос выше нее.
- Ограничьте количество полос:Наложение более 4–5 серий делает оценку средних полос трудной. Рассмотрите возможность объединения незначительных категорий в категорию «Другое».
- Используйте
axisPointer: { type: 'cross' }:Сочетание курсора при наведении с непрерывной подсказкой делает точное определение конкретных значений дат в плотных вертикальных стеках простым.