При представлении структурированных данных с четкими родительско-дочерними связями — например, организационных диаграмм, каталогов файловой системы, деревьев решений или классификаций таксономии —Диаграмма дерева обеспечивает интуитивную визуальную структуру. Располагая узлы данных вдоль ветвящихся путей, диаграммы дерева позволяют пользователям исследовать вложенные иерархии и отслеживать связи от центрального корневого узла через подветви.
Механика диаграмм дерева
В Apache ECharts диаграммы дерева используютtype: 'tree'. В отличие от стандартных диаграмм с явными осями X и Y, диаграммы дерева автоматически формируют позиции макета на основе вложенного объекта JavaScript, содержащегоname и необязательный массивchildren массив.
1. Основная настройка
Чтобы создать базовую диаграмму дерева, определите свою вложенную структуру данных и установитеtype: 'tree'внутри массива series:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'Генеральный директор',
children: [
{
name: 'Вице-президент по продукту',
children: [
{ name: 'Менеджер продукта' },
{ name: 'Дизайнер UX' }
]
},
{
name: 'Вице-президент по инженерии',
children: [
{ name: 'Технический лидер' },
{ name: 'Инженер DevOps' }
]
}
]
}],
top: '5%',
left: '15%',
bottom: '5%',
right: '20%',
symbolSize: 10,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDurationUpdate: 750
}
]
};
Расширенные направления макета
Диаграммы дерева могут адаптироваться к различным ограничениям по пространству и требованиям к дизайну, меняя направление макета или переключаясь на радиальный вид.
1. Радиальный макет дерева
Установитеlayout: 'radial'чтобы направить ветви наружу от центральной точки, что идеально подходит для широких иерархий с большим количеством листовых узлов:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: 'Корень',
children: [
{
name: 'Ветвь A',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: 'Ветвь B',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: 'Ветвь C',
children: [
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' }
]
}
]
}],
top: '18%',
bottom: '14%',
right: '18%',
left: '18%',
symbolSize: 12,
initialTreeDepth: 2,
animationDurationUpdate: 750
}
]
};
Настройка макета и стилей
Настройка символов узлов, кривизны линий и форматирования на уровне помогает выделить ключевые структурные уровни на больших диаграммах.
1. Изогнутые соединители и стилизация узлов по уровням
Используйте lineStyle.curveness для сглаживания линий соединения, и определите уровни массив конфигураций для стилизации узлов в зависимости от их глубины в иерархии:
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // Ориентация сверху вниз
data: [{
name: 'Корень проекта',
children: [
{
name: 'Фронтенд',
children: [
{ name: 'React' },
{ name: 'Vue' }
]
},
{
name: 'Бэкенд',
children: [
{ name: 'Node.js' },
{ name: 'Python' }
]
}
]
}],
top: '10%',
left: '10%',
bottom: '10%',
right: '10%',
symbol: 'emptyCircle',
symbolSize: 14,
edgeShape: 'polyline', // Использует четкие прямоугольные соединения вместо кривых
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
Стратегические лучшие практики
- Управление начальной глубиной сворачивания: Установите
initialTreeDepth(например,1или2) на больших наборах данных, чтобы сохранить чистоту диаграммы при первоначальной загрузке, позволяя пользователям нажимать узлы для раскрытия деталей. - Выберите правильную ориентацию: Используйте горизонтальные (`LR`) или радиальные (`radial`) макеты для глубоко вложенных структур с длинными текстами меток, а вертикальные (`TB`) макеты — для мелких, широких организационных структур.
- Различайте конечные узлы: Используйте свойство
leavesдля стилизации конечных узлов по-разному по сравнению с родительскими узлами-контейнерами, чтобы пользователи могли легко различать ветви и конечные точки.