雷达图高级特性完全指南 - 多雷达与填充
📋 概述
雷达图高级特性 包括多雷达对比、嵌套雷达、填充样式、自定义形状等进阶功能。这些特性能够多维度对比不同对象，是能力评估和性能分析的利器。
核心价值
- 多雷达对比：并排展示多个对象的维度差异
- 嵌套雷达：在同一坐标系中对比多个数据系列
- 填充样式：用面积强调维度覆盖范围
- 自定义形状：三角形、四边形等多边形
🎯 核心概念
1. 多雷达图（Multiple Radar）
javascript
option = {
radar: [
{
indicator: [...],
center: ['25%', '50%'] // 第一个雷达位置
},
{
indicator: [...],
center: ['75%', '50%'] // 第二个雷达位置
}
],
series: [
{
type: 'radar',
radarIndex: 0, // 使用第一个雷达
data: [...]
},
{
type: 'radar',
radarIndex: 1, // 使用第二个雷达
data: [...]
}
]
};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
2. 嵌套雷达（Nested Radar）
javascript
option = {
radar: {
indicator: [
{ 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],
name: '员工A'
},
{
value: [90, 70, 95, 75, 80],
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
🔧 详细配置项
完整多雷达配置
javascript
option = {
title: {
text: '产品能力评估',
subtext: '多雷达对比分析',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
data: ['产品A', '产品B'],
top: 40
},
// 定义两个雷达坐标系
radar: [
{
center: ['25%', '55%'],
radius: '40%',
indicator: [
{ name: '性能', max: 100 },
{ name: '易用性', max: 100 },
{ name: '稳定性', max: 100 },
{ name: '安全性', max: 100 },
{ name: '扩展性', max: 100 }
],
splitNumber: 4,
axisName: {
color: '#333'
},
splitLine: {
lineStyle: {
color: '#ddd'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.1)', 'rgba(200,200,200,0.1)']
}
}
},
{
center: ['75%', '55%'],
radius: '40%',
indicator: [
{ name: '功能', max: 100 },
{ name: '界面', max: 100 },
{ name: '文档', max: 100 },
{ name: '支持', max: 100 },
{ name: '价格', max: 100 }
],
splitNumber: 4,
axisName: {
color: '#333'
},
splitLine: {
lineStyle: {
color: '#ddd'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.1)', 'rgba(200,200,200,0.1)']
}
}
}
],
series: [
{
name: '产品A',
type: 'radar',
radarIndex: 0,
data: [{
value: [85, 90, 80, 95, 75],
name: '产品A'
}],
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
},
lineStyle: {
color: '#5470c6',
width: 2
},
itemStyle: {
color: '#5470c6'
}
},
{
name: '产品B',
type: 'radar',
radarIndex: 1,
data: [{
value: [90, 85, 95, 80, 85],
name: '产品B'
}],
areaStyle: {
color: 'rgba(145, 204, 117, 0.3)'
},
lineStyle: {
color: '#91cc75',
width: 2
},
itemStyle: {
color: '#91cc75'
}
}
]
};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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
嵌套雷达完整配置
javascript
option = {
title: {
text: '团队能力对比',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
data: ['张三', '李四', '王五'],
top: 40
},
radar: {
indicator: [
{ name: '沟通能力', max: 100 },
{ name: '技术水平', max: 100 },
{ name: '团队协作', max: 100 },
{ name: '问题解决', max: 100 },
{ name: '创新能力', max: 100 },
{ name: '项目管理', max: 100 }
],
shape: 'polygon', // 'polygon' | 'circle'
splitNumber: 5,
axisName: {
color: '#333',
fontSize: 12
},
splitLine: {
lineStyle: {
color: ['#ddd', '#eee', '#f5f5f5', '#fafafa', '#fff']
}
},
splitArea: {
show: true,
areaStyle: {
color: ['#f8f9fa', '#fff']
}
},
axisLine: {
lineStyle: {
color: '#ddd'
}
}
},
series: [{
name: '团队成员',
type: 'radar',
data: [
{
value: [85, 90, 80, 95, 75, 85],
name: '张三',
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
},
lineStyle: {
color: '#5470c6',
width: 2
},
itemStyle: {
color: '#5470c6'
}
},
{
value: [90, 75, 95, 80, 85, 90],
name: '李四',
areaStyle: {
color: 'rgba(145, 204, 117, 0.3)'
},
lineStyle: {
color: '#91cc75',
width: 2
},
itemStyle: {
color: '#91cc75'
}
},
{
value: [75, 85, 90, 85, 95, 80],
name: '王五',
areaStyle: {
color: 'rgba(250, 200, 88, 0.3)'
},
lineStyle: {
color: '#fac858',
width: 2
},
itemStyle: {
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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
💡 实战案例
案例1：学生综合素质评估
javascript
const students = ['张三', '李四', '王五', '赵六'];
const dimensions = ['语文', '数学', '英语', '物理', '化学', '生物'];
option = {
title: {
text: '学生综合素质雷达图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
data: students,
top: 40
},
radar: {
indicator: dimensions.map(dim => ({ name: dim, max: 100 })),
shape: 'polygon',
splitNumber: 5,
axisName: {
backgroundColor: '#f0f0f0',
borderRadius: 3,
padding: [3, 5]
}
},
series: [{
name: '学生成绩',
type: 'radar',
symbol: 'circle',
symbolSize: 6,
data: [
{
value: [85, 92, 78, 88, 90, 85],
name: '张三',
areaStyle: { opacity: 0.2 }
},
{
value: [90, 88, 95, 85, 82, 90],
name: '李四',
areaStyle: { opacity: 0.2 }
},
{
value: [78, 95, 85, 92, 88, 80],
name: '王五',
areaStyle: { opacity: 0.2 }
},
{
value: [92, 85, 90, 80, 95, 88],
name: '赵六',
areaStyle: { opacity: 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
48
49
50
51
52
53
54
55
56
57
58
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
⚠️ 常见问题
问题1：标签重叠
解决：
javascript
radar: {
axisName: {
formatter: function(value, indicator) {
return value.length > 4 ? value.substring(0, 4) + '...' : value;
}
}
}1
2
3
4
5
6
7
2
3
4
5
6
7
问题2：数据差异不明显
解决：
javascript
// 确保max值合理
indicator: [
{ name: '维度1', max: 100 }, // 根据实际数据范围设置
{ name: '维度2', max: 100 }
]1
2
3
4
5
2
3
4
5
🎯 最佳实践
1. 选择合适的形状
javascript
// polygon（多边形）vs circle（圆形）
// ✅ polygon：传统雷达图，角度清晰
// ✅ circle：柔和美观，适合展示1
2
3
2
3
2. 颜色区分
javascript
// 为每个系列使用不同颜色
data: [
{ value: [...], name: 'A', itemStyle: { color: '#5470c6' } },
{ value: [...], name: 'B', itemStyle: { color: '#91cc75' } }
]1
2
3
4
5
2
3
4
5
3. 填充透明度
javascript
areaStyle: {
opacity: 0.2 // 降低透明度，避免遮挡
}1
2
3
2
3
📊 性能指标
| 配置 | 3系列 | 10系列 | 建议 |
|---|---|---|---|
| 无填充 | 8ms | 20ms | 无限制 |
| 有填充 | 12ms | 35ms | 系列≤8 |
| 多雷达 | 15ms | 50ms | 雷达数≤4 |
🔗 相关链接
- 雷达图基础.md)
- visualMap视觉映射
💎 总结
高级雷达图核心价值：
- ✅ 多雷达并排对比
- ✅ 嵌套展示多维数据
- ✅ 填充强调覆盖范围
- ✅ 自定义形状适配场景
掌握高级雷达图，让多维度评估更直观！🕸️
多雷达填充效果
{
"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
}
]
},
"series": [
{
"type": "radar",
"data": [
{
"value": [
85,
90,
80,
95,
88
],
"name": "产品A",
"itemStyle": {
"color": "#5470c6"
},
"areaStyle": {
"opacity": 0.3
}
},
{
"value": [
70,
85,
95,
80,
75
],
"name": "产品B",
"itemStyle": {
"color": "#91cc75"
},
"areaStyle": {
"opacity": 0.3
}
}
]
}
]
}