Khi bạn cần theo dõi cả tổng thể tích tổng thể và đóng góp của từng thành phần con riêng lẻ theo thời gian, thìBiểu đồ vùng chồng là công cụ trực quan hóa lý tưởng. Việc chồng các vùng theo chiều dọc tạo ra một cái nhìn liên tục tổng hợp, trong đó đường nằm trên cùng đại diện cho tổng cộng, trong khi độ rộng của từng dải riêng lẻ cho thấy sự thay đổi trong đóng góp của các nhóm con, ví dụ như lượng truy cập web tổng thể được phân theo công cụ tìm kiếm, hữu cơ và kênh giới thiệu trực tiếp trong vài tháng.
Cơ chế của biểu đồ vùng chồng
Biểu đồ vùng chồng kết hợp cấu hình chuỗi đường với thuộc tính stacktương ứng. Khi bộ xử lý hiển thị phát hiện các định danh stackgiống nhau trên nhiều chuỗi có type: 'line' và areaStyle hoạt động, nó sẽ chồng từng điểm dữ liệu lần lượt phía trên đường đi của chuỗi trước đó dọc theo trục Y thẳng đứng.
1. Cài đặt cơ bản
Để xây dựng biểu đồ vùng chồng cơ bản, xác định trục X liên tục, đặt type: 'line' trên mỗi chuỗi, bật chức năng areaStyle, và gán một định danh giống nhau stackcho tất cả các chuỗi:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['Email', 'Quảng cáo Liên minh', 'Quảng cáo Video', 'Trực tiếp']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy', 'Chủ Nhật']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Tổng',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Quảng cáo Liên minh',
type: 'line',
stack: 'Tổng',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Quảng cáo Video',
type: 'line',
stack: 'Tổng',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Trực tiếp',
type: 'line',
stack: 'Tổng',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ vùng chồng có thể được cấu hình để tập trung vào tăng trưởng tích lũy tổng thể hoặc các thay đổi tỷ lệ tương đối theo thời gian.
1. Biểu đồ vùng phần trăm chuẩn hóa 100%
Khi đánh giá các thay đổi tỷ lệ thay vì tổng thể tích tích lũy theo thời gian, hãy chuẩn hóa bộ dữ liệu của bạn về 100% tại mỗi điểm thời gian ngang:
option = {
tooltip: {
trigger: 'axis',
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: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Máy tính để bàn',
type: 'line',
stack: 'phần trăm',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: 'Di động',
type: 'line',
stack: 'phần trăm',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: 'Máy tính bảng',
type: 'line',
stack: 'phần trăm',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
Tinh chỉnh bố cục và định dạng
Vì các vùng chồng lên nhau che hoàn toàn nền, việc điều chỉnh độ mờ của phần điền và nét vẽ đường giúp các lớp riêng lẻ vẫn rõ ràng và dễ đọc.
1. Độ mờ lớp tùy chỉnh và các đường phân cách viền
Đặt các nét vẽ đường liền trên các vùng điền trong suốt nhẹ tạo ra các ranh giới thị giác rõ ràng giữa các dải chồng lên nhau kề nhau:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Sản phẩm A',
type: 'line',
stack: 'khối lượng',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: 'Sản phẩm B',
type: 'line',
stack: 'khối lượng',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: 'Sản phẩm C',
type: 'line',
stack: 'khối lượng',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
Các thực hành tốt chiến lược
- Cố định các chuỗi ổn định ở dưới cùng:Đặt chuỗi lớn nhất hoặc ít biến động nhất ở dưới cùng của chồng để tạo ra một nền tảng dự đoán được cho các dải ở phía trên nó.
- Giới hạn số lượng dải:Chồng hơn 4 đến 5 chuỗi sẽ khiến các dải ở giữa khó đánh giá chính xác. Hãy cân nhắc nhóm các danh mục nhỏ vào danh mục ‘Khác’.
- Sử dụng
axisPointer: { type: 'cross' }:Kết hợp các đường chéo di chuột với tooltip liên tục giúp xác định chính xác các giá trị ngày cụ thể trên các chồng dọc dày đặc trở nên đơn giản.