Echarts-（九）Echarts的雷达图

本文最后更新于：December 3, 2021 pm

Apache ECharts一个基于 JavaScript 的开源可视化图表库。ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

目录

推荐学习时，多看看官方文档。

官方文档

1.基本使用

  1. 定义各个维度的最大值。indicator：[{name：’易用性‘，max：100}，….]。
  2. 具体数据。data[{name：’物品1‘，value：[维度1，维度2，….]}，{}，….]。
  3. 图表类型：series下设置type：radar。
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一天-雷达图</title>
		<script src="echarts.min.js"></script>
		<script src="jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<div id="echarts" style="width: 100%;height: 400px;"></div>
		<script type="text/javascript">
			var myec = echarts.init(document.getElementById('echarts'));
			var arr = [ //各个维度的最大值
				{
					name: '京东',
					max: 100
				},
				{
					name: '腾讯',
					max: 600
				},
				{
					name: '阿里',
					max: 100
				},
				{
					name: '天猫',
					max: 100
				},
				{
					name: '奥利给',
					max: 100
				}
			];
			
			var option = {
				radar: {
					indicator: arr
				},
				series:[
					{
						type: 'radar',
						data:[
							{
								name: '华为',
								value: [32,421,32,13,64]
							},
							{
								name: '京东',
								value: [65,571,34,93,95]
							}
						]
					}
				]
			}
			
			myec.setOption(option);
		</script>
	</body>
</html>

2.常用配置

显示数值、区域面积（areaStyle）、绘制类型（shape）。

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
var option = {
				radar: {
					indicator: arr,
					shape: 'circle' //设置雷达图最外层的类型为circle圆形，polygon多边形为默认
				},
				series:[
					{
						type: 'radar',
						label: {
							show: true
						},
						areaStyle:{},
						data:[
							{
								name: '华为',
								value: [32,421,32,13,64]
							},
							{
								name: '京东',
								value: [65,571,34,93,95]
							}
						]
					}
				]
			}