При отслеживании непрерывных передач, распределения ресурсов или многоэтапных пользовательских маршрутов, диаграмма Санки является ведущим инструментом визуализации. Рисуя пропорциональные полосы потока между последовательными узлами этапов, диаграммы Санки иллюстрируют как общие объемы делятся, объединяются и переходят через сложные системы—например, воронки конверсии пользователей веб-сайта, энергетические распределительные сети или распределение бюджета организации.
Механика диаграмм Санки
В Apache ECharts диаграммы Санки используют type: 'sankey'. Похоже на графические диаграммы, диаграмма Санки определяется списком различных узлов (или data) и направленных links (или ребер). Каждая связь содержит имя узла-источника, имя узла-назначения и числовое значение, которое определяет визуальную ширину соединяющей линии потока.источника имя узла, имя узла-назначения и числовое значение, которое определяет визуальную ширину соединяющей линии потока.назначения имя узла, и числовое значение, которое определяет визуальную ширину соединяющей линии потока.значениекоторое определяет визуальную ширину соединяющей линии потока.
1. Основная настройка
Чтобы создать базовую диаграмму Санки, объявите свои элементы узлов внутри data и определите объемы направленного потока в links:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: 'Общий доход' },
{ name: 'Продажи продукции' },
{ name: 'Услуги' },
{ name: 'Маркетинг' },
{ name: 'R&D' },
{ name: 'Прибыль' }
],
links: [
{ source: 'Общий доход', target: 'Продажи продукции', value: 70 },
{ source: 'Общий доход', target: 'Услуги', value: 30 },
{ source: 'Продажи продукции', target: 'Маркетинг', value: 30 },
{ source: 'Продажи продукции', target: 'R&D', value: 25 },
{ source: 'Продажи продукции', target: 'Прибыль', value: 15 },
{ source: 'Услуги', target: 'Прибыль', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.5
}
}
]
};
Расширенные структурные методы
Диаграммы Санки можно настраивать с вертикальной ориентацией потока, многоуровневыми цветами узлов и динамическим выделением связей для отслеживания отдельных путей через сложные сети.
1. Вертикальная ориентация потока
Установите orient: 'vertical'чтобы преобразовать горизонтальные потоки этапов в вертикальный вид с верху вниз:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
nodeWidth: 20,
nodeGap: 16,
data: [
{ name: 'Посещения сайта' },
{ name: 'Страница продукта' },
{ name: 'Прямой отказ' },
{ name: 'Корзина' },
{ name: 'Оформление заказа' }
],
links: [
{ source: 'Посещения сайта', target: 'Страница продукта', value: 1000 },
{ source: 'Посещения сайта', target: 'Прямой отказ', value: 400 },
{ source: 'Страница продукта', target: 'Корзина', value: 600 },
{ source: 'Корзина', target: 'Оформление заказа', value: 450 }
],
lineStyle: {
color: 'source',
curveness: 0.5
}
}
]
};
Тонкая настройка макета и стиля связей
Настройка расстояния между узлами, кривизны линий и поведения выделения при наведении позволяет сохранить сложные многоэтапные потоки чистыми и читаемыми.
1. Управление расстоянием между узлами и градиентными потоками от источника к цели
Настройка nodeGap и установка lineStyle.color: 'gradient'создает плавные переходы цветов между этапами:
option = {
series: [
{
type: 'sankey',
left: '5%',
right: '15%',
nodeWidth: 24,
nodeGap: 18,
draggable: true,
label: {
position: 'right',
color: '#333',
fontSize: 12
},
data: [
{ name: 'Источник A', itemStyle: { color: '#5470c6' } },
{ name: 'Источник B', itemStyle: { color: '#91cc75' } },
{ name: 'Этап 1', itemStyle: { color: '#fac858' } },
{ name: 'Этап 2', itemStyle: { color: '#ee6666' } },
{ name: 'Финальный результат', itemStyle: { color: '#73c0de' } }
],
links: [
{ source: 'Источник A', target: 'Этап 1', value: 50 },
{ source: 'Источник B', target: 'Этап 1', value: 30 },
{ source: 'Этап 1', target: 'Этап 2', value: 60 },
{ source: 'Этап 1', target: 'Финальный результат', value: 20 },
{ source: 'Этап 2', target: 'Финальный результат', value: 60 }
],
lineStyle: {
color: 'gradient',
curveness: 0.6,
opacity: 0.4
}
}
]
};
Стратегические лучшие практики
- Соблюдайте закон сохранения потока: Убедитесь, что сумма значений, поступающих в узел, равна или логически соответствует выходящим значениям, чтобы избежать вводящих в заблуждение визуальных разрывов.
- Включите
акцент.фокус: 'смежность':При работе с многоэтапными потоками фокусировка на смежных связях при наведении позволяет пользователям выделить конкретные маршруты без визуального шума. - Используйте градиентные ссылки: Установка
lineStyle.color: 'градиент'плавно смешивает цвет исходного узла с цветом целевого узла, делая многоэтапные переходы визуально интуитивно понятными.