Biểu đồ cột: Cài đặt cốt lõi, định dạng và bố cục

Trong lĩnh vực trực quan hóa dữ liệu và báo cáo, Biểu đồ cột (một biểu đồ cột thẳng đứng) là công cụ chính để so sánh các danh mục rời rạc theo một hoặc nhiều chỉ số. Khác với biểu đồ cột ngang phù hợp với các nhãn văn bản dài, biểu đồ cột thẳng đứng sử dụng sự khác biệt về chiều cao để ngay lập tức truyền đạt khối lượng, tăng trưởng và độ biến thiên. Dù bạn đang hiển thị số liệu doanh thu theo quý, các đợt tăng đột biến sử dụng CPU của máy chủ hay lưu lượng truy cập web theo kênh, biểu đồ cột đều cung cấp một chuẩn hình ảnh rõ ràng cho các chỉ số dựa trên danh mục.

Cơ chế của các cột thẳng đứng

Trong Apache ECharts, cả biểu đồ cột ngang và biểu đồ cột thẳng đứng đều dựa vào loại chuỗi 'bar' loại chuỗi. Yếu tố then chốt tạo nên biểu đồ cột là đặt các nhãn danh mục trên trục ngang (xAxis) trong khi đặt trục đứng (yAxis) thành các giá trị số. Bộ xử lý biểu đồ đọc mảng dữ liệu và thay đổi chiều cao của từng cột thẳng đứng một cách động theo thang số.

1. Cài đặt cơ bản

Để xây dựng biểu đồ cột cơ bản, hãy xác định trục X dựa trên danh mục và ánh xạ tập dữ liệu của bạn vào một đối tượng chuỗi với type: 'bar':

option = {
    xAxis: {
        type: 'category',
        data: ['Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy', 'Chủ Nhật']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};

Các kỹ thuật cấu trúc nâng cao

Khi xây dựng bảng điều khiển, các biểu đồ đơn giản một chuỗi thường không đủ. ECharts cung cấp các tùy chọn cú pháp sạch để quản lý so sánh đa chuỗi, các chiều tùy chỉnh và khoảng cách bố cục.

So sánh đa chuỗi

Để so sánh nhiều tập dữ liệu cạnh nhau (ví dụ như doanh thu theo năm), hãy thêm nhiều đối tượng bên trong mảng seriesmảng. Bộ động lực bố cục sẽ nhóm các cột liên quan theo từng danh mục dọc theo trục X:

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

Phong cách cột tùy chỉnh và làm nổi bật từng điểm dữ liệu riêng lẻ

Bạn có thể áp dụng các phong cách toàn cục cho toàn bộ chuỗi hoặc nhắm trực tiếp đến các điểm dữ liệu cụ thể. Điều này đặc biệt hữu ích để làm nổi bật các sự kiện quan trọng, các điểm ngoại lệ hoặc các mục tiêu cụ thể.

• màu sắc: Thiết lập màu đổ (hex, RGB hoặc gradient tuyến tính).
• bán kính viền: Thêm viền bo tròn cho các cột (ví dụ: [5, 5, 0, 0] cho các góc trên).
• độ mờ: Điều chỉnh độ trong suốt của cột.
• mờ đổ bóng & màu đổ bóng: Thêm độ nâng cao và bóng đổ cho các cột.

option = {
    xAxis: {
        type: 'category',
        data: ['Trực tiếp', 'Email', 'Mạng quảng cáo', 'Quảng cáo video', 'Tìm kiếm']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [
                320,
                332,
                {
                    value: 401,
                    // Làm nổi bật một cột đỉnh đơn lẻ
                    itemStyle: {
                        color: '#ee6666',
                        borderRadius: [6, 6, 0, 0]
                    }
                },
                334,
                390
            ],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Tinh chỉnh bố cục và kích thước

Kích thước cột và khoảng cách giữa các cột ảnh hưởng đáng kể đến độ dễ đọc, đặc biệt khi hiển thị biểu đồ trên các màn hình phản hồi hoặc bảng điều khiển dày đặc.

1. Kiểm soát chiều rộng và giới hạn

Mặc định, chiều rộng cột thay đổi động dựa trên kích thước khung biểu đồ. Bạn có thể kiểm soát các tỷ lệ này bằng cách sử dụng các thuộc tính định kích thước:

• barWidth: Xác định chiều rộng cột bằng pixel cố định hoặc phần trăm chiều rộng danh mục (ví dụ: '30%').
• barMaxWidth: Thiết lập giới hạn trên cho chiều rộng để các cột không bị kéo dài quá mức trên màn hình rộng.
• chiều cao tối thiểu thanh: Áp dụng chiều cao tối thiểu theo pixel để các giá trị gần bằng không vẫn có thể nhấp vào và hiển thị rõ ràng.

2. Khoảng cách cột và các đường nền đầy đủ chiều cao

Để các cột của bạn có vẻ ngoài hiện đại như bảng điều khiển, hãy điều chỉnh khoảng cách bên trong hoặc bật các đường nền đầy đủ chiều cao:

option = {
    xAxis: {
        type: 'category',
        data: ['Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu']
    },
    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]
            }
        }
    ]
};

Các thực hành tốt chiến lược

• Duy trì khoảng cách cân bằng:Tránh đặtbarWidthquá rộng (trên 60%) để tránh bố cục hình ảnh cảm giác quá chật chội.
• Quyết định theo hướng ngang hay dọc:Sử dụng biểu đồ cột khi nhãn danh mục ngắn (ví dụ: tháng, quý, mã). Nếu nhãn của bạn là mô tả dài hoặc tên, hãy cân nhắc chuyển dữ liệu danh mục sang trục yAxisđể tạo biểu đồ cột ngang thay vì biểu đồ cột dọc.
• Tính toàn vẹn đường cơ sở bằng không:Luôn giữ trục số bắt đầu từ zero (0). Cắt bỏ phần thang đo phía dưới trong biểu đồ cột sẽ làm méo lệch tỷ lệ chiều cao và gây hiểu lầm cho người xem.