在同时评估多个定性或定量指标上的复杂绩效轮廓时，雷达图（或蜘蛛网图）是一种理想的可视化工具。通过将多个特征尺度沿从中心点出发的径向轴排列，雷达图可以展示多维度比较为不同的多边形形状。这使得它们非常适合用于技能评估、供应商评估评分卡、产品功能基准对比或球员绩效轮廓分析。
雷达图的工作原理
在 Apache ECharts 中，雷达图依赖于一个专用的radar配置块，用于定义径向轴，称为indicator键。series 对象设置type: 'radar'，并映射对应于每个已声明指标尺度的数值数组。
1. 基础设置
要构建一个基本的雷达图，请在radar.indicator中定义你的维度阈值，并在系列数据中传递数值数组：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['分配预算', '实际支出']
},
radar: {
indicator: [
{ name: '销售', max: 6500 },
{ name: '行政管理', max: 16000 },
{ name: '信息技术', max: 30000 },
{ name: '客户支持', max: 38000 },
{ name: '开发', max: 52000 },
{ name: '市场营销', max: 25000 }
]
},
series: [
{
name: '预算 vs 支出',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '分配预算'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '实际支出'
}
]
}
]
};
高级结构技术
雷达图可以通过填充区域多边形、圆形网格形状或不同的颜色主题进行样式化，以使轮廓重叠部分更易于阅读。
1. 使用自定义网格形状的多边形区域填充
将背景网格从多边形切换为圆形，并应用透明区域填充，可以突出显示每个指标轮廓的整体范围：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['模型 A', '模型 B']
},
radar: {
shape: 'circle', // 圆形背景网格
indicator: [
{ name: '电池续航', max: 100 },
{ name: '处理能力', max: 100 },
{ name: '制造质量', max: 100 },
{ name: '显示质量', max: 100 },
{ name: '摄像头', max: 100 },
{ name: '性价比', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: '模型 A',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: '模型 B',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
微调布局和样式
调整指示器文本颜色、分割线和符号大小，可防止多轴网络线淹没数据。
1. 自定义网络网格和标签格式
设置坐标轴线、分割区域和外标签的样式，以在深色或浅色界面中保持清晰的视觉对比度：
ECharts
Edit ECharts in VPasCode
option = {
radar: {
indicator: [
{ name: '可用性', max: 10 },
{ name: '性能', max: 10 },
{ name: '安全性', max: 10 },
{ name: '可扩展性', max: 10 },
{ name: '成本效益', 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: '平台评分',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
战略最佳实践
- 标准化坐标轴刻度： 尽可能确保所有指标使用归一化刻度范围（例如 0 到 100 或 1 到 10），以便外多边形区域反映均衡的比较。
- 保持系列重叠较少： 每张图表的雷达对比形状限制在 2 到 3 个。重叠 4 个或更多填充多边形会使单个形状的边界难以区分。
- 使用低不透明度的区域填充： 始终使用透明填充（不透明度约为 0.2–0.4），以确保底层网格线和相交轮廓在顶层之下仍清晰可见。