Beim Verfolgen des fortschreitenden Abflusses über aufeinanderfolgende Schritte oder Konversionspfade ist das Trichterdiagramm ist das Standard-Visualisierungswerkzeug. Durch die Darstellung von Werten als gestapelte trapezförmige Blöcke, die sich über die Stufen hinweg verengen oder verbreitern, ermöglichen Trichterdiagramme es Benutzern, Konversionsengpässe, Abflussraten und Prozesseffizienz auf einen Blick zu erkennen – beispielsweise Stufen eines Verkaufspipelines, E-Commerce-Kassenabläufe oder Lead-Generierungstrichter.
Die Funktionsweise von Trichterdiagrammen
In Apache ECharts werden Trichterdiagramme mit Hilfe von type: 'funnel'. Jedes Datenobjekt enthält eine name und einen numerischen wert. Die Engine sortiert die Daten automatisch von größt zu klein (oder umgekehrt) und skaliert die Breite jedes Trapezes im Verhältnis zum maximalen Wert in der Serie.
1. Grundlegende Einrichtung
Um ein grundlegendes Trichterdiagramm zu erstellen, geben Sie Kategoriestufen innerhalb Ihres Series-Datenarrays an und legen Sie fest type: 'funnel':
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['Anfragen', 'Angebote', 'Angebote', 'Verhandlungen', 'Abschlüsse']
},
series: [
{
name: 'Verkaufstrichter',
type: 'funnel',
left: '10%',
top: '18%',
bottom: '10%',
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'absteigend',
gap: 2,
label: {
show: true,
position: 'innen'
},
data: [
{ value: 100, name: 'Anfragen' },
{ value: 80, name: 'Angebote' },
{ value: 60, name: 'Angebote' },
{ value: 40, name: 'Verhandlungen' },
{ value: 20, name: 'Abschlüsse' }
]
}
]
};
Fortgeschrittene strukturelle Techniken
Trichterdiagramme können mit Pyramidenlayouts, benutzerdefinierten Stufen-Ausrichtungen oder doppelten Trichter-Überlagerungen angepasst werden, um verschiedene Konversionskanäle zu vergleichen.
1. Umgekehrtes Pyramidenlayout und benutzerdefinierte Ausrichtungen
Ändern Sie sort: 'aufsteigend' um eine umgekehrte Pyramide zu erstellen, oder passen Sie funnelAlign an, um die Stufen entlang der linken oder rechten Kante auszurichten:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Konversionspyramide',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // Zeichnet die kleinste Stufe oben, die größte unten
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: 'Stufe 1: Aufmerksamkeit' },
{ value: 40, name: 'Stufe 2: Interesse' },
{ value: 60, name: 'Stufe 3: Entscheidung' },
{ value: 80, name: 'Stufe 4: Aktion' }
]
}
]
};
Feinabstimmung von Layout und Stil der Stufen
Durch Hinzufügen von Abständen, abgerundeten Rändern und benutzerdefinierten Label-Formatierungen entsteht ein sauberer Abstand zwischen den Konversionsstufen.
1. Benutzerdefinierte Abstände zwischen Stufen und Prozentangaben
Steuerung Abstand Abstand zwischen Trapezen und Verwendung benutzerdefinierter Label-Formatierungen, um die Prozentualität der Beibehaltung über die Stufen hinweg hervorzuheben:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} Benutzer'
},
series: [
{
name: 'Benutzer-Onboarding',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // Fügt klare Trennung zwischen den Stufen hinzu
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: 'App-Besuche' },
{ value: 3400, name: 'Anmeldungen' },
{ value: 2100, name: 'Profil-Einrichtung' },
{ value: 1200, name: 'Erste Aktion' },
{ value: 800, name: 'Abonniert' }
]
}
]
};
Strategische Best Practices
- Halten Sie die Stufen sequenziell:Funnel-Diagramme basieren auf einer sequenziellen Ablauflogik. Stellen Sie sicher, dass die Datenelemente tatsächliche Schritt-für-Schritt-Prozesse darstellen und keine unzusammenhängenden Kategorien.
- Verwenden Sie
Abstandfür klare visuelle Grenzen der Stufen: Legen Sie einen kleinenAbstand(z. B. 4px bis 6px) zwischen Trapezen verhindert, dass benachbarte Farben ineinanderfließen und zu einem einzigen Block verschmelzen. - Stufenprozente anzeigen: Kombinieren Sie Rohzahlen mit Schritt-Prozenten (z. B. unter Verwendung von
{d}%in Label-Formatierungen), damit Benutzer die Abwanderungsquoten an jedem Meilenstein sofort bewerten können.