Wykres słupkowy: poziome układanie i optymalizacja etykiet

Poziomy Wykresy słupkowesą idealne do wyświetlania danych rankingowych, długich nazw kategorii lub metryk postępu. Przerysowanie słupków wzdłuż osi X zapewnia etykiety kategorii wystarczająco dużo miejsca poziomego, eliminując konieczność nachylania lub skracania tekstu. Niezależnie od tego, czy tworzysz tabele liderów z 10 najlepszych, analizę odpowiedzi ankietowych czy porównania wydajności w poziomie, wykresy słupkowe zapewniają czytelność na ekranach zarówno stacjonarnych, jak i mobilnych.

Zasady działania poziomych słupków

W Apache ECharts wykresy słupkowe i wykresy słupkowe używają dokładnie tego samego 'bar' typu serii. Przejście do układu poziomego następuje poprzez przypisanie danych kategorii bezpośrednio do osi pionowej (yAxis), a definiowanie osi poziomej (xAxis) jako osi wartości liczbowych. Silnik wykresów zmienia kierunek renderowania, rysując słupki poziomo od lewej do prawej.

1. Podstawowa konfiguracja

Aby stworzyć podstawowy poziomy wykres słupkowy, ustaw type: 'category' na yAxis i podaj tablicę danych, jednocześnie ustawiając type: 'value' na xAxis:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Brazylia', 'Indonezja', 'USA', 'Indie', 'Chiny']
    },
    series: [
        {
            type: 'bar',
            data: [214, 273, 331, 1380, 1411]
        }
    ]
};

Zaawansowane techniki strukturalne

Poziome wykresy słupkowe wspierają wiele grup danych, celowe wyróżnianie oraz niestandardowe przetworzenie rogów dla nowoczesnych projektów pulpitu.

1. Poziome porównanie wielu serii

Umieść wiele obiektów w szeregi tablica do utworzenia grupowanych poziomych słupków dla etykiety kategorii:

option = {
    legend: {
        data: ['Cel na 2025', 'Faktyczne 2025']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Projekt A', 'Projekt B', 'Projekt C', 'Projekt D']
    },
    series: [
        {
            name: 'Cel na 2025',
            type: 'bar',
            data: [80, 95, 70, 85]
        },
        {
            name: 'Faktyczne 2025',
            type: 'bar',
            data: [85, 90, 75, 92]
        }
    ]
};

2. Zaokrąglone końcówki i styl podświetlenia

Zastosuj zaokrąglone prawe narożniki przy użyciuborderRadius na poziomych słupkach (określając[prawy-górny, prawy-dolny, lewy-dolny, lewy-górny]):

option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Wyszukiwanie bezpośrednie', 'Kampanie e-mailowe', 'Media społecznościowe', 'Wyszukiwanie płatne']
    },
    series: [
        {
            type: 'bar',
            data: [
                120,
                200,
                {
                    value: 450,
                    itemStyle: {
                        color: '#fac858'
                    }
                },
                280
            ],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [0, 6, 6, 0] // Zaokrąglij tylko prawe końcówki
            }
        }
    ]
};

Dokładna dostosowanie układu i odstępów

Ponieważ poziome etykiety kategorii różnią się długością tekstu, dostosowanie lewych marginesów i wyrównania etykiet zapobiega przycinaniu etykiet.

1. Marginesy siatki kontenera

Użyj bloku konfiguracjigrid do przydzielenia wystarczającej przestrzeni dla długich etykiet osi Y:

option = {
    grid: {
        left: '15%',  // Zwiększ margines lewy dla długich etykiet kategorii
        right: '8%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: [
            'Modernizacja infrastruktury przedsiębiorstwa',
            'Faza 2 migracji do chmury',
            'Optymalizacja bazy danych',
            'Przebudowa bramy interfejsu API'
        ]
    },
    series: [
        {
            type: 'bar',
            data: [75, 60, 90, 40],
            barWidth: '50%'
        }
    ]
};

Strategiczne najlepsze praktyki

• Sortuj dane celowo: Ustawaj poziome słupki w kolejności rosnącej lub malejącej, gdy to możliwe. Listy uporządkowane pozwolą czytelnikom natychmiast zauważyć najlepszych wykonawców.
• UżyjcontainLabel: true: Zawsze uwzględnij containLabel: true wewnątrz siatki konfigurację, aby zapobiec przepływaniu długich tytułów kategorii poza krawędzią płótna.
• Etykiety wartości bezpośrednich: Aby uzyskać czyste listy liderów, rozważ wyświetlanie wartości danych bezpośrednio na końcu każdej belki przy użyciu label: { show: true, position: 'right' } i całkowite ukrycie osi numerycznej na dole.