Wenn verfolgt wird, wie sich mehrere kontinuierliche Kategorien im Laufe der Zeit entwickeln – beispielsweise Produktverkäufe über Quartale, sich ändernde Themen-Trends in der Nachrichtenberichterstattung oder Medienkonsummuster – dann bietet das Themengraben-Diagramm (eine spezialisierte Form eines Streamgraphs) bietet eine intuitive, visuell auffällige Darstellung. Im Gegensatz zu herkömmlichen gestapelten Flächendiagrammen, die an einer flachen Grundlinie ansetzen, fließt ein Themengraben-Diagramm horizontal um eine zentrale Achse herum und erzeugt eine organische, flussartige Visualisierung, bei der einzelne Ströme je nach quantitativen Wertänderungen breiter oder schmaler werden.
Die Funktionsweise von Themengraben-Diagrammen
In Apache ECharts verwenden Themengraben-Diagrammetype: 'themeRiver'. Anstatt sich auf traditionellexAxis undyAxis Konfigurationen zu verlassen, arbeitet das Diagramm mit einer einzigen horizontalensingleAxis mittype: 'time' odertype: 'value'. Datenpunkte werden als Array-Tupel im Format[time, value, categoryName].
1. Grundlegende Einrichtung
Um ein grundlegendes Themengraben-Diagramm zu erstellen, konfigurieren Sie einesingleAxis vom Typ'time', geben Sie antype: 'themeRiver' in Ihrer Serie und liefern Sie Ihre Flussbeobachtungen imdata Array:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data: ['Technologie', 'Mode', 'Sport']
},
singleAxis: {
top: 50,
bottom: 50,
axisTick: {},
axisLabel: {},
type: 'time',
axisPointer: {
animation: true,
label: { show: true }
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.5
}
}
},
series: [
{
type: 'themeRiver',
emphasis: {
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
data: [
['2026-01-01', 12, 'Technologie'],
['2026-02-01', 24, 'Technologie'],
['2026-03-01', 32, 'Technologie'],
['2026-04-01', 18, 'Technologie'],
['2026-01-01', 15, 'Mode'],
['2026-02-01', 18, 'Mode'],
['2026-03-01', 10, 'Mode'],
['2026-04-01', 25, 'Mode'],
['2026-01-01', 8, 'Sport'],
['2026-02-01', 12, 'Sport'],
['2026-03-01', 28, 'Sport'],
['2026-04-01', 20, 'Sport']
]
}
]
};
Erweiterte strukturelle Techniken
Themengräben-Diagramme sind besonders gut geeignet, um komplexe mehrkategoriale Ereignisse über lange Zeitverläufe hinweg zu überwachen, wobei benutzerdefinierte Tooltips und gestylte Kategoriefarbpaletten verwendet werden.
1. Mehrfachstrom-Medien-Volumenfluss
Die Anpassung der Stromfarben mit expliziten Farbpalette-Zuordnungen und benutzerdefinierten Achsentooltips verwandelt rohe Ereignisprotokolle in eine saubere Aktivitätszeitachse:
const categories = ['Artikel', 'Videoaufrufe', 'Podcast-Abspielen', 'Soziale Freigaben'];
option = {
title: {
text: 'Inhaltsengagement-Ströme',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#333',
width: 1
}
}
},
legend: {
data: categories,
bottom: 10
},
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
singleAxis: {
top: '15%',
bottom: '20%',
type: 'time',
axisLine: { lineStyle: { color: '#ccc' } },
splitLine: { show: false }
},
series: [
{
type: 'themeRiver',
label: {
show: true,
position: 'left',
fontSize: 12
},
data: [
['2026-01-01', 120, 'Artikel'], ['2026-02-01', 200, 'Artikel'], ['2026-03-01', 150, 'Artikel'], ['2026-04-01', 80, 'Artikel'],
['2026-01-01', 60, 'Videoaufrufe'], ['2026-02-01', 140, 'Videoaufrufe'], ['2026-03-01', 220, 'Videoaufrufe'], ['2026-04-01', 310, 'Videoaufrufe'],
['2026-01-01', 30, 'Podcast-Abspielen'], ['2026-02-01', 45, 'Podcast-Abspielen'], ['2026-03-01', 90, 'Podcast-Abspielen'], ['2026-04-01', 110, 'Podcast-Abspielen'],
['2026-01-01', 180, 'Soziale Freigaben'], ['2026-02-01', 110, 'Soziale Freigaben'], ['2026-03-01', 70, 'Soziale Freigaben'], ['2026-04-01', 95, 'Soziale Freigaben']
]
}
]
};
Strategische Best Practices
- Daten-Tupel korrekt formatieren: Jeder Eintrag im
dataArray muss die genaue Reihenfolge[Datum, Wert, Kategoriename]einhalten, damit ECharts die kontinuierlichen Ströme korrekt aufteilt und stapelt. - Kategorien-Ausbreitung begrenzen: Halten Sie die Anzahl der unterschiedlichen Kategorien zwischen 3 und 7. Zu viele Ströme machen die einzelnen Bänder schmal und schwer zu verfolgen über Zeitpunkte hinweg.
- Nutzen Sie
singleAxisGrößenanpassung: Passen SietopundbottomamsingleAxisEigenschaft zur Steuerung des vertikalen Abstands und zur Verhinderung, dass äußere Stream-Bezeichnungen an den Kanten des Containers abgeschnitten werden.