При представлении многоуровневых иерархических наборов данных или отображении крупных визуальных разбивок, где пространство ограничено, Диаграмма дерева обеспечивает эффективное визуальное решение. За счет укладки вложенных прямоугольников в единую ограничивающую область диаграммы дерева кодируют числовые значения через размер площади прямоугольника, позволяя пользователям оценивать относительные пропорции в сложных вложенных структурах—например, использование дискового пространства, выручка каталога товаров или распределение бюджета между родительскими и дочерними отделами.
Механика диаграмм дерева
В Apache ECharts диаграммы дерева используют type: 'treemap'. Серия ожидает деревообразный массив data где каждый объект содержит name, количественный value, и необязательный массив children для более глубоких вложенных уровней.
1. Основная настройка
Чтобы создать базовую диаграмму дерева, определите иерархический массив данных с вложенными children и установите type: 'treemap' в конфигурации серии:
option = {
tooltip: {
formatter: '{b}: ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: 'Электроника',
value: 400,
children: [
{ name: 'Телефоны', value: 240 },
{ name: 'Ноутбуки', value: 160 }
]
},
{
name: 'Одежда',
value: 300,
children: [
{ name: 'Рубашки', value: 180 },
{ name: 'Обувь', value: 120 }
]
}
]
}
]
};
Расширенные структурные техники
Диаграммы дерева можно настроить с многоуровневыми правилами стилизации, сопоставлением цветовых градиентов и интерактивными элементами для детального просмотра глубоких деревьев данных.
1. Многоуровневый переход по хлебным крошкам
Включите легенды сверху и навигацию по хлебным крошкам, чтобы пользователи могли определять категории верхнего уровня и плавно переходить в вложенные подкаталоги:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ГБ'
},
legend: {
top: '5%',
left: 'center',
data: ['Системный диск (C:)', 'Данные (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // Показывает один уровень за раз с возможностью перехода по клику
breadcrumb: {
show: true,
left: 'center',
bottom: '2%'
},
levels: [
{
itemStyle: {
borderColor: '#555',
borderWidth: 2,
gapWidth: 2
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderWidth: 1,
gapWidth: 1,
borderColorSaturation: 0.7
}
}
],
data: [
{
name: 'Системный диск (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: 'Программы', value: 230 },
{ name: 'Пользователи', value: 150 }
]
},
{
name: 'Данные (D:)',
value: 800,
children: [
{ name: 'Медиа', value: 450 },
{ name: 'Резервные копии', value: 250 },
{ name: 'Проекты', value: 100 }
]
}
]
}
]
};
Тонкая настройка макета и стилей
Применение ширины промежутков, чистых границ и различных цветов уровней помогает сохранить организованность вложенных прямоугольников и их визуальную читаемость.
1. Пользовательские границы ячеек и выравнивание меток
Настройте gapWidth и labelконфигурации, чтобы сохранить чёткие границы между родительскими контейнерами и дочерними сегментами:
option = {
series: [
{
type: 'treemap',
roam: false, // Отключает ручное масштабирование/перемещение
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: 'Северная Америка',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: 'Европа',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: 'Азиатско-Тихоокеанский регион',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: 'Латинская Америка',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
Стратегические лучшие практики
- Используйте
gapWidthдля визуализации вложенности: Добавление небольшогоgapWidth(например, 2–4 пикселя) между вложенными прямоугольниками создаёт чёткое пространство между родительскими категориями и дочерними элементами. - Включите хлебные крошки для глубоких иерархий: При отображении 3 или более уровней вложенности включите `breadcrumb: { show: true }`, чтобы пользователи могли легко отслеживать своё местоположение и возвращаться наверх.
- Держите метки краткими: Текст может легко выходить за пределы маленьких прямоугольников-листьев. Объединяйте короткие названия с подсказками или используйте
leafDepthскрыть маленькие подпрямоугольники до увеличения.