Lorsque vous devez suivre à la fois le volume total global et les contributions individuelles des sous-composants au fil du temps, le Graphique en aires empilées est l’outil de visualisation idéal. Le remplissage des aires empilées verticalement crée une vue composite continue où la ligne supérieure représente le total cumulé, tandis que la largeur de chaque bande individuelle montre les contributions variables des sous-catégories, par exemple le trafic web total réparti par moteur de recherche, organique et canaux de référencement direct sur plusieurs mois.
Le fonctionnement des graphiques en aires empilées
Les graphiques en aires empilées combinent les configurations de séries en ligne avec des attributs correspondants stack attributs. Lorsque le moteur de rendu détecte des identifiants stack identiques sur plusieurs séries avec type : 'line' et areaStyle actifs, il empile chaque point de données séquentiellement au-dessus du chemin de ligne de la série précédente le long de l’axe vertical Y.
1. Configuration essentielle
Pour construire un graphique en aires empilées de base, définissez un axe X continu, définissez type : 'line' sur chaque série, activez areaStyle, et attribuez un identifiant identique stack à toutes les séries :
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
Techniques structurelles avancées
Les graphiques en aires empilées peuvent être configurés pour se concentrer soit sur la croissance cumulée globale, soit sur les variations proportionnelles relatives au fil du temps.
1. Graphique en aires en pourcentage normalisé à 100 %
Lorsque vous évaluez les variations proportionnelles plutôt que le volume total cumulé au fil du temps, normalisez votre jeu de données à 100 % par point temporel horizontal :
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Bureau', 'Mobile', 'Tablette']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Bureau',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: 'Mobile',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: 'Tablette',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
Affinage du layout et du style
Puisque les zones empilées couvrent entièrement l’arrière-plan, ajuster l’opacité du remplissage et les traits de ligne aide à maintenir les couches individuelles claires et lisibles.
1. Opacité personnalisée des couches et séparateurs de bord
Définir des traits de ligne solides sur des remplissages de zones légèrement translucides crée des frontières visuelles nettes entre les bandes empilées adjacentes :
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['T1', 'T2', 'T3', 'T4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produit A',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: 'Produit B',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: 'Produit C',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
Meilleures pratiques stratégiques
- Ancrez les séries stables en bas :Placez la série la plus grande ou la moins volatile en bas de la pile afin d’établir une base prévisible pour les bandes situées au-dessus.
- Limitez le nombre de bandes :Empiler plus de 4 à 5 séries rend les bandes du milieu difficiles à évaluer avec précision. Pensez à regrouper les catégories mineures dans une catégorie « Autres ».
- Utilisez
axisPointer: { type: 'cross' }:Combiner les repères de survol croisés avec un infobulle continue rend le repérage des valeurs de date spécifiques à travers des empilements verticaux denses simple.