Khi đánh giá các hồ sơ hiệu suất phức tạp trên nhiều tiêu chí định tính hoặc định lượng cùng lúc, thìBiểu đồ Radar (hay còn gọi là Biểu đồ mạng nhện) là công cụ trực quan hóa lý tưởng. Bằng cách đặt nhiều thang đo đặc trưng dọc theo các trục tia phát ra từ một điểm trung tâm, biểu đồ radar thể hiệnso sánh đa chiều dưới dạng các hình đa giác riêng biệt. Điều này khiến chúng phù hợp với việc đánh giá kỹ năng, bảng điểm đánh giá nhà cung cấp, tiêu chuẩn so sánh tính năng sản phẩm hoặc hồ sơ hiệu suất người chơi.
Cơ chế của biểu đồ Radar
Trong Apache ECharts, biểu đồ radar dựa vào một khối cấu hình chuyên dụngradarcấu hình để xác định các trục tia, được gọi làindicatorcác khóa. Đối tượng series thiết lậptype: 'radar'và ánh xạ các giá trị mảng số tương ứng với mỗi thang đo indicator đã khai báo.
1. Cài đặt cơ bản
Để xây dựng biểu đồ radar cơ bản, hãy xác định ngưỡng chiều của bạn bên trongradar.indicatorvà truyền các mảng số trong dữ liệu chuỗi của bạn:
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['Ngân sách được phân bổ', 'Chi tiêu thực tế']
},
radar: {
indicator: [
{ name: 'Bán hàng', max: 6500 },
{ name: 'Quản lý hành chính', max: 16000 },
{ name: 'Công nghệ thông tin', max: 30000 },
{ name: 'Hỗ trợ khách hàng', max: 38000 },
{ name: 'Phát triển', max: 52000 },
{ name: 'Tiếp thị', max: 25000 }
]
},
series: [
{
name: 'Ngân sách so với chi tiêu',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Ngân sách được phân bổ'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Chi tiêu thực tế'
}
]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ Radar có thể được định dạng bằng cách sử dụng các đa giác vùng được tô đầy, hình dạng lưới tròn hoặc các chủ đề màu sắc riêng biệt để giúp việc đọc các hồ sơ chồng chéo trở nên dễ dàng hơn.
1. Điền vùng đa giác với hình dạng lưới tùy chỉnh
Chuyển đổi lưới nền web từ đa giác sang hình tròn và áp dụng điền vùng trong suốt sẽ làm nổi bật phạm vi tổng thể của mỗi hồ sơ chỉ số:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['Mô hình A', 'Mô hình B']
},
radar: {
shape: 'circle', // Lưới nền hình tròn
indicator: [
{ name: 'Thời lượng pin', max: 100 },
{ name: 'Công suất xử lý', max: 100 },
{ name: 'Chất lượng cấu tạo', max: 100 },
{ name: 'Chất lượng màn hình', max: 100 },
{ name: 'Camera', max: 100 },
{ name: 'Giá trị', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: 'Mô hình A',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: 'Mô hình B',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
Tinh chỉnh bố cục và phong cách
Điều chỉnh màu chữ chỉ báo, đường chia và kích thước biểu tượng giúp ngăn các đường web đa trục làm cho dữ liệu trở nên quá tải.
1. Định dạng lưới web tùy chỉnh và nhãn
Thiết kế đường trục, vùng chia và nhãn ngoài để duy trì sự tương phản thị giác rõ ràng trên các giao diện tối hoặc sáng:
option = {
radar: {
indicator: [
{ name: 'Tính dễ sử dụng', max: 10 },
{ name: 'Hiệu suất', max: 10 },
{ name: 'Bảo mật', max: 10 },
{ name: 'Khả năng mở rộng', max: 10 },
{ name: 'Hiệu quả chi phí', max: 10 }
],
axisName: {
color: '#333',
fontSize: 13,
fontWeight: 'bold'
},
splitArea: {
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.1)']
}
},
splitLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
type: 'radar',
symbolSize: 8,
lineStyle: {
width: 3
},
data: [
{
value: [8.5, 9.0, 7.5, 8.0, 9.5],
name: 'Điểm nền tảng',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
Các thực hành tốt chiến lược
- Tiêu chuẩn hóa thang trục:Đảm bảo tất cả các chỉ báo sử dụng phạm vi thang đo chuẩn hóa (ví dụ: từ 0 đến 100 hoặc từ 1 đến 10) mỗi khi có thể, để các vùng đa giác bên ngoài phản ánh được so sánh cân bằng.
- Giữ mức độ chồng lấn giữa các chuỗi ở mức thấp:Hạn chế số hình dạng so sánh radar trên mỗi biểu đồ chỉ còn 2 hoặc 3. Việc chồng lấn từ 4 hình đa giác đổ đầy trở lên sẽ khiến các đường viền hình dạng riêng lẻ trở nên khó phân biệt.
- Sử dụng độ đổ màu vùng thấp:Luôn áp dụng màu đổ trong suốt (độ mờ khoảng 0.2–0.4) để các đường lưới nền và các đường cắt ngang vẫn có thể nhìn thấy rõ dưới các lớp trên cùng.