So sánh các chỉ số phụ trên các tên danh mục dài dòng sẽ được xử lý tốt nhất bằng mộtBiểu đồ cột nhóm. Bằng cách đặt các thanh ngang liên quan cạnh nhau dọc theo trục Y, bố cục này cho phép người dùng quét các chỉ số hiệu suất qua nhiều danh mục mà không làm giảm độ rõ ràng của nhãn. Nó là lựa chọn hiệu quả cho việc phân tích ngân sách nhiều năm, so sánh tính năng sản phẩm hoặc các ngưỡng doanh số đa khu vực, nơi các nhãn danh mục cần không gian ngang rộng rãi.
Cơ chế của các thanh ngang nhóm
Giống như các nhóm cột dọc, các nhóm thanh ngang được tạo bằng cách gán các nhãn danh mục giống nhau cho trục Y trong khi định nghĩa nhiều chuỗi vớitype: 'bar'. Bộ xử lý hiển thị sẽ tự động xử lý nhóm hình ảnh, dịch chuyển từng chuỗi bên trong khối danh mục dọc theo mặt phẳng đứng.
1. Cài đặt cơ bản
Để xây dựng biểu đồ cột nhóm, gán các danh mục rời rạc của bạn vàoyAxis.data, xác định một trụcxAxis, và bao gồm nhiều chuỗi thanh:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Đã phân bổ 2025', 'Đã phân bổ 2026']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Nghiên cứu & Phát triển', 'Marketing & Bán hàng', 'Hỗ trợ khách hàng', 'Hoạt động']
},
series: [
{
name: 'Đã phân bổ 2025',
type: 'bar',
data: [320, 450, 210, 380]
},
{
name: 'Đã phân bổ 2026',
type: 'bar',
data: [380, 490, 240, 410]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Mở rộng biểu đồ của bạn lên ba hoặc nhiều chuỗi hơn sẽ cung cấp cái nhìn sâu sắc hơn, miễn là mật độ hình ảnh vẫn dễ đọc.
1. Định dạng đa chỉ số với các dải màu tùy chỉnh
Áp dụng các bảng màu độc đáo hoặc các lớp đổ màu nhạt across các chuỗi ngang để giữ cho các nhóm riêng biệt dễ đọc:
option = {
legend: {
data: ['Doanh số Q1', 'Doanh số Q2', 'Doanh số Q3']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Khu vực Bắc', 'Khu vực Nam', 'Khu vực Đông', 'Khu vực Tây']
},
series: [
{
name: 'Doanh số Q1',
type: 'bar',
data: [120, 200, 150, 80],
itemStyle: {
color: '#5470c6',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Doanh số Q2',
type: 'bar',
data: [140, 220, 170, 95],
itemStyle: {
color: '#91cc75',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Doanh số Q3',
type: 'bar',
data: [180, 250, 190, 110],
itemStyle: {
color: '#fac858',
borderRadius: [0, 4, 4, 0]
}
}
]
};
Tinh chỉnh bố cục và khoảng cách
Quản lý khoảng cách giữa các thanh dọc theo trục Y đứng là chìa khóa để duy trì sự tách biệt rõ ràng giữa các khối danh mục.
1. Khoảng cách nội bộ dọc và khoảng cách biên danh mục
Điều chỉnh các thuộc tính khoảng cách để giữ các thanh chuỗi được nhóm gọn gàng mà không trộn lẫn vào các nhóm danh mục kề bên:
option = {
grid: {
left: '20%',
right: '10%',
containLabel: true
},
legend: {
data: ['Điểm chuẩn', 'Đã tối ưu']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Thời gian phản hồi API', 'Thời gian truy vấn cơ sở dữ liệu', 'Thời gian tải tài sản']
},
series: [
{
name: 'Điểm chuẩn',
type: 'bar',
barGap: '15%', // Khoảng cách giữa các cột trong cùng một danh mục
barCategoryGap: '40%', // Khoảng cách giữa các khối danh mục
data: [350, 180, 520]
},
{
name: 'Đã tối ưu',
type: 'bar',
data: [120, 65, 210]
}
]
};
Các thực hành tốt chiến lược
- Giữ các nhóm tập trung:Giữ ở mức tối đa 3 hoặc 4 chuỗi cho mỗi danh mục. Vượt quá mức này, các biểu đồ chồng lên nhau hoặc biểu đồ đa khung sẽ phù hợp hơn để tránh sự lộn xộn thị giác theo chiều dọc.
- Phân bổ khoảng trống trục Y hợp lý:Các biểu đồ ngang nhóm chiếm chiều cao dọc đáng kể. Tăng chiều cao của khung chứa hoặc điều chỉnh
grid.leftđể tránh bị cắt ngắn văn bản. - Thứ tự đo lường nhất quán:Đảm bảo thứ tự chuỗi trong mã của bạn phù hợp với dòng chảy tự nhiên của câu chuyện của bạn (ví dụ: năm lịch sử đầu tiên, năm hiện tại thứ hai).