Porównywanie metryk pomocniczych na długościach nazw kategorii najlepiej obsługiwane jest za pomocąWykres słupkowy skupiony. Umieszczając powiązane poziome słupki obok siebie wzdłuż osi Y, ten układ pozwala użytkownikom przeglądać metryki wydajności w wielu kategoriach bez utraty czytelności etykiet. Jest to skuteczny wybór do analizy budżetów wieloletnich, porównania funkcji produktu lub benchmarków sprzedaży w wielu regionach, gdzie etykiety kategorii wymagają znacznej przestrzeni poziomej.
Zasady działania poziomych słupków skupionych
Podobnie jak grupy słupków pionowych, grupy słupków poziomych tworzy się przypisując identyczne etykiety kategorii do osi Y, jednocześnie definiując wiele serii ztype: 'bar'. Silnik renderujący automatycznie obsługuje grupowanie wizualne, przesuwając każdą serię wewnątrz bloku kategorii wzdłuż płaszczyzny pionowej.
1. Podstawowa konfiguracja
Aby stworzyć wykres słupkowy skupiony, przypisz swoje dyskretne kategorie doyAxis.data, określ liczbęxAxis, a następnie dodaj wiele serii słupkowych:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Przydzielone w 2025', 'Przydzielone w 2026']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Badania i rozwój', 'Marketing i sprzedaż', 'Wsparcie klienta', 'Działalność operacyjna']
},
series: [
{
name: 'Przydzielone w 2025',
type: 'bar',
data: [320, 450, 210, 380]
},
{
name: 'Przydzielone w 2026',
type: 'bar',
data: [380, 490, 240, 410]
}
]
};
Zaawansowane techniki strukturalne
Rozszerzenie wykresu do trzech lub więcej serii zapewnia bogatsze wizualne informacje, pod warunkiem, że gęstość wizualna pozostaje łatwa do odczytania.
1. Stylizacja wielo-metryczna z niestandardowymi gradientami kolorów
Zastosuj unikalne palety kolorów lub subtelne wypełnienia gradientowe w serii poziomych, aby zachować czytelność różnych grup:
option = {
legend: {
data: ['Sprzedaż Q1', 'Sprzedaż Q2', 'Sprzedaż Q3']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Region Północny', 'Region Południowy', 'Region Wschodni', 'Region Zachodni']
},
series: [
{
name: 'Sprzedaż Q1',
type: 'bar',
data: [120, 200, 150, 80],
itemStyle: {
color: '#5470c6',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Sprzedaż Q2',
type: 'bar',
data: [140, 220, 170, 95],
itemStyle: {
color: '#91cc75',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Sprzedaż Q3',
type: 'bar',
data: [180, 250, 190, 110],
itemStyle: {
color: '#fac858',
borderRadius: [0, 4, 4, 0]
}
}
]
};
Dokładna korekta układu i odstępów
Zarządzanie odstępami między słupkami wzdłuż pionowej osi Y jest kluczowe dla utrzymania wyraźnego oddzielenia między blokami kategorii.
1. Pionowe odstępy wewnętrzne i marginesy kategorii
Dostosuj atrybuty odstępów, aby utrzymać słupki serii dobrze pogrupowane, bez łączenia się z sąsiednimi grupami kategorii:
option = {
siatka: {
lewy: '20%',
prawy: '10%',
zawieraEtykietę: true
},
legenda: {
dane: ['Podstawa', 'Optymalizacja']
},
ośX: {
typ: 'wartość'
},
ośY: {
typ: 'kategoria',
dane: ['Czas odpowiedzi API', 'Czas trwania zapytania do bazy danych', 'Czas ładowania zasobów']
},
serie: [
{
nazwa: 'Podstawa',
typ: 'słupki',
odstępSłupków: '15%', // Odstęp między słupkami w tej samej kategorii
odstępKategoriiSłupków: '40%', // Odstęp między blokami kategorii
dane: [350, 180, 520]
},
{
nazwa: 'Optymalizacja',
typ: 'słupki',
dane: [120, 65, 210]
}
]
};
Strategiczne najlepsze praktyki
- Zachowaj skupienie grup: Przestrzegaj maksymalnie 3 lub 4 serii na kategorię. Poza tym, wykresy nałożone lub wielopanelowe są lepiej dopasowane, aby uniknąć wizualnego zamieszania w pionie.
- Przydziel odpowiedni margines osi Y: Wykresy poziome grupowane zajmują znaczny wysokość pionową. Zwiększ wysokość kontenera lub dostosuj
siatka.lewyaby zapobiec obcinaniu tekstu. - Spójna kolejność miar: Upewnij się, że kolejność serii w kodzie odpowiada naturalnemu przebiegowi Twojej narracji (np. rok historyczny jako pierwszy, rok obecny jako drugi).