При картировании взаимосвязанных сетей, структурных иерархий или сложных отношений между сущностями, Графический чарт (или граф сети) является идеальной визуальной структурой. Отображая элементы как узлы, а связи как направленные или ненаправленные связи, графические чарты позволяют пользователям исследовать кластеры, деревья зависимостей и потоки отношенийкоторые стандартные табличные чарты не могут передать — например, архитектуру микросервисов, взаимодействия в социальных сетях или графы знаний.
Механика графических чартов
В Apache ECharts графические чарты используют type: 'graph'. Вместо прямого сопоставления числовых значений с координатами по горизонтальной и вертикальной осям, графический чарт использует набор явных узлов (или data) и links (или рёбер). Затем ECharts располагает эти узлы с использованием фиксированных координат, круговых компоновок или динамической физической модели, основанной на силовом направлении.
1. Основная настройка
Чтобы создать базовую сетевую диаграмму с использованием физики, основанной на силовом направлении, объявите свои узлы внутри data, сопоставьте связи внутри links, и установите layout: 'force':
option = {
tooltip: {},
legend: {
data: ['Сервисы', 'Базы данных']
},
series: [
{
name: 'Системная сеть',
type: 'graph',
layout: 'force',
roam: true, // Позволяет масштабировать и перемещать
label: {
show: true,
position: 'right'
},
force: {
repulsion: 100,
edgeLength: 80
},
data: [
{ id: '0', name: 'Шлюз API', symbolSize: 30, category: 0 },
{ id: '1', name: 'Сервис аутентификации', symbolSize: 20, category: 0 },
{ id: '2', name: 'Сервис заказов', symbolSize: 20, category: 0 },
{ id: '3', name: 'База данных пользователей', symbolSize: 25, category: 1 },
{ id: '4', name: 'База данных заказов', symbolSize: 25, category: 1 }
],
links: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' }
],
categories: [
{ name: 'Сервисы' },
{ name: 'Базы данных' }
]
}
]
};
Расширенные структурные методы
Диаграммы графов поддерживают альтернативные движки компоновки, такие как круговая ориентация или направленные стрелки, чтобы четко показать зависимости между данными.
1. Круговая компоновка с направленными стрелками на связях
Установите layout: 'circular' для организации узлов в чистой кольцевой структуре и включения стрелок на связях для отображения направления взаимосвязей между компонентами:
option = {
tooltip: {},
series: [
{
type: 'graph',
layout: 'circular',
roam: true,
label: {
show: true,
position: 'outside'
},
edgeSymbol: ['none', 'arrow'], // Рисовать стрелки на концах связей
edgeSymbolSize: [0, 8],
data: [
{ id: 'A', name: 'Узел A', symbolSize: 24 },
{ id: 'B', name: 'Узел B', symbolSize: 24 },
{ id: 'C', name: 'Узел C', symbolSize: 24 },
{ id: 'D', name: 'Узел D', symbolSize: 24 },
{ id: 'E', name: 'Узел E', symbolSize: 24 }
],
links: [
{ source: 'A', target: 'B' },
{ source: 'B', target: 'C' },
{ source: 'C', target: 'D' },
{ source: 'D', target: 'E' },
{ source: 'E', target: 'A' },
{ source: 'A', target: 'C' }
],
lineStyle: {
color: '#5470c6',
width: 2,
curveness: 0.2 // Изогнуть линии соединений, чтобы избежать пересечений
}
}
]
};
Тонкая настройка компоновки и стилизации узлов
Настройка кривизны связей, теней границ узлов и параметров взаимодействия позволяет сохранять читаемость плотных групп сетей на интерактивных веб-страницах.
1. Собственные цвета категорий узлов и физика силы
Настройте значения отталкивания и стили линий, чтобы создать структурированные, визуально разделённые кластеры:
option = {
legend: {
top: '5%',
left: 'center'
},
series: [
{
type: 'graph',
layout: 'force',
roam: true,
draggable: true,
force: {
repulsion: 250,
gravity: 0.1,
edgeLength: [50, 100]
},
categories: [
{ name: 'Frontend', itemStyle: { color: '#5470c6' } },
{ name: 'Backend', itemStyle: { color: '#91cc75' } },
{ name: 'Инфраструктура', itemStyle: { color: '#fac858' } }
],
data: [
{ name: 'Веб-приложение', category: 0, symbolSize: 32 },
{ name: 'Мобильное приложение', category: 0, symbolSize: 28 },
{ name: 'Шлюз API', category: 1, symbolSize: 26 },
{ name: 'Микросервис A', category: 1, symbolSize: 22 },
{ name: 'Микросервис B', category: 1, symbolSize: 22 },
{ name: 'Кэш Redis', category: 2, symbolSize: 20 },
{ name: 'PostgreSQL', category: 2, symbolSize: 24 }
],
links: [
{ source: 'Веб-приложение', target: 'Шлюз API' },
{ source: 'Мобильное приложение', target: 'Шлюз API' },
{ source: 'Шлюз API', target: 'Микросервис A' },
{ source: 'Шлюз API', target: 'Микросервис B' },
{ source: 'Микросервис A', target: 'Кэш Redis' },
{ source: 'Микросервис B', target: 'PostgreSQL' }
],
lineStyle: {
color: 'source', // Цвет линии зависит от цвета исходного узла
width: 2,
curveness: 0.1
}
}
]
};
Стратегические лучшие практики
- Включите
roam: trueдля навигации:Интерактивные сети быстро растут. Включение навигации с масштабированием и перемещением позволяет пользователям фокусироваться на конкретных кластерах, не испытывая ощущения тесноты. - Примените
кривизнук линиям:Задание небольшой кривизны (например,lineStyle.curveness: 0.1до0.2) предотвращает наложение двунаправленных связей между двумя одинаковыми узлами в одну линию. - Баланс силы физики отталкивания: Настройка
сила.отталкиванияосторожно. Значения, которые слишком низкие, приведут к тому, что узлы наложатся друг на друга, образуя плотную группу, а значения, которые слишком высокие, вытолкнут узлы полностью за пределы видимой области холста.