Khi phân tích mật độ hoạt động, xu hướng liên tục hoặc tương quan trên hai chiều rời rạc, thìBiểu đồ bản đồ nhiệt cung cấp một giải pháp trực quan mạnh mẽ. Bằng cách ánh xạ các giá trị dữ liệu vào thang màu động trên một lưới hai chiều, bản đồ nhiệt cho phép người dùng phát hiện ngay lập tứcgiờ cao điểm sử dụng, điểm nghẽn theo mùa hoặc mối quan hệ ma trận ngay lập tức—ví dụ như tải máy chủ theo giờ và ngày trong tuần, nhật ký hoạt động người dùng hoặc ma trận tương quan chéo danh mục.
Cơ chế hoạt động của bản đồ nhiệt
Trong Apache ECharts, bản đồ nhiệt sử dụngtype: 'heatmap' trên lưới Descartes hai chiều. Mỗi điểm dữ liệu yêu cầu một mảng 3 phần tử được định dạng như[xAxisIndex, yAxisIndex, value]. Một thành phần bắt buộcvisualMap ánh xạ các giá trị số thành thang màu liên tục hoặc từng đoạn.
1. Cài đặt cơ bản
Để xây dựng biểu đồ bản đồ nhiệt cơ bản, khai báo các trục phân loại cho cả trục ngang (xAxis) và trục dọc (yAxis) để xác định thang đo, truyền các mảng[xIndex, yIndex, value] vào dữ liệu chuỗi của bạn, và cấu hình một thành phầnvisualMapthành phần:
const hours = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];
const days = ['Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu'];
// Định dạng dữ liệu: [xIndex, yIndex, value]
const data = [
[0, 0, 5], [1, 0, 1], [2, 0, 0], [3, 0, 0], [4, 0, 12], [5, 0, 24], [6, 0, 38], [7, 0, 42], [8, 0, 35], [9, 0, 20], [10, 0, 10], [11, 0, 6],
[0, 1, 3], [1, 1, 0], [2, 1, 0], [3, 1, 1], [4, 1, 15], [5, 1, 28], [6, 1, 45], [7, 1, 50], [8, 1, 40], [9, 1, 22], [10, 1, 12], [11, 1, 4],
[0, 2, 2], [1, 2, 1], [2, 2, 0], [3, 2, 0], [4, 2, 11], [5, 2, 26], [6, 2, 41], [7, 2, 48], [8, 2, 38], [9, 2, 19], [10, 2, 8], [11, 2, 3],
[0, 3, 4], [1, 3, 2], [2, 3, 0], [3, 3, 1], [4, 3, 14], [5, 3, 30], [6, 3, 49], [7, 3, 55], [8, 3, 42], [9, 3, 25], [10, 3, 15], [11, 3, 5],
[0, 4, 6], [1, 4, 3], [2, 4, 1], [3, 4, 2], [4, 4, 10], [5, 4, 20], [6, 4, 32], [7, 4, 36], [8, 4, 28], [9, 4, 18], [10, 4, 9], [11, 4, 2]
];
option = {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: { show: true }
},
yAxis: {
type: 'category',
data: days,
splitArea: { show: true }
},
visualMap: {
min: 0,
max: 60,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [
{
name: 'Tải hệ thống',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Các kỹ thuật cấu trúc nâng cao
Bản đồ nhiệt có thể được tùy chỉnh với các bước màu rời rạc, khoảng cách ô riêng biệt, hoặc kết hợp với tọa độ lịch để theo dõi hoạt động trong suốt một năm.
1. Ánh xạ màu theo từng đoạn và khoảng cách ô tùy chỉnh
Thay vì sử dụng dải màu liên tục, hãy sử dụngvisualMap để nhóm các giá trị thành các băng hoạt động riêng biệt (ví dụ: Thấp, Trung bình, Cao):
option = {
tooltip: { position: 'top' },
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'category',
data: ['Sản phẩm A', 'Sản phẩm B', 'Sản phẩm C']
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
left: 'center',
bottom: '5%',
orient: 'horizontal',
pieces: [
{ min: 80, label: 'Hiệu suất cao', color: '#16a34a' },
{ min: 40, max: 79, label: 'Trung bình', color: '#f59e0b' },
{ max: 39, label: 'Cần chú ý', color: '#dc2626' }
]
},
series: [
{
type: 'heatmap',
data: [
[0, 0, 85], [1, 0, 92], [2, 0, 78], [3, 0, 88],
[0, 1, 45], [1, 1, 55], [2, 1, 62], [3, 1, 35],
[0, 2, 25], [1, 2, 30], [2, 2, 18], [3, 2, 42]
],
label: { show: true },
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Tinh chỉnh bố cục và dải màu
Việc chọn các điểm dừng màu dễ đọc và bật chế độ phân vùng giúp quét các lưới ma trận lớn trở nên dễ dàng.
1. Tùy chỉnh dải màu và căn chỉnh nhãn
Cấu hình các dải màu đa điểm tùy chỉnh trongvisualMap.inRange để phù hợp với chủ đề nền tảng của bạn:
option = {
grid: { containLabel: true },
xAxis: {
type: 'category',
data: ['Nút 1', 'Nút 2', 'Nút 3', 'Nút 4']
},
yAxis: {
type: 'category',
data: ['Dịch vụ X', 'Dịch vụ Y', 'Dịch vụ Z']
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f0f9ff', '#0284c7', '#0f172a'] // Dải màu xanh nhạt đến xám xanh đậm
}
},
series: [
{
type: 'heatmap',
data: [
[0, 0, 12], [1, 0, 45], [2, 0, 78], [3, 0, 95],
[0, 1, 34], [1, 1, 67], [2, 1, 89], [3, 1, 23],
[0, 2, 56], [1, 2, 78], [2, 2, 12], [3, 2, 88]
]
}
]
};
Các thực hành tốt chiến lược
- Luôn luôn bao gồm một
visualMap: Một bản đồ nhiệt mà không có biểu tượng trực quan buộc người dùng phải đoán ý nghĩa của các màu sắc. Luôn đặt mộtvisualMaprõ ràng ở gần mép khung hình. - Sử dụng viền lưới để phân tách: Áp dụng viền trắng mỏng bằng cách sử dụng
itemStyle.borderColor: '#fff'vàborderWidth: 1hoặc2để giữ cho các ô riêng lẻ được phân biệt về mặt thị giác trong các ma trận dày đặc. - Đảm bảo văn bản có độ tương phản cao: Nếu nhãn số học của ô đang hoạt động (
label.show: true), kiểm tra xem màu chữ có vẫn đọc được rõ ràng trên cả các bước sáng nhất và tối nhất trong bộ thang màu của bạn.