Gdy śledzisz stopniowy spadek w kolejnych krokach lub przepływach konwersji, standardowym narzędziem wizualnym jestWykres w kształcie stożka jest standardowym narzędziem wizualnym. Przedstawiając wartości jako ułożone na sobie trapezoidalne bloki, które się zwężają lub rozszerzają w kolejnych etapach, wykresy w kształcie stożka pozwalają użytkownikom zauważyćzakłócenia konwersji, tempo spadku i wydajność procesu na pierwszy rzut oka – na przykład etapy rurociągu sprzedaży, przebieg zakupów w e-commerce lub funele generowania leadów.
Zasady działania wykresów w kształcie stożka
W Apache ECharts wykresy w kształcie stożka są renderowane przy użyciutype: 'funnel'. Każdy obiekt danych zawieraname oraz liczbowąvalue. Silnik automatycznie sortuje dane od największych do najmniejszych (lub odwrotnie) i skaluje szerokość każdego trapezu względem maksymalnej wartości w serii.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres w kształcie stożka, podaj etapy kategorii w tablicy danych serii i ustawtype: 'funnel':
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['Zapytania', 'Propozycje', 'Oferty', 'Negocjacje', 'Umowy']
},
series: [
{
name: 'Funel sprzedaży',
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: 'Zapytania' },
{ value: 80, name: 'Propozycje' },
{ value: 60, name: 'Oferty' },
{ value: 40, name: 'Negocjacje' },
{ value: 20, name: 'Umowy' }
]
}
]
};
Zaawansowane techniki strukturalne
Wykresy w kształcie stożka można dostosować za pomocą układów piramidalnych, niestandardowych wyrównań etapów lub nakładania dwóch stożków, aby porównać różne kanały konwersji.
1. Odwrócony układ piramidalny i niestandardowe wyrównania
Zmieńsort: 'ascending' aby utworzyć odwróconą piramidę, lub dostosujfunnelAlign aby wyrównać etapy do lewego lub prawego krawędzi:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Piramida konwersji',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // Rysuje najmniejszy etap na górze, największy na dole
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: 'Etap 1: Zdrowa świadomość' },
{ value: 40, name: 'Etap 2: Zainteresowanie' },
{ value: 60, name: 'Etap 3: Decyzja' },
{ value: 80, name: 'Etap 4: Działanie' }
]
}
]
};
Dokładna dostosowanie układu i stylizacja etapów
Dodanie odstępów, zaokrąglonych krawędzi i niestandardowych formaterów etykiet tworzy czyste odstępy między etapami konwersji.
1. Dostosowane odstępy między etapami i etykiety z procentami
Kontroluj odstępu odstępy między trapezoidami i użyj niestandardowych formaterów etykiet, aby podkreślić procentową utratę na każdym etapie:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} Użytkowników'
},
series: [
{
name: 'Wprowadzanie użytkowników',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // Dodaje wyraźne rozdzielenie między etapami
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: 'Odwiedziny aplikacji' },
{ value: 3400, name: 'Rejestracje' },
{ value: 2100, name: 'Ustawienie profilu' },
{ value: 1200, name: 'Pierwsze działanie' },
{ value: 800, name: 'Zapisani' }
]
}
]
};
Strategiczne najlepsze praktyki
- Utrzymuj etapy w kolejności: Wykresy w kształcie stożka opierają się na logice sekwencyjnego przepływu. Upewnij się, że elementy danych reprezentują rzeczywiste krok po kroku procesy, a nie niepowiązane kategorie.
- Użyj
odstępudo wyraźnych wizualnych granic etapów: Ustawienie małegoodstępu(np. 4px do 6px) między trapezoidami zapobiega rozmywaniu się sąsiednich kolorów w jedną całość. - Wyświetl procenty etapów: Połącz liczby surowe z procentami kroków (np. używając
{d}%w formaterach etykiet), aby użytkownicy mogli natychmiast ocenić współczynniki spadku na każdym etapie.