При оценке структурного распада по дискретным метрикам, Гистограмма с наложениемпредоставляет эффективный способ визуализации распределения частей относительно целого. В отличие от группированных макетов, которые распределяют серии данных по горизонтали, гистограммы с наложением накапливают значения по вертикали в пределах одного столбца. Такой формат упрощает отслеживание общего роста категории при отслеживании изменяющихся долей внутренних подкомпонентов, например, трафик устройств, разделенный по операционной системе, или ежеквартальные расходы, распределенные по отделам.
Механика наложенных столбцов
Гистограммы с наложением полагаются на присвоение совпадающего стекидентификатора для нескольких рядов. Когда движок отрисовки обнаруживает одинаковые значения строки стекна ряде с type: 'bar', он накладывает числовые значения последовательно по вертикальной оси Y, а не отображает перекрывающиеся или рядом расположенные столбцы.
1. Основная настройка
Чтобы создать базовую гистограмму с наложением, определите ось X, основанную на категориях, и примените общее свойство стекк каждому ряду в вашем массиве seriesмассиве:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Прямой', 'Органический поиск', 'Платные объявления', 'Рефералы']
},
xAxis: {
type: 'category',
data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Прямой',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Органический поиск',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Платные объявления',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Рефералы',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
Расширенные структурные методы
Гистограммы с наложением можно настроить для отображения процентных распределений или выборочного подгруппирования в зависимости от ваших аналитических потребностей.
1. Нормализованные наложенные столбцы на 100%
Когда ваша основная цель — сравнить соотношения долей, а не абсолютные числовые итоги, преобразуйте значения данных в нормализованные проценты, составляющие 100% на каждую категорию:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}rn{a0}: {c0}%rn{a1}: {c1}%rn{a2}: {c2}%'
},
legend: {
data: ['ПК', 'Мобильные', 'Планшеты']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'ПК',
type: 'bar',
stack: 'percentage',
data: [60, 50, 45, 40]
},
{
name: 'Мобильные',
type: 'bar',
stack: 'percentage',
data: [30, 40, 45, 50]
},
{
name: 'Планшеты',
type: 'bar',
stack: 'percentage',
data: [10, 10, 10, 10]
}
]
};
2. Группировка с несколькими стеками
Вы можете объединить группировку и стекирование в одном представлении, используя различныестекиидентификаторы по всем сериям. Например, сравните фактические и целевые итоги, где каждый из них состоит из стекируемых подкомпонентов:
option = {
legend: {
data: ['Фактически A', 'Фактически B', 'Цель A', 'Цель B']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Фактически A',
type: 'bar',
stack: 'actual',
data: [120, 150, 180, 200]
},
{
name: 'Фактически B',
type: 'bar',
stack: 'actual',
data: [80, 90, 100, 110]
},
{
name: 'Цель A',
type: 'bar',
stack: 'target',
data: [130, 160, 190, 210]
},
{
name: 'Цель B',
type: 'bar',
stack: 'target',
data: [90, 100, 110, 120]
}
]
};
Тонкая настройка макета и стилей
Визуальная проработка крайне важна для стекируемых столбцов, чтобы сегменты оставались различимыми, не вызывая визуального переутомления.
1. Границы сегментов и закругленные верхние капсулы
Примените чистые границы между стекируемыми сегментами и ограничьте закругление углов только верхним сегментом серии в стеке:
option = {
xAxis: {
type: 'category',
data: ['Янв', 'Фев', 'Мар', 'Апр']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Базовый слой',
type: 'bar',
stack: 'total',
data: [320, 302, 301, 334],
itemStyle: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Средний слой',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134],
itemStyle: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Верхний слой',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234],
itemStyle: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // Закругленные углы только на верхнем сегменте
}
}
]
};
Стратегические лучшие практики
- Ограничьте количество сегментов: Избегайте стекирования более чем 4–5 категорий на один столбец. За этим порогом сравнение средних сегментов между столбцами становится визуально сложным.
- Закрепите базовые элементы внизу: Разместите наиболее важный показатель или самый большой подкомпонент первым элементом в массиве
seriesдля того чтобы он располагался непосредственно на базовой линии для удобной выравнивания. - Используйте палитру с высокой контрастностью или границы: Примените тонкие белые линии границ между сегментами, чтобы сохранить четкое различие, когда соседние цвета имеют схожие уровни контрастности.