Podczas mapowania połączonych sieci, hierarchii strukturalnych lub złożonych relacji między jednostkami, Wykres grafowy (lub wykres sieciowy) jest idealicznym rozwiązaniem wizualnym. Przedstawiając elementy jako węzły, a połączenia jako skierowane lub nieskierowane linki, wykresy grafowe pozwalają użytkownikom eksplorować klastery, drzewa zależności i przepływy relacyjnektóre standardowe wykresy tabelaryczne nie potrafią oddać – takie jak architektury mikroserwisów, interakcje w sieciach społecznościowych lub grafy wiedzy.
Zasady działania wykresów grafowych
W Apache ECharts wykresy grafowe używają type: 'graph'. Zamiast mapowania wartości liczbowych bezpośrednio na współrzędne poziome i pionowe, wykres grafowy przyjmuje zbiór jawnych węzłów (lub data) oraz links (lub krawędzi). Następnie ECharts ustawia te węzły przy użyciu stałych pozycji współrzędnych, układów okrągłych lub dynamicznego silnika fizyki opartego na siłach.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres sieciowy przy użyciu fizyki opartej na siłach, zadeklaruj swoje węzły wewnątrz data, mapuj połączenia wewnątrz links, a następnie ustaw layout: 'force':
option = {
tooltip: {},
legend: {
data: ['Usługi', 'Bazy danych']
},
series: [
{
name: 'Sieć systemu',
type: 'graph',
layout: 'force',
roam: true, // Pozwala na powiększanie i przesuwanie
label: {
show: true,
position: 'right'
},
force: {
repulsion: 100,
edgeLength: 80
},
data: [
{ id: '0', name: 'Brama interfejsu API', symbolSize: 30, category: 0 },
{ id: '1', name: 'Usługa uwierzytelniania', symbolSize: 20, category: 0 },
{ id: '2', name: 'Usługa zamówień', symbolSize: 20, category: 0 },
{ id: '3', name: 'Baza danych użytkowników', symbolSize: 25, category: 1 },
{ id: '4', name: 'Baza danych zamówień', symbolSize: 25, category: 1 }
],
links: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' }
],
categories: [
{ name: 'Usługi' },
{ name: 'Bazy danych' }
]
}
]
};
Zaawansowane techniki strukturalne
Wykresy grafów obsługują alternatywne silniki układania, takie jak ułożenie w okręgu lub strzałki kierunkowe, aby jasno pokazywać zależności danych.
1. Układ okrągły z kierunkowymi strzałkami połączeń
Ustaw layout: 'circular'aby uporządkować węzły w czystej strukturze pierścieniowej i włączyć strzałki krawędzi, aby jasno pokazywać kierunkowe relacje między składnikami:
option = {
tooltip: {},
series: [
{
type: 'graph',
layout: 'circular',
roam: true,
label: {
show: true,
position: 'outside'
},
edgeSymbol: ['none', 'arrow'], // Rysuj strzałki na końcach połączeń
edgeSymbolSize: [0, 8],
data: [
{ id: 'A', name: 'Węzeł A', symbolSize: 24 },
{ id: 'B', name: 'Węzeł B', symbolSize: 24 },
{ id: 'C', name: 'Węzeł C', symbolSize: 24 },
{ id: 'D', name: 'Węzeł D', symbolSize: 24 },
{ id: 'E', name: 'Węzeł 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 // Zagięcie linii połączeń, aby uniknąć nakładania się
}
}
]
};
Dokładna dostosowanie układu i stylizacji węzłów
Dostosowanie krzywizny krawędzi, cieni obramowania węzłów oraz opcji interakcji pozwala utrzymać czytelność gęstych klastrów sieci na interaktywnych stronach internetowych.
1. Niestandardowe kolory kategorii węzłów i fizyka sił
Dostosuj wartości odpychania i style linii, aby stworzyć uporządkowane, wizualnie rozdzielone klastry:
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: 'Infrastruktura', itemStyle: { color: '#fac858' } }
],
data: [
{ name: 'Aplikacja internetowa', category: 0, symbolSize: 32 },
{ name: 'Aplikacja mobilna', category: 0, symbolSize: 28 },
{ name: 'Brama interfejsu API', category: 1, symbolSize: 26 },
{ name: 'Usługa mikroserwisu A', category: 1, symbolSize: 22 },
{ name: 'Usługa mikroserwisu B', category: 1, symbolSize: 22 },
{ name: 'Bufor Redis', category: 2, symbolSize: 20 },
{ name: 'PostgreSQL', category: 2, symbolSize: 24 }
],
links: [
{ source: 'Aplikacja internetowa', target: 'Brama interfejsu API' },
{ source: 'Aplikacja mobilna', target: 'Brama interfejsu API' },
{ source: 'Brama interfejsu API', target: 'Usługa mikroserwisu A' },
{ source: 'Brama interfejsu API', target: 'Usługa mikroserwisu B' },
{ source: 'Usługa mikroserwisu A', target: 'Bufor Redis' },
{ source: 'Usługa mikroserwisu B', target: 'PostgreSQL' }
],
lineStyle: {
color: 'source', // Kolor krawędzi oparty na kolorze węzła źródłowego
width: 2,
curveness: 0.1
}
}
]
};
Strategiczne najlepsze praktyki
- Włącz
roam: truedo nawigacji:Interaktywne sieci rosną bardzo szybko. Włączanie nawigacji z powiększaniem i przesuwaniem pozwala użytkownikom skupić się na konkretnych klastrach, nie czując się zatłoczonymi. - Zastosuj
krzywiznędo krawędzi:Ustawienie niewielkiej krzywizny (np.lineStyle.curveness: 0.1do0.2) zapobiega nakładaniu się dwukierunkowych połączeń między dwoma identycznymi węzłami w jedną linię. - Wyrównanie siły fizyki odpychania: Dostosuj
siła.odpychaniaostrożnie. Zbyt niskie wartości spowodują nakładanie się węzłów w gęstą chmurę, podczas gdy zbyt wysokie wartości wypchną węzły całkowicie poza widoczną obszar.