Beim Kartieren von miteinander verbundenen Netzwerken, strukturellen Hierarchien oder komplexen Entitätsbeziehungen ist das Graphik-Diagramm (oder Netzwerkgraph) das ideale visuelle Framework. Indem Elemente als Knoten und Verbindungen als gerichtete oder ungerichtete Verbindungen dargestellt werden, ermöglichen Graphik-Diagramme es Benutzern, Clustern, Abhängigkeitsbäumen und relationalen Abläufen zu erkunden, die herkömmliche Tabellendiagramme nicht vermitteln können – wie beispielsweise Mikroservice-Architekturen, soziale Netzwerkinteraktionen oder Wissensgraphen.
Die Funktionsweise von Graphik-Diagrammen
In Apache ECharts verwenden Graphik-Diagramme type: 'graph'. Anstatt numerische Werte direkt auf horizontale und vertikale Achsenkoordinaten abzubilden, verwendet ein Graphik-Diagramm eine Sammlung expliziter Knoten (oder data) und links (oder Kanten). ECharts ordnet diese Knoten dann mithilfe fester Koordinatenplatzierungen, zirkulärer Layouts oder eines dynamischen, kraftbasierten Physik-Engines an.
1. Grundlegende Einrichtung
Um ein grundlegendes Netzwerkdiagramm mit kraftbasierten Physikmodellen zu erstellen, deklarieren Sie Ihre Knoten innerhalb von data, ordnen Sie Verbindungen innerhalb von links, und legen Sie fest layout: 'force':
option = {
tooltip: {},
legend: {
data: ['Dienste', 'Datenbanken']
},
series: [
{
name: 'System-Netzwerk',
type: 'graph',
layout: 'force',
roam: true, // Ermöglicht Zoomen und Scrollen
label: {
show: true,
position: 'rechts'
},
force: {
repulsion: 100,
edgeLength: 80
},
data: [
{ id: '0', name: 'API-Gateway', symbolSize: 30, category: 0 },
{ id: '1', name: 'Auth-Dienst', symbolSize: 20, category: 0 },
{ id: '2', name: 'Bestell-Dienst', symbolSize: 20, category: 0 },
{ id: '3', name: 'Benutzer-DB', symbolSize: 25, category: 1 },
{ id: '4', name: 'Bestell-DB', symbolSize: 25, category: 1 }
],
links: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' }
],
categories: [
{ name: 'Dienste' },
{ name: 'Datenbanken' }
]
}
]
};
Erweiterte strukturelle Techniken
Graphik-Diagramme unterstützen alternative Layout-Engines wie kreisförmige Ringanordnung oder gerichtete Pfeile, um Datenabhängigkeiten klar darzustellen.
1. Kreisförmiges Layout mit gerichteten Verbindungspfeilen
Setzen Sie layout: 'circular'um Knoten in einer sauberen Ringstruktur zu organisieren und Pfeile an Kanten zu aktivieren, um gerichtete Beziehungen zwischen Komponenten darzustellen:
option = {
tooltip: {},
series: [
{
type: 'graph',
layout: 'circular',
roam: true,
label: {
show: true,
position: 'outside'
},
edgeSymbol: ['none', 'arrow'], // Pfeile an Verbindungsenden zeichnen
edgeSymbolSize: [0, 8],
data: [
{ id: 'A', name: 'Knoten A', symbolSize: 24 },
{ id: 'B', name: 'Knoten B', symbolSize: 24 },
{ id: 'C', name: 'Knoten C', symbolSize: 24 },
{ id: 'D', name: 'Knoten D', symbolSize: 24 },
{ id: 'E', name: 'Knoten 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 // Verbindungsleitungen krümmen, um Überlappungen zu vermeiden
}
}
]
};
Feinabstimmung von Layout und Knotenstil
Durch Anpassen der Kantenkrümmung, Knotenrand-Schatten und Interaktionsmöglichkeiten bleiben dichte Netzwerkcluster auf interaktiven Webseiten lesbar.
1. Benutzerdefinierte Knotenkategoriefarben und Kraftphysik
Passen Sie Abstoßungswerte und Linienstile an, um strukturierte, visuell getrennte Cluster zu erstellen:
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: 'Infrastruktur', itemStyle: { color: '#fac858' } }
],
data: [
{ name: 'Web-App', category: 0, symbolSize: 32 },
{ name: 'Mobile-App', category: 0, symbolSize: 28 },
{ name: 'API-Gateway', category: 1, symbolSize: 26 },
{ name: 'Mikroservice A', category: 1, symbolSize: 22 },
{ name: 'Mikroservice B', category: 1, symbolSize: 22 },
{ name: 'Redis-Cache', category: 2, symbolSize: 20 },
{ name: 'PostgreSQL', category: 2, symbolSize: 24 }
],
links: [
{ source: 'Web-App', target: 'API-Gateway' },
{ source: 'Mobile-App', target: 'API-Gateway' },
{ source: 'API-Gateway', target: 'Mikroservice A' },
{ source: 'API-Gateway', target: 'Mikroservice B' },
{ source: 'Mikroservice A', target: 'Redis-Cache' },
{ source: 'Mikroservice B', target: 'PostgreSQL' }
],
lineStyle: {
color: 'source', // Farbe der Kante basierend auf der Quellknotenfarbe
width: 2,
curveness: 0.1
}
}
]
};
Strategische Best Practices
- Aktivieren Sie
roam: truefür die Navigation:Interaktive Netzwerke wachsen schnell. Die Aktivierung von Zoom- und Pan-Navigation ermöglicht es Benutzern, sich auf bestimmte Cluster zu konzentrieren, ohne sich eingeengt zu fühlen. - Wenden Sie
curvenessan Kanten an:Durch Festlegen einer leichten Krümmung (z. B.lineStyle.curveness: 0.1bis0.2) verhindert, dass bidirektionale Verbindungen zwischen zwei identischen Knoten ineinander überlappen und zu einer einzigen Linie werden. - Ausgleichskraft-Physik-Abstoßung: Einstellen
kraft.abstoßungsorgfältig. Werte, die zu niedrig sind, führen dazu, dass Knoten ineinander überlappen und eine dichte Gruppe bilden, während zu hohe Werte die Knoten vollständig außerhalb des sichtbaren Bereichs des Canvas drängen.