Khi theo dõi thói quen hàng ngày, lưu lượng truy cập trang web, nhật ký hoạt động máy chủ hoặc cường độ doanh số trong suốt các năm lịch, thìBiểu đồ Lịch cung cấp một bố cục trực quan hiệu quả dựa trên lưới. Được lấy cảm hứng từ biểu đồ đóng góp và bản đồ nhiệt theo mùa, biểu đồ lịch biểu diễn các chỉ số định lượng liên tục trên các ngày lịch cụ thể, giúp người dùng dễ dàng nhận diện các đỉnh hoạt động cao, sự thay đổi vào cuối tuần và các mẫu theo mùa kéo dài nhiều tháng.
Cơ chế của biểu đồ lịch
Trong Apache ECharts, biểu đồ lịch sử dụng một hệ tọa độ riêng biệtcalendar kết hợp với kiểu biểu đồheatmap hoặc scatter loại chuỗi. Thay vì các trục X và Y Descartes tiêu chuẩn, ECharts tự động tính toán vị trí lưới ngày và tháng bằng cách sử dụng chuỗi ngày tháng.
1. Cài đặt cơ bản
Để tạo một bản đồ nhiệt lịch hàng năm cơ bản, hãy xác định một thành phầncalendar với phạm vi được xác định (ví dụ như'2026'), gắn mộtvisualMap để điều khiển độ dốc màu của chỉ số, và truyền các bộ dữ liệu ngày-giá trị theo định dạng['YYYY-MM-DD', giá trị]:
option = {
title: {
top: 10,
left: 'center',
text: 'Số lần ghi nhận hàng ngày (2026)'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' lần ghi nhận';
}
},
visualMap: {
min: 0,
max: 100,
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 65,
inRange: {
color: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
}
},
calendar: {
top: 120,
left: 30,
right: 30,
cellSize: ['auto', 13],
range: '2026',
itemStyle: {
borderWidth: 0.5,
borderColor: '#ccc'
},
yearLabel: { show: false }
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: [
['2026-01-01', 12], ['2026-01-02', 45], ['2026-01-03', 88],
['2026-02-14', 95], ['2026-03-20', 30], ['2026-05-10', 65],
['2026-07-27', 82], ['2026-10-31', 99], ['2026-12-25', 10]
]
}
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ lịch có thể được điều chỉnh cho bố cục cuộn dọc hoặc tùy chỉnh bằng biểu diễn điểm để trực quan hóa các chỉ số hàng ngày rời rạc.
1. Góc nhìn lịch đa tháng dọc
Thay đổi orient: 'vertical' trên thành phần lịch để xếp các tháng theo chiều dọc—phù hợp với các thành phần bảng điều khiển cao hoặc bố cục di động:
option = {
title: {
text: 'Ghi chép Hoạt động Quý 1',
left: 'center'
},
tooltip: {},
visualMap: {
min: 0,
max: 500,
type: 'continuous',
orient: 'vertical',
right: 10,
top: 'center',
inRange: {
color: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']
}
},
calendar: {
top: 60,
left: 'center',
orient: 'vertical',
range: ['2026-01-01', '2026-03-31'],
cellSize: [20, 20],
yearLabel: { show: false },
dayLabel: {
firstDay: 1, // Bắt đầu tuần vào thứ Hai
nameMap: 'en'
},
monthLabel: { nameMap: 'en' }
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: [
['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],
['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]
]
}
};
Tinh chỉnh bố cục và định dạng
Kết hợp hệ tọa độ lịch với chuỗi phân tán cho phép bạn điều chỉnh kích thước điểm dựa trên độ mạnh thay vì chỉ dùng khối màu.
1. Lịch Bong bóng Phân tán
Sử dụng type: 'scatter' trên một lịchhệ tọa độ tạo ra các chỉ báo hàng ngày kiểu bong bóng tương tác:
option = {
title: {
text: 'Khối lượng Đơn hàng Hàng ngày',
left: 'center'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' đơn hàng';
}
},
calendar: {
top: 80,
left: 40,
right: 40,
range: '2026-05',
cellSize: ['auto', 25],
itemStyle: {
color: '#f8fafc',
borderWidth: 1,
borderColor: '#e2e8f0'
}
},
series: {
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: function (val) {
return val[1] / 10; // Điều chỉnh kích thước bong bóng theo số lượng đơn hàng
},
itemStyle: {
color: '#3b82f6',
opacity: 0.8
},
data: [
['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],
['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]
]
}
};
Các Thực hành Tối ưu Chiến lược
- Đồng bộ Ngày tháng theo Định dạng ISO: Đảm bảo các ngày trong mảng dữ liệu chuỗi của bạn tuân theo định dạng chuỗi tiêu chuẩn
'YYYY-MM-DD'định dạng chuỗi để lưới lịch ánh xạ chính xác các bản ghi. - Cấu hình
firstDayđể đảm bảo tính nhất quán khu vực: Sử dụngdayLabel.firstDay(đặt thành0vào Chủ nhật hoặc1vào Thứ Hai) để phù hợp với quy ước lịch địa phương của đối tượng người xem. - Kết hợp Bản đồ trực quan từng đoạn cho các đóng góp: Khi hiển thị biểu đồ commit theo phong cách GitHub, hãy sử dụng một
bản đồ trực quan từng đoạnkiểu bản đồ trực quan với các điểm dừng màu rời rạc thay vì các gradient liên tục để có các bước trực quan phân loại rõ ràng hơn.