При представлении многоуровневых иерархий, где внутренние кольца представляют высокие категории, а внешние кольца разбивают подкатегории, Диаграмма солнечного луча предлагает чистый радиальный альтернативный вариант для деревьев. Располагая вложенные категории в концентрических кольцах, диаграммы солнечного луча позволяют пользователям исследовать многоуровневые структурные пропорции, родительско-дочерние отношения и пути распределенияв компактном пространстве — например, глобальные категории продуктов, организационные диаграммы или многоэтапные пути отказа пользователей.
Механика диаграмм солнечного луча
В Apache ECharts диаграммы солнечного луча используют type: 'sunburst'. Похоже на деревья, серия ожидает вложенный деревообразный структуру в массиве data где родительские объекты содержат children массивы. Движок отображает корневой узел или категории верхнего уровня в самом внутреннем круге и расширяет подкатегории наружу по концентрическим слоям колец.
1. Основная настройка
Чтобы создать базовую диаграмму солнечного луча, предоставьте вложенную деревообразную выборку данных и установите type: 'sunburst'внутри объекта серии:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: 'Дедушка',
children: [
{
name: 'Родитель 1',
value: 15,
children: [
{ name: 'Ребёнок 1', value: 5 },
{ name: 'Ребёнок 2', value: 10 }
]
},
{
name: 'Родитель 2',
value: 10,
children: [
{ name: 'Ребёнок 3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
Расширенные структурные методы
Диаграммы солнечного луча можно настраивать с помощью правил стилизации на уровне колец, наследования цветов и интерактивных прорисовок по клику с увеличением.
1. Настройка колец с учетом уровня и прорисовка
Используйте levelsмассив для определения различных радиусов, поведения меток и стилей элементов для каждого концентрического слоя колец от центра наружу:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '2%',
left: 'center',
data: ['Электроника', 'Дом и быт']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radius: ['10%', '85%'],
nodeClick: 'rootToNode', // Включает переход по уровням при клике на узел
levels: [
{},
{
// Внутреннее кольцо (категории верхнего уровня)
r0: '15%',
r: '40%',
label: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// Среднее кольцо (подкатегории)
r0: '40%',
r: '65%',
label: { rotate: 'tangential', fontSize: 11 }
},
{
// Внешнее кольцо (продукты-листья)
r0: '65%',
r: '85%',
label: { rotate: 'radial', fontSize: 10 }
}
],
data: [
{
name: 'Электроника',
children: [
{
name: 'Аудио',
children: [
{ name: 'Наушники', value: 40 },
{ name: 'Акустические системы', value: 25 }
]
},
{
name: 'Компьютеры',
children: [
{ name: 'Ноутбуки', value: 80 },
{ name: 'Настольные ПК', value: 35 }
]
}
]
},
{
name: 'Дом и быт',
children: [
{
name: 'Мебель',
children: [
{ name: 'Стулья', value: 50 },
{ name: 'Столы', value: 30 }
]
},
{
name: 'Декор',
children: [
{ name: 'Освещение', value: 45 },
{ name: 'Ковры', value: 20 }
]
}
]
}
]
}
]
};
Тонкая настройка макета и выравнивания меток
Управление режимами поворота меток (радиальные против касательный) позволяет сохранить читаемость текста при сужении секторов к внешним кольцам.
1. Настройка интервалов между секторами и радиальные метки
Примените границы элементов и установите rotate: 'radial'чтобы выровнять текст вдоль радиусов секторов аккуратно:
option = {
series: [
{
type: 'sunburst',
radius: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
rotate: 'radial',
align: 'right'
},
data: [
{
name: 'Программное обеспечение',
itemStyle: { color: '#5470c6' },
children: [
{ name: 'SaaS', value: 120 },
{ name: 'Локальные', value: 60 }
]
},
{
name: 'Оборудование',
itemStyle: { color: '#91cc75' },
children: [
{ name: 'Серверы', value: 90 },
{ name: 'Сетевое оборудование', value: 110 }
]
},
{
name: 'Услуги',
itemStyle: { color: '#fac858' },
children: [
{ name: 'Консультирование', value: 70 },
{ name: 'Поддержка', value: 50 }
]
}
]
}
]
};
Стратегические лучшие практики
- Соответствие поворота меток глубине кольца: Используйте горизонтальные (
rotate: 0) или касательные метки для широких внутренних колец, и переключитесь нарадиальныеметки для узких внешних секторов. - Включите
nodeClick: 'rootToNode':Интерактивный масштаб позволяет пользователям кликать по любой родительской дуге, чтобы сразу сосредоточиться на её поддереве, не создавая визуальной перегруженности. - Используйте наследование цветов:Позвольте дочерним секторам наследовать базовые оттенки от родительского узла с различной насыщенностью/яркостью, чтобы сохранить чёткую визуальную группировку на всех уровнях.