Diagram Batang: Pengaturan Inti, Gaya, dan Tata Letak

Di dunia visualisasi data dan pelaporan, Diagram Batang (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. 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.

Mekanisme Kolom Vertikal

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

1. Pengaturan Dasar

Untuk membuat diagram batang dasar, tentukan sumbu X berbasis kategori dan peta dataset Anda ke objek seri dengan type: 'bar':

option = {
    xAxis: {
        type: 'category',
        data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};

Teknik Struktural Lanjutan

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.

Perbandingan Multi-Seri

Untuk membandingkan beberapa dataset secara berdampingan (seperti pendapatan tahunan berurutan), tambahkan beberapa objek di dalam array series array. Mesin tata letak akan mengelompokkan kolom terkait per kategori sepanjang sumbu X:

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

Gaya Kolom Kustom dan Penyorotan Individual

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.

• warna: Menetapkan warna isi (hex, RGB, atau gradien linier).
• borderRadius: Menambahkan sudut melengkung pada kolom (misalnya, [5, 5, 0, 0] untuk sudut atas).
• opacity: Menyesuaikan transparansi kolom.
• shadowBlur & shadowColor: Menambahkan elevasi dan bayangan jatuh pada kolom.

option = {
    xAxis: {
        type: 'category',
        data: ['Langsung', 'Email', 'Jaringan Iklan', 'Iklan Video', 'Pencarian']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [
                320,
                332,
                {
                    value: 401,
                    // Soroti satu kolom puncak
                    itemStyle: {
                        color: '#ee6666',
                        borderRadius: [6, 6, 0, 0]
                    }
                },
                334,
                390
            ],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Penyesuaian Halus Tata Letak dan Ukuran

Dimensi kolom dan jarak antar kolom secara signifikan memengaruhi keterbacaan, terutama saat menampilkan grafik di layar responsif atau dasbor yang padat.

1. Mengendalikan Lebar dan Batasan

Secara default, lebar kolom berubah secara dinamis berdasarkan container grafik. Anda dapat mengendalikan proporsi ini menggunakan properti ukuran:

• barWidth: Menentukan lebar kolom menggunakan piksel tetap atau persentase dari lebar kategori (misalnya, '30%').
• barMaxWidth: Menetapkan batas atas pada lebar agar kolom tidak terlalu memanjang pada tampilan layar lebar.
• barMinHeight: Memaksa tinggi minimum dalam piksel agar nilai yang mendekati nol tetap dapat diklik dan terlihat.

2. Jarak Kolom dan Jalur Latar Belakang Penuh

Untuk memberikan tampilan dashboard modern pada kolom Anda, sesuaikan jarak dalam atau aktifkan jalur latar belakang penuh tinggi:

option = {
    xAxis: {
        type: 'category',
        data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum']
    },
    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]
            }
        }
    ]
};

Praktik Terbaik Strategis

• Jaga Keseimbangan Jarak: Hindari mengatur barWidth terlalu lebar (di atas 60%) untuk mencegah tata letak visual terasa terlalu padat.
• Keputusan Horizontal vs. Vertikal: Gunakan grafik batang ketika label kategori pendek (misalnya, bulan, kuartal, kode). Jika label Anda adalah deskripsi panjang atau nama, pertimbangkan untuk menukar data kategori ke yAxis untuk membuat grafik batang horizontal sebagai gantinya.
• Integritas Garis Dasar Nol: Selalu pertahankan sumbu numerik dimulai dari nol (0). Memotong skala bagian bawah pada grafik batang menyebabkan rasio tinggi menjadi tidak akurat dan menyesatkan pemirsa.