Lorsque l’on suit l’évolution de plusieurs catégories continues au fil du temps — par exemple les ventes de produits par trimestre, les évolutions des thèmes dans les reportages ou les tendances de consommation médiatique — le Graphique de fleuve thématique (une forme spécialisée d’un streamgraph) offre une présentation intuitive et visuellement marquante. Contrairement aux graphiques classiques à aires empilées qui s’appuient sur une base plane, un graphique de fleuve thématique s’écoule horizontalement autour d’un axe central, créant une visualisation organique, ressemblant à un fleuve, où les courants individuels s’élargissent ou se rétrécissent en fonction des variations de valeurs quantitatives.
Le fonctionnement des graphiques de fleuve thématique
Dans Apache ECharts, les graphiques de fleuve thématique utilisent type : 'themeRiver'. Au lieu de compter sur les configurations traditionnelles xAxis et yAxis, le graphique fonctionne sur un seul axe horizontal singleAxis avec type : 'time' ou type : 'value'. Les éléments de données sont transmis sous forme de tuples de tableaux au format [time, value, categoryName].
1. Configuration essentielle
Pour créer un graphique de fleuve thématique de base, configurez un singleAxis de type 'time', précisez type : 'themeRiver' dans votre série, et fournissez vos observations de flux dans le tableau data tableau :
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data: ['Technologie', 'Mode', 'Sports']
},
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, 'Sports'],
['2026-02-01', 12, 'Sports'],
['2026-03-01', 28, 'Sports'],
['2026-04-01', 20, 'Sports']
]
}
]
};
Techniques structurelles avancées
Les graphiques de fleuve de thèmes excellent lorsqu’ils sont utilisés pour surveiller des événements complexes à plusieurs catégories sur de longues séquences chronologiques, avec des infobulles personnalisées et des palettes de catégories stylisées.
1. Flux de volume médiatique multi-flux
Personnaliser les couleurs des flux avec des mappages explicites de palette et des infobulles personnalisées sur les axes transforme les journaux d’événements bruts en une chronologie d’activité propre :
const categories = ['Articles', 'Vues de vidéos', 'Reproductions de podcasts', 'Partages sur les réseaux sociaux'];
option = {
title: {
text: 'Flux d’engagement avec le contenu',
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, 'Articles'], ['2026-02-01', 200, 'Articles'], ['2026-03-01', 150, 'Articles'], ['2026-04-01', 80, 'Articles'],
['2026-01-01', 60, 'Vues de vidéos'], ['2026-02-01', 140, 'Vues de vidéos'], ['2026-03-01', 220, 'Vues de vidéos'], ['2026-04-01', 310, 'Vues de vidéos'],
['2026-01-01', 30, 'Reproductions de podcasts'], ['2026-02-01', 45, 'Reproductions de podcasts'], ['2026-03-01', 90, 'Reproductions de podcasts'], ['2026-04-01', 110, 'Reproductions de podcasts'],
['2026-01-01', 180, 'Partages sur les réseaux sociaux'], ['2026-02-01', 110, 'Partages sur les réseaux sociaux'], ['2026-03-01', 70, 'Partages sur les réseaux sociaux'], ['2026-04-01', 95, 'Partages sur les réseaux sociaux']
]
}
]
};
Meilleures pratiques stratégiques
- Formater correctement les tuples de données : Chaque entrée dans le
datatableau doit suivre l’ordre exact[date, valeur, nomCatégorie]pour que ECharts puisse correctement découper et empiler les flux continus. - Limitez la dispersion des catégories : Maintenez le nombre de catégories distinctes entre 3 et 7. Trop de flux rendent les bandes individuelles étroites et difficiles à suivre à travers les points temporels.
- Exploitez
singleAxisTaille : Ajusteztopetbottomsur lesingleAxispropriété pour contrôler le remplissage vertical et empêcher les étiquettes de flux externes de se chevaucher avec les bords du conteneur.