Wykres słupkowy: podstawowa konfiguracja, stylizacja i układ

W dziedzinie wizualizacji danych i raportowania, Wykres słupkowy (wykres słupkowy pionowy) jest podstawowym narzędziem do porównywania dyskretnych kategorii w jednym lub wielu metrykach. W przeciwieństwie do wykresów słupkowych poziomych, które są idealne dla długich etykiet tekstowych, wykresy słupkowe pionowe wykorzystują różnice wysokości, aby natychmiast przekazać objętość, wzrost i zmienność. Niezależnie od tego, czy prezentujesz kwartalne dane sprzedaży, szczyty wykorzystania CPU serwera czy ruch internetowy według kanałów, wykresy słupkowe zapewniają jasny wizualny standard dla metryk opartych na kategoriach.

Zasady działania słupków pionowych

W Apache ECharts zarówno wykresy słupkowe poziome, jak i pionowe opierają się na typie serii 'bar' serii. Kluczowym czynnikiem tworzącym wykres słupkowy jest umieszczenie etykiet kategorii na osi poziomej (xAxis), podczas gdy oś pionowa (yAxis) ma wartości liczbowe. Silnik wykresów odczytuje tablicę danych i dynamicznie skaluje wysokość każdego słupka pionowego względem skali liczbowej.

1. Podstawowa konfiguracja

Aby stworzyć podstawowy wykres słupkowy, zdefiniuj oś X opartą na kategoriach i przypisz dane do obiektu serii z type: 'bar':

option = {
    xAxis: {
        type: 'category',
        data: ['Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob', 'Nied']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};

Zaawansowane techniki strukturalne

Podczas tworzenia pulpitu monitoringu proste wykresy jednoseryjne są często niewystarczające. ECharts oferuje czyste opcje składni, aby zarządzać porównaniami wieloseryjnymi, niestandardowymi wymiarami i odstępami układu.

Porównanie wieloseryjne

Aby porównać wiele zestawów danych obok siebie (np. przychód rok po roku), dodaj wiele obiektów wewnątrz tablicy seriestablicy. Silnik układu grupuje powiązane słupki według kategorii wzdłuż osi X:

option = {
    xAxis: {
        type: 'category',
        data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Przychód 2025',
            type: 'bar',
            data: [320, 332, 301, 334]
        },
        {
            name: 'Przychód 2026',
            type: 'bar',
            data: [220, 182, 191, 234]
        }
    ]
};

Niestandardowe style kolumn i indywidualne wyróżnianie

Możesz stosować style globalne do całej serii lub bezpośrednio wybierać konkretne punkty danych. Jest to szczególnie przydatne do wyróżnienia kluczowych zdarzeń, wartości odstających lub określonych celów.

• kolor: Ustawia kolor wypełnienia (hex, RGB lub gradienty liniowe).
• borderRadius: Dodaje zaokrąglenia do krawędzi kolumn (np. [5, 5, 0, 0] dla górnych rogów).
• przezroczystość: Dostosowuje przezroczystość kolumn.
• shadowBlur & shadowColor: Dodaje podniesienie i cienie rzucane przez kolumny.

option = {
    xAxis: {
        type: 'category',
        data: ['Bezpośrednie', 'Email', 'Sieci reklamowe', 'Reklamy wideo', 'Wyszukiwanie']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [
                320,
                332,
                {
                    value: 401,
                    // Wyróżnij pojedynczą kolumnę z maksimum
                    itemStyle: {
                        color: '#ee6666',
                        borderRadius: [6, 6, 0, 0]
                    }
                },
                334,
                390
            ],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Dokładna dostosowanie układu i rozmiarów

Wymiary kolumn i odstępy znacząco wpływają na czytelność, szczególnie podczas wyświetlania wykresów na ekranach odpowiednich lub gęstych pulpitach.

1. Kontrola szerokości i ograniczeń

Domyślnie szerokość kolumn skaluje się dynamicznie w zależności od kontenera wykresu. Możesz kontrolować te proporcje za pomocą właściwości rozmiarów:

• barWidth: Definiuje szerokość kolumny za pomocą stałych pikseli lub procentu szerokości kategorii (np. '30%').
• barMaxWidth: Ustala górne ograniczenie szerokości, aby kolumny nie rozciągały się nadmiernie na wyświetlaczach o szerokim formacie.
• barMinHeight: Wymusza minimalną wysokość w pikselach, aby wartości bliskie zera nadal były klikalne i widoczne.

2. Odstępy między kolumnami i tła kolumn

Aby nadać kolumnom nowoczesny wygląd pulpitu, dostosuj odstępy wewnętrzne lub włącz tła obejmujące całą wysokość:

option = {
    xAxis: {
        type: 'category',
        data: ['Pon', 'Wto', 'Śro', 'Czw', 'Pią']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            barWidth: '40%',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.15)',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Strategiczne najlepsze praktyki

• Utrzymuj zrównoważone odstępy: Unikaj ustawiania barWidth zbyt szeroką (powyżej 60%), aby uniknąć uczucia zatłoczenia w układzie wizualnym.
• Decyzja między poziomem a pionem: Używaj wykresów kolumnowych, gdy etykiety kategorii są krótkie (np. miesiące, kwartały, kody). Jeśli Twoje etykiety to długie opisy lub nazwy, rozważ przesunięcie danych kategorii na oś yAxis aby stworzyć wykres słupkowy poziomy zamiast pionowego.
• Integralność zera jako podstawy: Zawsze utrzymuj oś liczbową zaczynającą się od zera (0). Skracanie dolnej skali na wykresach kolumnowych zniekształca stosunki wysokości i myli odbiorców.