Biểu đồ cột: Bố cục ngang và tối ưu hóa nhãn

Ngang Biểu đồ cộtrất lý tưởng để hiển thị dữ liệu xếp hạng, tên danh mục dài dòng hoặc các chỉ số tiến độ. Bằng cách kéo dài các cột dọc theo trục X, cấu trúc trực quan này cung cấp đủ không gian ngang cho nhãn danh mục, loại bỏ nhu cầu nghiêng hoặc cắt ngắn văn bản. Dù bạn đang xây dựng bảng xếp hạng top-10, phân tích phản hồi khảo sát hay so sánh hiệu suất theo chiều ngang, biểu đồ cột đều mang lại khả năng đọc rõ ràng trên cả màn hình máy tính để bàn và di động.

Cơ chế của các thanh ngang

Trong Apache ECharts, biểu đồ cột và biểu đồ cột sử dụng kiểu chuỗi giống hệt nhau 'bar' kiểu chuỗi. Việc chuyển sang bố cục ngang xảy ra bằng cách gán dữ liệu danh mục trực tiếp vào trục đứng (yAxis) và xác định trục ngang (xAxis) là trục giá trị số. Bộ động lực biểu đồ sẽ xoay hướng hiển thị, vẽ các thanh theo chiều ngang từ trái sang phải.

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

Để xây dựng biểu đồ cột ngang cơ bản, hãy đặt type: 'category' trên yAxis và cung cấp mảng dữ liệu của bạn, trong khi đặt type: 'value' trên xAxis:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China']
    },
    series: [
        {
            type: 'bar',
            data: [214, 273, 331, 1380, 1411]
        }
    ]
};

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

Biểu đồ cột ngang hỗ trợ nhiều nhóm dữ liệu, làm nổi bật mục tiêu và xử lý góc tùy chỉnh cho các thiết kế bảng điều khiển hiện đại.

1. So sánh ngang đa chuỗi

Đặt nhiều đối tượng trong chuỗi mảng để tạo các thanh ngang nhóm theo nhãn danh mục:

option = {
    chú thích: {
        dữ liệu: ['Mục tiêu 2025', 'Thực tế 2025']
    },
    trụcX: {
        loại: 'giá trị'
    },
    trụcY: {
        loại: 'danh mục',
        dữ liệu: ['Dự án A', 'Dự án B', 'Dự án C', 'Dự án D']
    },
    chuỗi: [
        {
            tên: 'Mục tiêu 2025',
            loại: 'thanh',
            dữ liệu: [80, 95, 70, 85]
        },
        {
            tên: 'Thực tế 2025',
            loại: 'thanh',
            dữ liệu: [85, 90, 75, 92]
        }
    ]
};

2. Viền tròn ở hai đầu và định dạng nổi bật

Áp dụng viền tròn ở góc phải bằng cách sử dụngborderRadius trên các thanh ngang (xác định[góc trên phải, góc dưới phải, góc dưới trái, góc trên trái]):

option = {
    trụcX: {
        loại: 'giá trị'
    },
    trụcY: {
        loại: 'danh mục',
        dữ liệu: ['Tìm kiếm trực tiếp', 'Chiến dịch Email', 'Mạng xã hội', 'Tìm kiếm trả phí']
    },
    chuỗi: [
        {
            loại: 'thanh',
            dữ liệu: [
                120,
                200,
                {
                    giá trị: 450,
                    kiểu mục: {
                        màu: '#fac858'
                    }
                },
                280
            ],
            kiểu mục: {
                màu: '#91cc75',
                borderRadius: [0, 6, 6, 0] // Chỉ làm tròn các đầu bên phải
            }
        }
    ]
};

Tinh chỉnh bố cục và khoảng cách

Vì các nhãn danh mục ngang có độ dài văn bản khác nhau, việc điều chỉnh lề trái và căn chỉnh nhãn sẽ ngăn chặn hiện tượng nhãn bị cắt.

1. Lề lưới của container

Sử dụng khối cấu hìnhgrid để cấp đủ không gian cho các nhãn trục Y dài:

option = {
    lưới: {
        trái: '15%',  // Tăng lề trái cho văn bản danh mục dài
        phải: '8%',
        dưới: '10%',
        chứaNhãn: true
    },
    trụcX: {
        loại: 'giá trị'
    },
    trụcY: {
        loại: 'danh mục',
        dữ liệu: [
            'Hiện đại hóa cơ sở hạ tầng doanh nghiệp',
            'Giai đoạn 2 chuyển đổi đám mây',
            'Tối ưu hóa cơ sở dữ liệu',
            'Thiết kế lại cổng API'
        ]
    },
    chuỗi: [
        {
            loại: 'thanh',
            dữ liệu: [75, 60, 90, 40],
            độRộngThành: '50%'
        }
    ]
};

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

• Sắp xếp dữ liệu một cách có chủ ý: Sắp xếp các thanh ngang theo thứ tự tăng dần hoặc giảm dần mỗi khi có thể. Danh sách được xếp hạng giúp người đọc nhận ra ngay lập tức những người dẫn đầu.
• Sử dụngcontainLabel: true: Luôn luôn bao gồm containLabel: true bên trong lưới cấu hình để ngăn các tiêu đề danh mục dài bị tràn ra khỏi mép bảng vẽ.
• Nhãn giá trị trực tiếp: Để bảng xếp hạng sạch sẽ, hãy cân nhắc hiển thị các giá trị dữ liệu trực tiếp ở cuối mỗi thanh bằng cách sử dụng label: { show: true, position: 'right' } và ẩn hoàn toàn trục dọc số học.