雷达图 (多维对比)
ECharts 雷达图完全指南:多维度数据对比与能力评估模型
📖 概述
雷达图(Radar Chart)又称蜘蛛网图,通过从中心点辐射出的多个轴来展示多维度数据,适合比较多个对象在不同维度上的表现。
核心特点:
- ✅ 多维度数据对比
- ✅ 直观展示优劣势
- ✅ 支持多系列叠加
- ✅ 自定义形状(圆形/多边形)
- ✅ 能力评估模型
🔍 核心概念
1. 基础雷达图
javascript
option = {
title: { text: '产品能力评估' },
legend: { data: ['产品A', '产品B'] },
radar: {
indicator: [
{ name: '性能', max: 100 },
{ name: '易用性', max: 100 },
{ name: '功能', max: 100 },
{ name: '稳定性', max: 100 },
{ name: '扩展性', max: 100 }
]
},
series: [{
type: 'radar',
data: [
{
value: [85, 90, 80, 95, 70],
name: '产品A'
},
{
value: [70, 75, 90, 80, 85],
name: '产品B'
}
]
}]
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
关键配置:
radar.indicator: 维度定义series.data.value: 各维度数值max: 每个维度的最大值
2. 形状配置
javascript
radar: {
shape: 'polygon', // 'polygon'(多边形) | 'circle'(圆形)
// 分割段数
splitNumber: 5,
// 轴线样式
axisLine: {
lineStyle: { color: '#999' }
},
// 分割线样式
splitLine: {
lineStyle: { color: '#ddd' }
},
// 分割区域样式
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
}
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
3. 多系列对比
javascript
series: [{
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '预算分配',
areaStyle: { color: 'rgba(84, 112, 198, 0.3)' },
lineStyle: { color: '#5470c6' }
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '实际开销',
areaStyle: { color: 'rgba(238, 102, 102, 0.3)' },
lineStyle: { color: '#ee6666' }
}
]
}]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
💡 使用场景
场景 1: 员工能力评估
javascript
const employeeRadar = {
title: { text: '员工综合能力评估', left: 'center' },
legend: { data: ['张三', '李四', '王五'], top: 30 },
radar: {
shape: 'polygon',
radius: '65%',
center: ['50%', '55%'],
indicator: [
{ name: '技术能力', max: 100 },
{ name: '沟通能力', max: 100 },
{ name: '团队协作', max: 100 },
{ name: '学习能力', max: 100 },
{ name: '创新能力', max: 100 },
{ name: '执行力', max: 100 }
],
splitArea: {
areaStyle: {
color: ['#f8f8f8', '#fff']
}
}
},
series: [{
type: 'radar',
symbol: 'circle',
symbolSize: 6,
data: [
{
value: [90, 85, 88, 92, 78, 85],
name: '张三',
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: 'rgba(84, 112, 198, 0.2)' }
},
{
value: [75, 92, 85, 80, 88, 90],
name: '李四',
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: 'rgba(145, 204, 117, 0.2)' }
},
{
value: [82, 78, 90, 85, 75, 88],
name: '王五',
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: 'rgba(250, 200, 88, 0.2)' }
}
]
}]
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
场景 2: 产品特性对比
javascript
const productComparison = {
title: { text: '三款手机综合对比' },
legend: { data: ['iPhone 15', 'Samsung S24', 'Xiaomi 14'] },
radar: {
indicator: [
{ name: '性能', max: 10 },
{ name: '拍照', max: 10 },
{ name: '续航', max: 10 },
{ name: '屏幕', max: 10 },
{ name: '系统', max: 10 },
{ name: '价格', max: 10 }
]
},
series: [{
type: 'radar',
data: [
{
value: [9.5, 9.0, 7.5, 9.0, 9.5, 6.0],
name: 'iPhone 15',
lineStyle: { color: '#5470c6' }
},
{
value: [9.0, 9.5, 8.5, 9.5, 8.0, 7.0],
name: 'Samsung S24',
lineStyle: { color: '#91cc75' }
},
{
value: [8.5, 8.5, 9.0, 8.5, 8.5, 9.5],
name: 'Xiaomi 14',
lineStyle: { color: '#fac858' }
}
]
}]
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
🔧 配置详解
Radar 组件配置
javascript
radar: {
// 位置和大小
center: ['50%', '50%'],
radius: '65%',
// 形状
shape: 'polygon', // 'polygon' | 'circle'
// 起始角度
startAngle: 90,
// 维度定义
indicator: [
{ name: '维度1', max: 100, min: 0 },
{ name: '维度2', max: 100 }
],
// 分割段数
splitNumber: 5,
// 轴线
axisName: {
color: '#333',
fontSize: 12,
formatter: '{value}'
},
// 高亮
emphasis: {
axisName: { color: '#ee6666' }
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Series 配置
javascript
series: [{
type: 'radar',
// 线条样式
lineStyle: {
width: 2,
color: '#5470c6',
type: 'solid'
},
// 填充区域
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)',
opacity: 0.5
},
// 数据点
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: '#fff',
borderColor: '#5470c6',
borderWidth: 2
},
// 标签
label: {
show: true,
formatter: '{c}',
position: 'top'
}
}]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
📝 代码示例
示例: 完整的个人技能雷达图
javascript
const skillRadar = {
backgroundColor: '#fff',
title: {
text: '前端开发技能图谱',
subtext: '自我评估 vs 岗位要求',
left: 'center',
textStyle: { fontSize: 18 }
},
tooltip: {
trigger: 'item'
},
legend: {
data: ['当前水平', '岗位要求'],
top: 40,
selectedMode: 'single'
},
radar: {
shape: 'polygon',
radius: '60%',
center: ['50%', '55%'],
splitNumber: 5,
indicator: [
{ name: 'HTML/CSS', max: 100 },
{ name: 'JavaScript', max: 100 },
{ name: 'Vue/React', max: 100 },
{ name: 'TypeScript', max: 100 },
{ name: 'Node.js', max: 100 },
{ name: '工程化', max: 100 },
{ name: '性能优化', max: 100 },
{ name: '算法', max: 100 }
],
splitArea: {
areaStyle: {
color: ['#f0f0f0', '#fff', '#f0f0f0', '#fff', '#f0f0f0']
}
},
axisLine: {
lineStyle: { color: '#ddd' }
},
splitLine: {
lineStyle: { color: '#ddd' }
}
},
series: [{
type: 'radar',
symbol: 'circle',
symbolSize: 6,
lineStyle: { width: 2 },
data: [
{
value: [90, 85, 88, 80, 70, 75, 72, 65],
name: '当前水平',
lineStyle: { color: '#5470c6', width: 3 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
])
},
label: {
show: true,
formatter: '{c}',
fontSize: 10,
color: '#5470c6'
}
},
{
value: [95, 90, 92, 88, 85, 85, 80, 75],
name: '岗位要求',
lineStyle: { color: '#ee6666', width: 2, type: 'dashed' },
areaStyle: { color: 'rgba(238, 102, 102, 0.1)' },
label: {
show: true,
formatter: '{c}',
fontSize: 10,
color: '#ee6666'
}
}
]
}]
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
⚠️ 常见问题
Q1: 维度太多怎么办?
javascript
// ✅ 建议不超过8个维度
if (indicators.length > 8) {
console.warn('维度过多,建议使用其他图表');
}1
2
3
4
2
3
4
Q2: 如何突出某个维度?
javascript
radar: {
indicator: indicators.map((item, index) => ({
...item,
axisLabel: {
color: index === 0 ? '#ee6666' : '#333' // 第一个维度红色
}
}))
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Q3: 数据差异太大?
javascript
// ✅ 使用不同的 max 值
indicator: [
{ name: '收入', max: 100000 },
{ name: '评分', max: 10 }
]1
2
3
4
5
2
3
4
5
🎯 最佳实践
1. 维度数量控制
javascript
// ✅ 推荐 4-8 个维度
const optimalDimensions = 6;1
2
2
2. 颜色搭配
javascript
// 使用对比色区分系列
const colors = ['#5470c6', '#ee6666', '#91cc75'];1
2
2
3. 数据标准化
javascript
// 将所有数据归一化到 0-100
const normalized = data.map(value => (value / max) * 100);1
2
2
📊 性能指标
| 维度数 | 系列数 | 渲染时间 | 建议 |
|---|---|---|---|
| ≤ 6 | ≤ 3 | < 10ms | 无限制 |
| 6-8 | 3-5 | 10-20ms | 正常 |
| > 8 | > 5 | > 20ms | 考虑简化 |
🔗 相关链接
- 柱状图.md)
- 饼图.md)
- 官方示例
最后更新: 2026-04-23
难度等级: ⭐⭐
预计阅读时间: 15 分钟
基础雷达图
{
"title": {
"text": "产品能力对比",
"left": "center"
},
"tooltip": {
"trigger": "item"
},
"legend": {
"data": [
"产品A",
"产品B"
],
"left": "left"
},
"radar": {
"indicator": [
{
"name": "性能",
"max": 100
},
{
"name": "易用性",
"max": 100
},
{
"name": "功能",
"max": 100
},
{
"name": "稳定性",
"max": 100
},
{
"name": "安全性",
"max": 100
},
{
"name": "扩展性",
"max": 100
}
]
},
"series": [
{
"type": "radar",
"data": [
{
"value": [
85,
90,
80,
95,
88,
75
],
"name": "产品A",
"itemStyle": {
"color": "#5470c6"
},
"areaStyle": {
"opacity": 0.3
}
},
{
"value": [
70,
85,
95,
80,
75,
90
],
"name": "产品B",
"itemStyle": {
"color": "#91cc75"
},
"areaStyle": {
"opacity": 0.3
}
}
]
}
]
}