Apache ECharts 雷达图详解：参数解析与实战应用
雷达图（Radar Chart）是展示多维数据的利器，特别适合能力评估、属性对比等场景。Apache ECharts 提供了强大的雷达图实现，下面深入解析其核心参数及使用场景。
一、基础结构解析
一个完整的雷达图包含两层配置：雷达坐标系(radar) 和 数据系列(series-radar) 。
javascript
css
option = {
radar: { ... }, // 雷达坐标系配置
series: [
{
type: 'radar',
data: [ ... ] // 具体数据
}
]
};二、雷达坐标系核心参数 (radar)
| 参数 | 类型 | 作用 | 典型场景 |
|---|---|---|---|
| indicator | Array | 定义雷达各维度的名称和最大值 | [{ name: '销售', max: 6500 }, ...] |
| center | Array | 雷达图中心位置 | ['50%', '50%'] 居中显示 |
| radius | Number/String | 雷达图半径 | '75%' 自适应容器 |
| startAngle | Number | 起始角度（12点钟方向为0） | 90（从3点钟方向开始） |
| splitNumber | Number | 坐标轴分割段数 | 4（形成4个同心圆） |
| shape | String | 雷达图形状 | 'polygon'(多边形)/'circle'(圆形) |
| axisName | Object | 维度名称样式 | { color: '#333', fontSize: 14 } |
| axisLine | Object | 坐标轴线样式 | { show: true, lineStyle: { ... } } |
| splitLine | Object | 分割线样式 | { lineStyle: { type: 'dashed' } } |
| splitArea | Object | 背景区域样式 | { show: true, areaStyle: { ... } } |
关键场景说明：
- indicator.max：动态数据场景中，可设置为各维度数据的最大值，保证比例统一
- splitArea：使用浅色填充背景区域，增强数据对比的视觉引导
- shape: 'polygon' ：更符合传统雷达图认知，适合能力评估模型
三、数据系列核心参数 (series-radar)
| 参数 | 类型 | 作用 | 典型场景 |
|---|---|---|---|
| data | Array | 系列数据 | [{ value: [4300, 3000, ...], name: '预算' }] |
| symbol | String | 数据点标记类型 | 'circle', 'rect', 'none' |
| symbolSize | Number | 标记大小 | 8 或 (value) => value/1000 动态大小 |
| lineStyle | Object | 线条样式 | { width: 2, type: 'solid' } |
| areaStyle | Object | 填充区域样式 | { color: 'rgba(255, 0, 0, 0.6)' } |
| label | Object | 数据标签 | { show: true, formatter: '{c}' } |
高级用法：
javascript
less
areaStyle: {
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{ offset: 0, color: 'rgba(255, 0, 0, 0.8)' },
{ offset: 1, color: 'rgba(255, 0, 0, 0.2)' }
])
} // 创建径向渐变填充echarts.apache.org/zh/option.h...
四、典型应用场景与参数组合
1. 员工能力评估
javascript
css
radar: {
indicator: [
{ name: '沟通', max: 10 },
{ name: '技术', max: 10 },
{ name: '执行力', max: 10 },
{ name: '创新', max: 10 }
],
splitArea: { show: true } // 显示背景色带
},
series: [{
type: 'radar',
data: [
{ value: [8, 9, 7, 6], name: '张三' },
{ value: [7, 8, 9, 8], name: '李四' }
],
areaStyle: { opacity: 0.2 } // 半透明填充便于重叠比较
}]
2. 产品参数对比
javascript
css
radar: {
shape: 'circle', // 圆形坐标系
axisName: {
formatter: '{value}分',
fontSize: 10 // 小字号适应多维度
}
},
series: [{
symbol: 'rect', // 方形标记点
label: { show: true }, // 显示具体数值
lineStyle: { width: 1 } // 细线减少视觉干扰
}]3. 实时监控仪表盘
javascript
css
radar: {
splitNumber: 5, // 更多层级
axisLine: { show: true } // 强调轴线
},
series: [{
data: [{
value: [85, 70, 92, 60],
lineStyle: { color: '#FF9800' }, // 警告色
areaStyle: { color: 'rgba(255,152,0,0.3)' }
}]
}]4、智能车盘
css
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
let values = [87, 80, 99, 95, 100];
let indicatorList = [ { name: '电池容量得分', max: 100 }, { name: '电池一致性得分', max: 100 }, { name: '内阻一致性得分', max: 100 }, { name: '自放电率得分', max: 100 }, { name: '电压一致性得分', max: 100 }];
option = {
radar: {
// shape: 'circle',
// startAngle: 60,
center: ['50%', '50%'],
radius: '55%',
closed: true,
name: {
textStyle: {
color: '#65639C',
borderRadius: 3,
padding: [3, -5]
},
rich: {
a: {
// 名字
color: '#65639C',
align: 'center',
lineHeight: 20,
fontSize: 12
},
b: {
// 数据
color: '#5137DF',
align: 'center',
// backgroundColor: '#666',
fontSize: 17,
fontWeight: 600,
padding: 2,
borderRadius: 4
},
c: {
// 箭头
align: 'center',
width: 15,
height: 15,
fontSize: 10,
backgroundColor: '#ff00ff'
// backgroundColor: { // 重点在这设置图片
// image: this.whereUse === 'all' ? AllIcon : this.whereUse === 'mental' ? MentalIcon : ''
// }
}
},
formatter: (a, b) => {
console.log(
'显示的数值',
a,
b,
indicatorList.map((item) => item.name).indexOf(a)
);
const val = values[indicatorList.map((item) => item.name).indexOf(a)];
return `{a|${a}}\n{b|${val}}{c|}`;
}
},
axisLine: {
lineStyle: {
color: '#CEC9E5',
type: 'dotted',
dashOffset: 15
}
},
indicator: indicatorList,
splitArea: {
show: true,
areaStyle: {
color: ['#FAF7FF', '#fff', '#FAF7FF', '#F5EFFF', '#FAF7FF', '#F5EFFF'] // 图表背景的颜色
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'dotted',
color: '#CEC9E5' // 设置网格的颜色
}
},
triggerEvent: true,
// shape: 'circle'
splitNumber: 10
},
series: [
// { 5.0之前使用这个使得首尾相连
// name: '首尾相连',
// type: 'radar',
// // radarIndex: 1,
// z: 1,
// symbolSize: 0,
// symbol: 'diamond',
// // symbolRotate: 180,
// data: [{
// value: values,
// name: '闭合',
// itemStyle: {
// normal: {
// color: '#639AFF'
// }
// }
// }]
// },
{
name: '雷达图',
type: 'radar',
symbolSize: 0,
// radarIndex: 2,
z: 2,
// areaStyle: {normal: {}},
data: [
{
value: values,
name: '当前部门',
emphasis: {
label: {
show: true,
color: '#fff',
fontSize: 14,
backgroundColor: '#0D1B42',
borderRadius: 5,
padding: 3,
shadowBlur: 3
}
},
itemStyle: {
normal: {
color: '#639AFF',
lineStyle: {
width: 10
}
}
},
lineStyle: {
width: 10,
// type: [6, 10],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 设置渐变色
{ offset: 0, color: '#639AFF' },
{ offset: 1, color: '#B353FF' }
]),
cap: 'round',
join: 'miter',
miterLimit: 5
}
}
]
}
]
};
option && myChart.setOption(option);
五、最佳实践技巧
-
维度控制：5-8个维度为最佳，过多会导致图形复杂
-
颜色策略 ：使用半透明填充（
areaStyle.opacity: 0.3-0.6）提升重叠区域辨识度 -
动态响应 ：结合
resize事件更新radius和center -
异常突出 ：通过
symbolSize回调放大异常值标记：javascript
javascriptsymbolSize: function(val) { return val.some(v => v < 60) ? 10 : 6; // 异常值放大 }
完整配置示例见 ECharts 官方示例：雷达图示例库
掌握这些参数组合，即可高效构建业务场景所需的专业雷达图，在清晰传达多维数据对比的同时，保持视觉美观性。