Để phân tích các thành phần phân tích trên các mục có tiêu đề danh mục dài, thì Biểu đồ cột chồng là lựa chọn lý tưởng. Bằng cách chồng các đoạn dữ liệu theo chiều ngang từ trái sang phải dọc theo trục Y, biểu đồ này duy trì độ rõ ràng của nhãn dài trong khi hiển thị cả tổng thể danh mục và sự phân bổ tỷ lệ nội bộ. Nó hoạt động rất tốt với kết quả khảo sát nhân khẩu học, phân bổ nguồn lực dự án theo bộ phận, hoặc các đường dẫn chuyển đổi đa kênh.
Cơ chế của các thanh ngang chồng lên nhau
Tạo biểu đồ cột chồng ngang bao gồm việc sử dụng thuộc tính stacktương tự như biểu đồ cột chồng, kết hợp với trục Y dựa trên danh mục. Khi nhiều type: 'bar'dãy dữ liệu chia sẻ một khóa stackgiống nhau ở định hướng ngang, bộ xử lý hiển thị sẽ tích lũy các giá trị từ trái sang phải dọc theo trục X.
1. Cài đặt cơ bản
Để xây dựng biểu đồ cột chồng cơ bản, đặt yAxis thành type: 'category', xAxis thành type: 'value', và gán một chuỗi stackphù hợp cho mỗi dãy dữ liệu:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Kỹ thuật', 'Sản phẩm', 'Thiết kế', 'Tiếp thị']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Dự án Alpha', 'Dự án Beta', 'Dự án Gamma', 'Dự án Delta']
},
series: [
{
name: 'Kỹ thuật',
type: 'bar',
stack: 'allocation',
data: [320, 302, 301, 334]
},
{
name: 'Sản phẩm',
type: 'bar',
stack: 'allocation',
data: [120, 132, 101, 134]
},
{
name: 'Thiết kế',
type: 'bar',
stack: 'allocation',
data: [220, 182, 191, 234]
},
{
name: 'Tiếp thị',
type: 'bar',
stack: 'allocation',
data: [150, 212, 201, 154]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Các thanh ngang chồng lên nhau có thể được cấu hình để so sánh thể tích tuyệt đối hoặc được chuẩn hóa để hiển thị tỷ lệ phần trăm giữa các danh mục.
1. Biểu đồ thanh ngang chuẩn hóa 100%
Để đánh giá tỷ lệ tương đối thay vì số lượng tuyệt đối trên các danh mục dài, hãy chuẩn hóa dữ liệu chuỗi của bạn để tổng bằng 100% cho mỗi hàng:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Hài lòng', 'Trung lập', 'Bất mãn']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'Thành công khách hàng doanh nghiệp',
'Dịch vụ hỗ trợ thị trường trung bình',
'Đăng ký tự phục vụ'
]
},
series: [
{
name: 'Hài lòng',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: 'Trung lập',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: 'Bất mãn',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
Tinh chỉnh bố cục và phong cách
Các đường viền thị giác rõ ràng và các đầu ngoài bo tròn mang lại cho các thanh chồng ngang vẻ ngoài tinh tế, hiện đại.
1. Tách biệt các đoạn và bo tròn đầu ngoài
Áp dụng các đường viền dọc mỏng để phân biệt các đoạn bên trong, và giới hạn phong cách bo góc chỉ cho đoạn cuối cùng ở bên phải:
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Ngân sách Q1', 'Ngân sách Q2', 'Ngân sách Q3', 'Ngân sách Q4']
},
series: [
{
name: 'Chi phí cố định',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Chi phí biến đổi',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Chi phí linh hoạt',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // Bo tròn các góc ở đầu bên phải
}
}
]
};
Các thực hành tốt chiến lược
- Đường chuẩn đoạn đầu tiên:Đoạn gần đường chuẩn trục Y nhất là đoạn dễ so sánh nhất giữa các danh mục. Luôn đặt thành phần quan trọng nhất của bạn vào đối tượng chuỗi đầu tiên.
- Hạn chế các thành phần chồng lên nhau:Giữ tổng số lượng đoạn chồng lên nhau ở mức 5 hoặc ít hơn mỗi thanh để duy trì phân tích thị giác rõ ràng mà không làm quá tải người xem.
- Nhãn văn bản trong thanh:Đối với các thanh chồng ngang có các đoạn rộng, hãy cân nhắc bật
label: { show: true, position: 'inside' }để các giá trị đoạn riêng lẻ có thể đọc được mà không cần phụ thuộc vào công cụ gợi ý khi di chuột.