Podczas śledzenia ciągłych przepływów, dystrybucji zasobów lub wieloetapowych tras użytkowników, Wykres Sankey’ego jest najważniejszym narzędziem wizualizacji. Rysując proporcjonalne pasma przepływu między kolejnymi węzłami etapów, wykresy Sankey’ego ilustrują jak całkowite ilości dzielą się, łączą się i przechodzą przez złożone systemy—na przykład funele konwersji użytkowników na stronie internetowej, sieci dystrybucji energii lub alokacje budżetów organizacji.
Zasada działania wykresów Sankey’ego
W Apache ECharts wykresy Sankey’ego używają type: 'sankey'. Podobnie jak wykresy grafowe, wykres Sankey’ego jest definiowany przez listę różnych węzłów (lub data) oraz skierowanych links (lub krawędzi). Każde połączenie zawiera nazwę węzła źródławęzła, nazwę węzła docelowegowęzła i liczbę wartościktóra określa szerokość wizualną linii przepływu łączącej.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres Sankey’ego, zadeklaruj swoje elementy węzłów wewnątrz data i zdefiniuj objętości skierowanych przepływów w links:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: 'Całkowity przychód' },
{ name: 'Sprzedaż produktów' },
{ name: 'Usługi' },
{ name: 'Marketing' },
{ name: 'Badania i rozwój' },
{ name: 'Zysk' }
],
links: [
{ source: 'Całkowity przychód', target: 'Sprzedaż produktów', value: 70 },
{ source: 'Całkowity przychód', target: 'Usługi', value: 30 },
{ source: 'Sprzedaż produktów', target: 'Marketing', value: 30 },
{ source: 'Sprzedaż produktów', target: 'Badania i rozwój', value: 25 },
{ source: 'Sprzedaż produktów', target: 'Zysk', value: 15 },
{ source: 'Usługi', target: 'Zysk', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.5
}
}
]
};
Zaawansowane techniki strukturalne
Wykresy Sankey można dostosować do pionowego kierunku przepływu, wielopoziomowych kolorów węzłów oraz dynamicznego podświetlania połączeń w celu śledzenia indywidualnych ścieżek przez skomplikowane sieci.
1. Kierunek przepływu pionowy
Ustaw orient: 'vertical'aby przekształcić poziome przepływy etapów w widok wodospadu od góry do dołu:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
nodeWidth: 20,
nodeGap: 16,
data: [
{ name: 'Odwiedziny strony' },
{ name: 'Strona produktu' },
{ name: 'Bezpośrednie opuszczenie' },
{ name: 'Koszyk' },
{ name: 'Kasa' }
],
links: [
{ source: 'Odwiedziny strony', target: 'Strona produktu', value: 1000 },
{ source: 'Odwiedziny strony', target: 'Bezpośrednie opuszczenie', value: 400 },
{ source: 'Strona produktu', target: 'Koszyk', value: 600 },
{ source: 'Koszyk', target: 'Kasa', value: 450 }
],
lineStyle: {
color: 'source',
curveness: 0.5
}
}
]
};
Dokładna dostosowanie układu i stylizacji połączeń
Dostosowanie odstępów węzłów, krzywizny linii oraz zachowania podświetlania przy najechaniu zapewnia przejrzystość i czytelność skomplikowanych przepływów wieloetapowych.
1. Kontrola odstępów między węzłami i gradientowe przepływy źródło-cel
Dostosowanie nodeGap oraz ustawienie lineStyle.color: 'gradient'tworzy płynne przejścia kolorów między etapami:
option = {
series: [
{
type: 'sankey',
left: '5%',
right: '15%',
nodeWidth: 24,
nodeGap: 18,
draggable: true,
label: {
position: 'right',
color: '#333',
fontSize: 12
},
data: [
{ name: 'Źródło A', itemStyle: { color: '#5470c6' } },
{ name: 'Źródło B', itemStyle: { color: '#91cc75' } },
{ name: 'Etap 1', itemStyle: { color: '#fac858' } },
{ name: 'Etap 2', itemStyle: { color: '#ee6666' } },
{ name: 'Ostateczny wynik', itemStyle: { color: '#73c0de' } }
],
links: [
{ source: 'Źródło A', target: 'Etap 1', value: 50 },
{ source: 'Źródło B', target: 'Etap 1', value: 30 },
{ source: 'Etap 1', target: 'Etap 2', value: 60 },
{ source: 'Etap 1', target: 'Ostateczny wynik', value: 20 },
{ source: 'Etap 2', target: 'Ostateczny wynik', value: 60 }
],
lineStyle: {
color: 'gradient',
curveness: 0.6,
opacity: 0.4
}
}
]
};
Strategiczne najlepsze praktyki
- Zachowaj zasadę zachowania przepływu: Upewnij się, że suma wartości wpływających do węzła równa się lub logicznie odpowiada wartościom wychodzącym, aby uniknąć mylących wizualnych przerw.
- Włącz
podkreślenie.fokus: 'sąsiedztwo':Przy obsłudze przepływów wielostopniowych skupianie się na sąsiednich połączeniach przy najechaniu pozwala użytkownikom wyodrębnić konkretne ścieżki bez zakłóceń wizualnych. - Użyj połączeń gradientowych: Ustawienie
lineStyle.color: 'gradient'płynnie łączy kolor węzła źródłowego z kolorem węzła docelowego, czyniąc przejścia wielostopniowe wizualnie intuicyjnymi.