Gdy śledzisz, jak wiele ciągłych kategorii się zmienia w czasie – na przykład sprzedaż produktów w kolejnych kwartałach, zmieniające się trendy tematyczne w pokryciu mediów lub wzory konsumpcji mediów – toWykres rzeki tematycznej (specjalna forma streamgrapha) zapewnia intuicyjne, wizualnie mocne przedstawienie. W przeciwieństwie do standardowych wykresów obszarowych złożonych, które są przytwierdzone do poziomej linii bazowej, wykres rzeki tematycznej przepływa poziomo wokół osi centralnej, tworząc organiczne, podobne do rzeki wizualizacje, w których poszczególne strumienie rozszerzają się lub zwężają się w zależności od zmian wartości ilościowych).
Zasada działania wykresów rzeki tematycznej
W Apache ECharts wykresy rzeki tematycznej używajątype: 'themeRiver'. Zamiast polegać na tradycyjnychxAxis i yAxis, wykres działa na pojedynczej poziomejsingleAxis z type: 'time' lub type: 'value'. Elementy danych są przekazywane jako krotki tablicowe w formacie[time, value, categoryName].
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres rzeki tematycznej, skonfigurujsingleAxis typu'time', określtype: 'themeRiver'w swoich serii i podaj obserwacje przepływu w tablicydatatablicy:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data: ['Tech', 'Moda', '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, 'Tech'],
['2026-02-01', 24, 'Tech'],
['2026-03-01', 32, 'Tech'],
['2026-04-01', 18, 'Tech'],
['2026-01-01', 15, 'Moda'],
['2026-02-01', 18, 'Moda'],
['2026-03-01', 10, 'Moda'],
['2026-04-01', 25, 'Moda'],
['2026-01-01', 8, 'Sport'],
['2026-02-01', 12, 'Sport'],
['2026-03-01', 28, 'Sport'],
['2026-04-01', 20, 'Sport']
]
}
]
};
Zaawansowane techniki strukturalne
Wykresy rzek tematycznych wyróżniają się podczas monitorowania złożonych zdarzeń wielokategorii na długich sekwencjach czasowych z niestandardowymi podpowiadaczkami i stylizowanymi paletami kategorii.
1. Przepływ objętości mediów wielopotonowy
Dostosowanie kolorów strumieni za pomocą jawnych przypisań palet i niestandardowych podpowiadaczy osi przekształca surowe logi zdarzeń w czystą chronologię aktywności:
const categories = ['Artykuły', 'Odwiedziny wideo', 'Odtworzenia podcastów', 'Udostępnienia w mediach społecznościowych'];
option = {
title: {
text: 'Strumienie zaangażowania treści',
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, 'Artykuły'], ['2026-02-01', 200, 'Artykuły'], ['2026-03-01', 150, 'Artykuły'], ['2026-04-01', 80, 'Artykuły'],
['2026-01-01', 60, 'Odwiedziny wideo'], ['2026-02-01', 140, 'Odwiedziny wideo'], ['2026-03-01', 220, 'Odwiedziny wideo'], ['2026-04-01', 310, 'Odwiedziny wideo'],
['2026-01-01', 30, 'Odtworzenia podcastów'], ['2026-02-01', 45, 'Odtworzenia podcastów'], ['2026-03-01', 90, 'Odtworzenia podcastów'], ['2026-04-01', 110, 'Odtworzenia podcastów'],
['2026-01-01', 180, 'Udostępnienia w mediach społecznościowych'], ['2026-02-01', 110, 'Udostępnienia w mediach społecznościowych'], ['2026-03-01', 70, 'Udostępnienia w mediach społecznościowych'], ['2026-04-01', 95, 'Udostępnienia w mediach społecznościowych']
]
}
]
};
Strategiczne najlepsze praktyki
- Poprawnie formatuj krotki danych: Każda pozycja w
datatablicy musi być dokładnie w kolejności[data, wartość, nazwaKategorii]aby ECharts poprawnie przetwarzał i stosował ciągłe strumienie. - Ogranicz rozprzestrzenienie kategorii: Zachowaj liczbę różnych kategorii pomiędzy 3 a 7. Zbyt wiele strumieni powoduje, że poszczególne pasy stają się wąskie i trudne do śledzenia w różnych punktach czasu.
- Wykorzystaj
singleAxisrozmiar: DostosujtopibottomnasingleAxiswłaściwość do kontrolowania wewnętrznych wypełnień pionowych i zapobiegania przycinaniu etykiet strumieni zewnętrznych do krawędzi kontenera.