Beim Verfolgen kontinuierlicher Übertragungen, Ressourcenverteilungen oder mehrstufiger Nutzerreisen ist das Sankey-Diagramm das führende Visualisierungswerkzeug. Durch Zeichnen proportionaler Flussbänder zwischen aufeinanderfolgenden Stufenknoten veranschaulichen Sankey-Diagramme wie Gesamtgrößen sich aufteilen, kombinieren und durch komplexe Systeme übergehen—wie beispielsweise Website-Nutzerkonversionsrinnen, Energiedistributionsnetze oder organisatorische Budgetzuweisungen.
Die Funktionsweise von Sankey-Diagrammen
In Apache ECharts verwenden Sankey-Diagramme type: 'sankey'. Ähnlich wie Graph-Diagramme wird ein Sankey-Diagramm durch eine Liste von unterschiedlichen Knoten (oder data) und gerichtete links (oder Kanten). Jede Verbindung enthält einen QuellKnotennamen, einen ZielKnotennamen und einen numerischen Wert, der die visuelle Breite der verbindenden Flusslinie bestimmt.
1. Grundlegende Einrichtung
Um ein grundlegendes Sankey-Diagramm zu erstellen, deklarieren Sie Ihre Knotenelemente innerhalb von data und definieren Sie gerichtete Flussvolumina in links:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: 'Gesamteinkommen' },
{ name: 'Produktverkäufe' },
{ name: 'Dienstleistungen' },
{ name: 'Marketing' },
{ name: 'Forschung und Entwicklung' },
{ name: 'Gewinn' }
],
links: [
{ source: 'Gesamteinkommen', target: 'Produktverkäufe', value: 70 },
{ source: 'Gesamteinkommen', target: 'Dienstleistungen', value: 30 },
{ source: 'Produktverkäufe', target: 'Marketing', value: 30 },
{ source: 'Produktverkäufe', target: 'Forschung und Entwicklung', value: 25 },
{ source: 'Produktverkäufe', target: 'Gewinn', value: 15 },
{ source: 'Dienstleistungen', target: 'Gewinn', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.5
}
}
]
};
Erweiterte strukturelle Techniken
Sankey-Diagramme können mit vertikalen Flussrichtungen, mehrstufigen Knotenfarben und dynamischer Link-Hervorhebung angepasst werden, um einzelne Pfade durch komplexe Netzwerke nachzuverfolgen.
1. Vertikale Flussrichtung
Setzen Sie orient: 'vertical'um horizontale Stufenflüsse in eine vertikale Wasserfallansicht von oben nach unten umzuwandeln:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
nodeWidth: 20,
nodeGap: 16,
data: [
{ name: 'Webseitenaufrufe' },
{ name: 'Produktseite' },
{ name: 'Direkter Abgang' },
{ name: 'Warenkorb' },
{ name: 'Kasse' }
],
links: [
{ source: 'Webseitenaufrufe', target: 'Produktseite', value: 1000 },
{ source: 'Webseitenaufrufe', target: 'Direkter Abgang', value: 400 },
{ source: 'Produktseite', target: 'Warenkorb', value: 600 },
{ source: 'Warenkorb', target: 'Kasse', value: 450 }
],
lineStyle: {
color: 'source',
curveness: 0.5
}
}
]
};
Feinabstimmung von Layout und Link-Stil
Durch Anpassen des Knotenabstands, der Linienkrümmung und des Verhaltens bei Hover-Hervorhebungen bleiben komplexe Mehrstufenflüsse übersichtlich und lesbar.
1. Knotenabstandsteuerung und Farbverläufe von Quelle zu Ziel
Anpassen von nodeGap und Festlegen von lineStyle.color: 'gradient'erzeugt sanfte Farbübergänge zwischen den Stufen:
option = {
series: [
{
type: 'sankey',
left: '5%',
right: '15%',
nodeWidth: 24,
nodeGap: 18,
draggable: true,
label: {
position: 'right',
color: '#333',
fontSize: 12
},
data: [
{ name: 'Quelle A', itemStyle: { color: '#5470c6' } },
{ name: 'Quelle B', itemStyle: { color: '#91cc75' } },
{ name: 'Stufe 1', itemStyle: { color: '#fac858' } },
{ name: 'Stufe 2', itemStyle: { color: '#ee6666' } },
{ name: 'Endausgabe', itemStyle: { color: '#73c0de' } }
],
links: [
{ source: 'Quelle A', target: 'Stufe 1', value: 50 },
{ source: 'Quelle B', target: 'Stufe 1', value: 30 },
{ source: 'Stufe 1', target: 'Stufe 2', value: 60 },
{ source: 'Stufe 1', target: 'Endausgabe', value: 20 },
{ source: 'Stufe 2', target: 'Endausgabe', value: 60 }
],
lineStyle: {
color: 'gradient',
curveness: 0.6,
opacity: 0.4
}
}
]
};
Strategische Best Practices
- Erhalt der Flusskonservierung:Stellen Sie sicher, dass die Summe der Werte, die in einen Knoten fließen, gleich oder logisch mit den abfließenden Werten übereinstimmt, um irreführende visuelle Lücken zu vermeiden.
- Aktivieren Sie
Hervorhebung.fokus: 'Nähe': Beim Umgang mit mehrstufigen Flüssen ermöglicht die Fokussierung auf benachbarte Verbindungen bei Hover dem Benutzer, spezifische Wege ohne visuelle Störungen zu isolieren. - Verwenden Sie verlaufende Verbindungen: Einstellen
lineStyle.color: 'verlauf'blendet die Farbe des Quellknotens nahtlos in die Farbe des Zielknotens ein und macht mehrstufige Übergänge visuell intuitiv.