Khi đánh giá sự phân rã cấu trúc qua các chỉ số rời rạc, thìBiểu đồ cột chồng mang lại cách hiệu quả để trực quan hóa phân bố từ phần đến toàn bộ. Khác với bố cục nhóm làm lan tỏa các chuỗi dữ liệu theo chiều ngang, biểu đồ chồng tích lũy các giá trị theo chiều dọc trong một biên giới cột duy nhất. Định dạng này giúp theo dõi dễ dàngsự tăng trưởng tổng thể của danh mục đồng thời theo dõi sự thay đổi tỷ trọng của các thành phần con bên trong, chẳng hạn như lưu lượng thiết bị chia theo hệ điều hành hoặc phân tích chi phí theo quý qua các phòng ban.
Cơ chế của các cột chồng
Biểu đồ cột chồng dựa vào việc gán mộtstackchỉ định tương ứng trên nhiều chuỗi. Khi bộ xử lý hiển thị phát hiện các giá trị chuỗistackgiống nhau trên một chuỗi cótype: 'bar', nó sẽ xếp chồng các giá trị số học theo thứ tự dọc theo trục Y thẳng đứng thay vì hiển thị các cột chồng lên nhau hoặc cạnh nhau.
1. Cài đặt cơ bản
Để xây dựng biểu đồ cột chồng cơ bản, hãy xác định trục X dựa trên danh mục và áp dụng thuộc tínhstackcho mỗi chuỗi trong mảngseriesmảng:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Trực tiếp', 'Tìm kiếm tự nhiên', 'Quảng cáo trả phí', 'Tham khảo']
},
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: [
{
name: 'Trực tiếp',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Tìm kiếm tự nhiên',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Quảng cáo trả phí',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Tham khảo',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ cột chồng có thể được điều chỉnh để hiển thị phân bố phần trăm hoặc nhóm con lựa chọn tùy theo yêu cầu phân tích của bạn.
1. Cột chồng được chuẩn hóa 100%
Khi mục tiêu chính của bạn là so sánh tỷ lệ phần trăm thay vì tổng số tuyệt đối, hãy chuyển đổi các giá trị dữ liệu thành phần trăm chuẩn hóa, tổng cộng 100% cho mỗi danh mục:
option = {
tooltip: {
trigger: 'trục',
axisPointer: { type: 'bóng đổ' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Máy tính để bàn', 'Di động', 'Máy tính bảng']
},
xAxis: {
type: 'danh mục',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'giá trị',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Máy tính để bàn',
type: 'cột',
stack: 'tỷ lệ phần trăm',
data: [60, 50, 45, 40]
},
{
name: 'Di động',
type: 'cột',
stack: 'tỷ lệ phần trăm',
data: [30, 40, 45, 50]
},
{
name: 'Máy tính bảng',
type: 'cột',
stack: 'tỷ lệ phần trăm',
data: [10, 10, 10, 10]
}
]
};
2. Nhóm chồng nhiều lớp
Bạn có thể kết hợp nhóm và chồng trong một bố cục duy nhất bằng cách sử dụng cáclớp chồngbiến thể khác nhau trên các chuỗi. Ví dụ, so sánh tổng thực tế với tổng mục tiêu, trong đó mỗi tổng được tạo thành từ các thành phần con được chồng lên nhau:
option = {
legend: {
data: ['Sản phẩm A Thực tế', 'Sản phẩm B Thực tế', 'Sản phẩm A Mục tiêu', 'Sản phẩm B Mục tiêu']
},
xAxis: {
type: 'danh mục',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'giá trị'
},
series: [
{
name: 'Sản phẩm A Thực tế',
type: 'cột',
stack: 'thực tế',
data: [120, 150, 180, 200]
},
{
name: 'Sản phẩm B Thực tế',
type: 'cột',
stack: 'thực tế',
data: [80, 90, 100, 110]
},
{
name: 'Sản phẩm A Mục tiêu',
type: 'cột',
stack: 'mục tiêu',
data: [130, 160, 190, 210]
},
{
name: 'Sản phẩm B Mục tiêu',
type: 'cột',
stack: 'mục tiêu',
data: [90, 100, 110, 120]
}
]
};
Tinh chỉnh bố cục và phong cách
Sự hoàn thiện về mặt thị giác là rất quan trọng đối với các cột chồng để đảm bảo các đoạn vẫn phân biệt được rõ ràng mà không gây mỏi mắt.
1. Biên giới đoạn và đầu đỉnh bo tròn
Áp dụng các đường viền sạch giữa các đoạn chồng và giới hạn việc bo góc chỉ áp dụng cho đoạn đầu tiên ở đỉnh của chồng:
option = {
xAxis: {
type: 'danh mục',
data: ['Thg 1', 'Thg 2', 'Thg 3', 'Thg 4']
},
yAxis: {
type: 'giá trị'
},
series: [
{
name: 'Lớp nền',
type: 'cột',
stack: 'tổng',
data: [320, 302, 301, 334],
itemStyle: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Lớp giữa',
type: 'cột',
stack: 'tổng',
data: [120, 132, 101, 134],
itemStyle: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Lớp trên cùng',
type: 'cột',
stack: 'tổng',
data: [220, 182, 191, 234],
itemStyle: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // Bo góc chỉ ở đoạn trên cùng
}
}
]
};
Các thực hành tốt chiến lược
- Hạn chế số lượng đoạn:Tránh chồng hơn 4 đến 5 danh mục trên mỗi cột. Vượt quá ngưỡng này, việc so sánh các đoạn ở giữa giữa các cột sẽ trở nên khó khăn về mặt thị giác.
- Cố định các mục chuẩn ở phía dưới:Đặt chỉ số quan trọng nhất hoặc thành phần con lớn nhất làm mục đầu tiên trong danh sách
seriesđể nó nằm ngay trên đường chuẩn, giúp căn chỉnh dễ dàng. - Sử dụng bảng màu tương phản cao hoặc viền:Áp dụng các đường viền trắng mờ giữa các đoạn để duy trì sự phân biệt rõ ràng khi các màu kề nhau có mức tương phản tương tự.