{"id":2075,"date":"2026-07-24T09:00:08","date_gmt":"2026-07-24T09:00:08","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/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\/id\/docs\/vpascode-docs\/echarts-playbook\/column-chart-core-setup-styling-and-layout-guide","title":{"rendered":"Diagram Batang: Pengaturan Inti, Gaya, dan Tata Letak"},"content":{"rendered":"

Di dunia visualisasi data dan pelaporan, Diagram Batang<\/strong> (diagram batang vertikal) adalah alat utama untuk membandingkan kategori diskret atas satu atau beberapa metrik. Berbeda dengan diagram batang horizontal yang sangat cocok untuk label teks panjang, diagram batang vertikal menggunakan perbedaan tinggi untuk secara langsung menyampaikan volume, pertumbuhan, dan variasi<\/em>. Apakah Anda menampilkan angka penjualan kuartalan, lonjakan penggunaan CPU server, atau lalu lintas web berdasarkan saluran, diagram batang memberikan standar visual yang jelas untuk metrik berbasis kategori.<\/p>\n

Mekanisme Kolom Vertikal<\/h2>\n

Di Apache ECharts, baik diagram batang horizontal maupun diagram batang vertikal bergantung pada 'bar'<\/code> tipe seri. Faktor kunci yang menciptakan diagram batang adalah menempatkan label kategori pada sumbu horizontal (xAxis<\/code>) sementara mengatur sumbu vertikal (yAxis<\/code>) ke nilai numerik. Mesin grafik membaca array data dan secara dinamis menyesuaikan tinggi setiap batang vertikal sesuai dengan skala numerik.<\/p>\n

1. Pengaturan Dasar<\/h3>\n

Untuk membuat diagram batang dasar, tentukan sumbu X berbasis kategori dan peta dataset Anda ke objek seri dengan type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nEdit ECharts di 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: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']\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>\nEdit ECharts di VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Teknik Struktural Lanjutan<\/h2>\n
Ketika membuat dashboard, diagram satu-seri yang sederhana sering kali tidak cukup. ECharts menyediakan opsi sintaks bersih untuk mengelola perbandingan multi-seri, dimensi khusus, dan jarak tata letak.<\/p>\n
Perbandingan Multi-Seri<\/h3>\n
Untuk membandingkan beberapa dataset secara berdampingan (seperti pendapatan tahunan berurutan), tambahkan beberapa objek di dalam array series<\/code> array. Mesin tata letak akan mengelompokkan kolom terkait per kategori sepanjang sumbu X:<\/p>\n
\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nEdit ECharts di 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: 'Pendapatan 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Pendapatan 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>\nEdit ECharts di VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Gaya Kolom Kustom dan Penyorotan Individual<\/h3>\n
Anda dapat menerapkan gaya global ke seluruh seri atau menargetkan titik data tertentu secara langsung. Ini sangat berguna untuk menyoroti peristiwa penting, pencilan, atau target tertentu.<\/p>\n