{"id":2076,"date":"2026-07-24T09:00:08","date_gmt":"2026-07-24T09:00:08","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/docs\/uncategorized\/column-chart-core-setup-styling-and-layout-guide\/"},"modified":"2026-07-24T09:00:08","modified_gmt":"2026-07-24T09:00:08","slug":"column-chart-core-setup-styling-and-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/echarts-playbook\/column-chart-core-setup-styling-and-layout-guide","title":{"rendered":"Wykres s\u0142upkowy: podstawowa konfiguracja, stylizacja i uk\u0142ad"},"content":{"rendered":"

W dziedzinie wizualizacji danych i raportowania, Wykres s\u0142upkowy<\/strong> (wykres s\u0142upkowy pionowy) jest podstawowym narz\u0119dziem do por\u00f3wnywania dyskretnych kategorii w jednym lub wielu metrykach. W przeciwie\u0144stwie do wykres\u00f3w s\u0142upkowych poziomych, kt\u00f3re s\u0105 idealne dla d\u0142ugich etykiet tekstowych, wykresy s\u0142upkowe pionowe wykorzystuj\u0105 r\u00f3\u017cnice wysoko\u015bci, aby natychmiast przekaza\u0107 obj\u0119to\u015b\u0107, wzrost i zmienno\u015b\u0107<\/em>. Niezale\u017cnie od tego, czy prezentujesz kwartalne dane sprzeda\u017cy, szczyty wykorzystania CPU serwera czy ruch internetowy wed\u0142ug kana\u0142\u00f3w, wykresy s\u0142upkowe zapewniaj\u0105 jasny wizualny standard dla metryk opartych na kategoriach.<\/p>\n

Zasady dzia\u0142ania s\u0142upk\u00f3w pionowych<\/h2>\n

W Apache ECharts zar\u00f3wno wykresy s\u0142upkowe poziome, jak i pionowe opieraj\u0105 si\u0119 na typie serii 'bar'<\/code> serii. Kluczowym czynnikiem tworz\u0105cym wykres s\u0142upkowy jest umieszczenie etykiet kategorii na osi poziomej (xAxis<\/code>), podczas gdy o\u015b pionowa (yAxis<\/code>) ma warto\u015bci liczbowe. Silnik wykres\u00f3w odczytuje tablic\u0119 danych i dynamicznie skaluje wysoko\u015b\u0107 ka\u017cdego s\u0142upka pionowego wzgl\u0119dem skali liczbowej.<\/p>\n

1. Podstawowa konfiguracja<\/h3>\n

Aby stworzy\u0107 podstawowy wykres s\u0142upkowy, zdefiniuj o\u015b X opart\u0105 na kategoriach i przypisz dane do obiektu serii z type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nEdytuj ECharts w VPasCode<\/span>\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Pon', 'Wto', '\u015aro', 'Czw', 'Pi\u0105', 'Sob', 'Nied']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'bar',\r\n            data: [120, 200, 150, 80, 70, 110, 130]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEdytuj ECharts w VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Zaawansowane techniki strukturalne<\/h2>\n
Podczas tworzenia pulpitu monitoringu proste wykresy jednoseryjne s\u0105 cz\u0119sto niewystarczaj\u0105ce. ECharts oferuje czyste opcje sk\u0142adni, aby zarz\u0105dza\u0107 por\u00f3wnaniami wieloseryjnymi, niestandardowymi wymiarami i odst\u0119pami uk\u0142adu.<\/p>\n
Por\u00f3wnanie wieloseryjne<\/h3>\n
Aby por\u00f3wna\u0107 wiele zestaw\u00f3w danych obok siebie (np. przych\u00f3d rok po roku), dodaj wiele obiekt\u00f3w wewn\u0105trz tablicy series<\/code>tablicy. Silnik uk\u0142adu grupuje powi\u0105zane s\u0142upki wed\u0142ug kategorii wzd\u0142u\u017c osi X:<\/p>\n
\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nEdytuj ECharts w VPasCode<\/span>\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Przych\u00f3d 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Przych\u00f3d 2026',\r\n            type: 'bar',\r\n            data: [220, 182, 191, 234]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEdytuj ECharts w VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Niestandardowe style kolumn i indywidualne wyr\u00f3\u017cnianie<\/h3>\n
Mo\u017cesz stosowa\u0107 style globalne do ca\u0142ej serii lub bezpo\u015brednio wybiera\u0107 konkretne punkty danych. Jest to szczeg\u00f3lnie przydatne do wyr\u00f3\u017cnienia kluczowych zdarze\u0144, warto\u015bci odstaj\u0105cych lub okre\u015blonych cel\u00f3w.<\/p>\n