Để nhấn mạnh cả hướng xu hướng và khối lượng tổng thể theo thời gian liên tục, thìBiểu đồ vùngcung cấp một cách tiếp cận trực quan sinh động. Bằng cách điền đầy vùng giữa đường xu hướng và trục ngang, biểu đồ vùng thu hút sự chú ý vào độ lớn tương đối và sự thay đổi khối lượng tổng thể qua các chuỗi dữ liệu, chẳng hạn như tiêu thụ băng thông máy chủ, khối lượng người dùng hoạt động, hoặc lưu lượng giao dịch hàng ngày.
Cơ chế của biểu đồ vùng
Biểu đồ vùng được xây dựng trực tiếp từ cấu hình biểu đồ đường. Bằng cách thiết lậptype: 'line'và bao gồm mộtareaStyletính năng trên một đối tượng chuỗi, bộ xử lý hiển thị sẽ tự động điền không gian hình học phía dưới đường đi đến đường chuẩn ngang.
1. Cài đặt cơ bản
Để xây dựng biểu đồ vùng cơ bản, xác định trục X liên tục, đặt seriestype: 'line', và khai báo một đối tượngareaStylerỗng hoặc được tùy chỉnh:
option = {
tooltip: {
trigger: 'axis'
},
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: [
{
type: 'line',
smooth: true,
areaStyle: {}, // Kích hoạt điền vùng mặc định
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ vùng có thể được nâng cao bằng các dải màu hiện đại và đường cong mượt mà để cải thiện độ dễ đọc và vẻ ngoài trực quan.
1. Định dạng điền dải màu
Việc điền màu đồng nhất đôi khi có cảm giác nặng nề. Áp dụng dải màu tuyến tính bán trong suốt sẽ tạo ra vẻ ngoài hiện đại, tinh tế, nơi phần điền dần mờ dần về trục ngang phía dưới:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: '#5470c6'
},
areaStyle: {
opacity: 0.8,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
]
}
},
data: [320, 450, 410, 680, 890, 950]
}
]
};
2. So sánh biểu đồ vùng đa chuỗi chồng lấn
Khi hiển thị nhiều chuỗi biểu đồ vùng trong một biểu đồ duy nhất, việc điều chỉnh độ mờ điền là rất quan trọng để các đường dữ liệu nền vẫn hoàn toàn rõ ràng:
option = {
tooltip: {
trigger: 'trục'
},
legend: {
data: ['Lưu lượng đến', 'Lưu lượng đi']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Lưu lượng đến',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [120, 200, 450, 600, 700, 380]
},
{
name: 'Lưu lượng đi',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [80, 140, 310, 420, 510, 260]
}
]
};
Tinh chỉnh bố cục và khoảng cách
Vì phần đổ màu kéo dài đến tận đường cơ sở trục Y, nên cấu hình khoảng cách biên liên tục sẽ giữ cho phần đổ màu được căn chỉnh gọn gàng với viền khung hình.
1. Căn chỉnh mép liền mạch
Bằng cách thiết lậpboundaryGap: falsetrên trục X loại danh mục, phần đổ màu bắt đầu từ mép trái tuyệt đối của lưới chứa và kết thúc gọn gàng ở phía bên phải:
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: 'rgba(145, 204, 117, 0.3)'
},
lineStyle: {
color: '#91cc75',
width: 2
},
data: [150, 230, 224, 318]
}
]
};
Các thực hành tốt chiến lược
- Sử dụng độ mờ đổ màu thấp:Các vùng đổ màu đầy sẽ che khuất các đường lưới nền và các chuỗi chồng chéo. Luôn duy trì mức độ trong suốt khoảng 20% đến 50% để tạo độ tương phản cao.
- Giữ số lượng chuỗi ở mức 2 hoặc 3:Quá nhiều hình dạng vùng chồng chéo sẽ gây nhầm lẫn về mặt thị giác. Đối với 4 hoặc nhiều hơn bộ dữ liệu tích lũy liên tục, hãy sử dụng biểu đồ vùng chồng thay vào đó.
- Thiết lập
boundaryGap: false:Loại bỏ khoảng cách ngang trên trục thời gian cho phép phần đổ màu bao phủ toàn bộ chiều rộng lưới mà không để lại khoảng trống trống rỗng khó chịu ở hai mép trái và phải.