Lors du suivi des transferts continus, des distributions de ressources ou des parcours utilisateur à plusieurs étapes, le Diagramme de Sankey est l’outil de visualisation de premier choix. En dessinant des bandes de flux proportionnelles entre des nœuds d’étapes séquentielles, les diagrammes de Sankey illustrent comment les quantités totales se divisent, se combinent et transitent à travers des systèmes complexes—par exemple les tunnels de conversion des utilisateurs sur un site web, les réseaux de distribution d’énergie ou les affectations budgétaires au sein d’une organisation.
Le fonctionnement des diagrammes de Sankey
Dans Apache ECharts, les diagrammes de Sankey utilisent type : 'sankey'. Similaire aux diagrammes de graphes, un diagramme de Sankey est défini par une liste de nœuds (ou data) et des links (ou arêtes). Chaque lien contient un nom de source de nœud, un nom de cible de nœud, et une valeur numérique valeur qui détermine la largeur visuelle de la ligne de flux connectant les nœuds.
1. Configuration essentielle
Pour construire un diagramme de Sankey basique, déclarez vos éléments de nœud à l’intérieur de data et définissez les volumes de flux orientés dans links:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: 'Revenu total' },
{ name: 'Ventes de produits' },
{ name: 'Services' },
{ name: 'Marketing' },
{ name: 'Recherche et développement' },
{ name: 'Bénéfice' }
],
links: [
{ source: 'Revenu total', target: 'Ventes de produits', value: 70 },
{ source: 'Revenu total', target: 'Services', value: 30 },
{ source: 'Ventes de produits', target: 'Marketing', value: 30 },
{ source: 'Ventes de produits', target: 'Recherche et développement', value: 25 },
{ source: 'Ventes de produits', target: 'Bénéfice', value: 15 },
{ source: 'Services', target: 'Bénéfice', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.5
}
}
]
};
Techniques structurelles avancées
Les diagrammes Sankey peuvent être personnalisés avec des orientations de flux verticales, des couleurs de nœuds à plusieurs niveaux et une mise en évidence dynamique des liens pour suivre des chemins individuels à travers des réseaux complexes.
1. Orientation du flux vertical
Définir orient: 'vertical' pour transformer les flux horizontaux des étapes en une vue en cascade verticale du haut vers le bas :
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
nodeWidth: 20,
nodeGap: 16,
data: [
{ name: 'Visites du site web' },
{ name: 'Page produit' },
{ name: 'Rebond direct' },
{ name: 'Panier' },
{ name: 'Paiement' }
],
links: [
{ source: 'Visites du site web', target: 'Page produit', value: 1000 },
{ source: 'Visites du site web', target: 'Rebond direct', value: 400 },
{ source: 'Page produit', target: 'Panier', value: 600 },
{ source: 'Panier', target: 'Paiement', value: 450 }
],
lineStyle: {
color: 'source',
curveness: 0.5
}
}
]
};
Affinage du layout et du style des liens
Ajuster l’écartement des nœuds, la courbure des lignes et les comportements de mise en évidence au survol maintient les flux complexes à plusieurs étapes propres et lisibles.
1. Contrôle de l’écartement des nœuds et flux en dégradé source-cible
Personnaliser nodeGap et définir lineStyle.color: 'gradient' crée des transitions de couleur fluides entre les étapes :
option = {
series: [
{
type: 'sankey',
left: '5%',
right: '15%',
nodeWidth: 24,
nodeGap: 18,
draggable: true,
label: {
position: 'right',
color: '#333',
fontSize: 12
},
data: [
{ name: 'Source A', itemStyle: { color: '#5470c6' } },
{ name: 'Source B', itemStyle: { color: '#91cc75' } },
{ name: 'Étape 1', itemStyle: { color: '#fac858' } },
{ name: 'Étape 2', itemStyle: { color: '#ee6666' } },
{ name: 'Sortie finale', itemStyle: { color: '#73c0de' } }
],
links: [
{ source: 'Source A', target: 'Étape 1', value: 50 },
{ source: 'Source B', target: 'Étape 1', value: 30 },
{ source: 'Étape 1', target: 'Étape 2', value: 60 },
{ source: 'Étape 1', target: 'Sortie finale', value: 20 },
{ source: 'Étape 2', target: 'Sortie finale', value: 60 }
],
lineStyle: {
color: 'gradient',
curveness: 0.6,
opacity: 0.4
}
}
]
};
Meilleures pratiques stratégiques
- Maintenir la conservation du flux : Assurez-vous que la somme des valeurs entrant dans un nœud est égale ou logiquement explique les valeurs sortantes afin d’éviter des écarts visuels trompeurs.
- Activer
emphasis.focus : 'adjacence': Lors de la gestion des flux à plusieurs étapes, se concentrer sur les liens adjacents au survol permet aux utilisateurs d’isoler des parcours spécifiques sans bruit visuel. - Utilisez les liens en dégradé : Définir
lineStyle.color : 'dégradé'fonds progressivement la couleur du nœud source dans celle du nœud cible, rendant les transitions à plusieurs étapes visuellement intuitives.