Lors du suivi de la perte progressive à travers des étapes séquentielles ou des pipelines de conversion, le Diagram en entonnoir est l’outil visuel standard. En affichant les valeurs sous forme de blocs trapézoïdaux empilés qui se resserrent ou s’élargissent à travers les étapes, les diagrammes en entonnoir permettent aux utilisateurs d’identifier les points de congestion de conversion, les taux de perte et l’efficacité du processus d’un coup d’œil — par exemple les étapes du pipeline de ventes, les parcours de paiement en e-commerce ou les entonnoirs de génération de leads.
Le fonctionnement des diagrammes en entonnoir
Dans Apache ECharts, les diagrammes en entonnoir sont rendus en utilisant type: 'funnel'. Chaque objet de données contient un nom et une valeur numérique valeur. Le moteur trie automatiquement les données du plus grand au plus petit (ou inversement) et ajuste la largeur de chaque trapèze par rapport à la valeur maximale de la série.
1. Configuration de base
Pour créer un diagramme en entonnoir basique, fournissez les étapes catégorielles dans votre tableau de données de série et définissez type: 'funnel':
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['Demandes', 'Propositions', 'Devis', 'Négociations', 'Accords']
},
series: [
{
name: 'Entonnoir des ventes',
type: 'funnel',
left: '10%',
top: '18%',
bottom: '10%',
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
data: [
{ value: 100, name: 'Demandes' },
{ value: 80, name: 'Propositions' },
{ value: 60, name: 'Devis' },
{ value: 40, name: 'Négociations' },
{ value: 20, name: 'Accords' }
]
}
]
};
Techniques structurelles avancées
Les diagrammes en entonnoir peuvent être personnalisés avec des dispositions en pyramide, des alignements d’étapes personnalisés ou des superpositions de deux entonnoirs pour comparer différents canaux de conversion.
1. Disposition en pyramide inversée et alignements personnalisés
Changez sort: 'ascending' pour créer une pyramide inversée, ou ajustez funnelAlign pour aligner les étapes sur le bord gauche ou droit :
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} %'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Pyramide de conversion',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // Affiche la phase la plus petite en haut, la plus grande en bas
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: 'Étape 1 : Connaissance' },
{ value: 40, name: 'Étape 2 : Intérêt' },
{ value: 60, name: 'Étape 3 : Décision' },
{ value: 80, name: 'Étape 4 : Action' }
]
}
]
};
Affinage du layout et du style des étapes
Ajouter des espaces, des bords arrondis et des formateurs de libellés personnalisés crée un espacement propre entre les étapes de conversion.
1. Espacement personnalisé des étapes et libellés de pourcentage
Contrôler espacement l’espacement entre les trapèzes et utiliser des formateurs de libellés personnalisés pour mettre en évidence le taux de rétention de pourcentage à travers les étapes :
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} Utilisateurs'
},
series: [
{
name: 'Intégration des utilisateurs',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // Ajoute une séparation claire entre les étapes
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
borderRadius: 4
},
label: {
show: true,
position: 'inside',
formatter: '{b}n{c} ({d}%)',
color: '#fff',
fontSize: 12
},
data: [
{ value: 5000, name: 'Visites d'application' },
{ value: 3400, name: 'Inscriptions' },
{ value: 2100, name: 'Configuration du profil' },
{ value: 1200, name: 'Première action' },
{ value: 800, name: 'Abonnés' }
]
}
]
};
Meilleures pratiques stratégiques
- Garder les étapes dans l’ordre séquentiel :Les diagrammes en entonnoir reposent sur une logique de flux séquentiel. Assurez-vous que les éléments de données représentent des processus étape par étape réels plutôt que des catégories sans lien.
- Utilisez
espacementpour des limites visuelles claires des étapes : Définir un petitespacement(par exemple, 4px à 6px) entre les trapèzes empêche les couleurs adjacentes de se fondre ensemble en un seul bloc. - Afficher les pourcentages par étape : Combinez les nombres bruts avec les pourcentages par étape (par exemple, en utilisant
{d}%dans les formateurs de libellés) afin que les utilisateurs puissent évaluer instantanément les taux de perte à chaque étape.