複数の連続するカテゴリが時間とともにどのように変化するかを追跡する場合——四半期ごとの製品販売、ニュース報道におけるトピックのトレンド変化、メディア消費パターンなど——そのテーマリバーチャート（ストリームグラフの特殊な形）は直感的で視覚的に印象的な表現を提供します。平坦な基準線に固定される通常の積み上げ面積グラフとは異なり、テーマリバーチャートは中央軸の周りを水平に流れ、個々の流れが定量的な値の変化に応じて広がったり狭まったりする、自然で川のような視覚化を実現します。
テーマリバーチャートの仕組み
Apache EChartsでは、テーマリバーチャートはtype: 'themeRiver'を使用します。従来のxAxisとyAxisの設定に頼るのではなく、単一の水平なsingleAxisを用いて、type: 'time'またはtype: 'value'の設定を行います。データ項目は、[time, value, categoryName].
1. 必須の設定
基本的なテーマリバーチャートを作成するには、singleAxisを'time'タイプとして設定し、type: 'themeRiver'をシリーズに指定し、流れの観測データをdata配列に提供します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data: ['テック', 'ファッション', 'スポーツ']
},
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, 'テック'],
['2026-02-01', 24, 'テック'],
['2026-03-01', 32, 'テック'],
['2026-04-01', 18, 'テック'],
['2026-01-01', 15, 'ファッション'],
['2026-02-01', 18, 'ファッション'],
['2026-03-01', 10, 'ファッション'],
['2026-04-01', 25, 'ファッション'],
['2026-01-01', 8, 'スポーツ'],
['2026-02-01', 12, 'スポーツ'],
['2026-03-01', 28, 'スポーツ'],
['2026-04-01', 20, 'スポーツ']
]
}
]
};
高度な構造技術
テーマリバー図は、カスタムツールチップとスタイル化されたカテゴリパレットを備えた、長期間のタイムラインシーケンスで複雑な複数カテゴリイベントを監視する際に特に優れています。
1. マルチストリームメディアボリュームフロー
明確なパレットマッピングとカスタム軸ツールチップを使用してストリームカラーをカスタマイズすることで、原始的なイベントログがクリーンなアクティビティタイムラインに変換されます：
ECharts
Edit ECharts in VPasCode
const categories = ['記事', '動画視聴数', 'ポッドキャスト再生数', 'ソーシャル共有数'];
option = {
title: {
text: 'コンテンツエンゲージメントストリーム',
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, '記事'], ['2026-02-01', 200, '記事'], ['2026-03-01', 150, '記事'], ['2026-04-01', 80, '記事'],
['2026-01-01', 60, '動画視聴数'], ['2026-02-01', 140, '動画視聴数'], ['2026-03-01', 220, '動画視聴数'], ['2026-04-01', 310, '動画視聴数'],
['2026-01-01', 30, 'ポッドキャスト再生数'], ['2026-02-01', 45, 'ポッドキャスト再生数'], ['2026-03-01', 90, 'ポッドキャスト再生数'], ['2026-04-01', 110, 'ポッドキャスト再生数'],
['2026-01-01', 180, 'ソーシャル共有数'], ['2026-02-01', 110, 'ソーシャル共有数'], ['2026-03-01', 70, 'ソーシャル共有数'], ['2026-04-01', 95, 'ソーシャル共有数']
]
}
]
};
戦略的なベストプラクティス
- データタプルを正しくフォーマットする： 各エントリは
data配列は正確な順序[日付, 値, カテゴリ名]EChartsが連続ストリームを適切にスライスおよびスタックできるようにするためです。 - カテゴリの拡散を制限する：異なるカテゴリの数を3から7の間に抑えてください。ストリームが多すぎると、個々のバンドが細くなり、時間軸上で追跡しにくくなります。
-
singleAxisサイジング：topおよびbottomのsingleAxis上下の余白を制御し、コンテナの端縁に外側のストリームラベルがはみ出るのを防ぐプロパティ。