Echarts-（五）Echarts的散点图

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

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

目录

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

官方文档

1.基本实现（scatter）

需要用到二维数组。

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门第一天</title>
		<script src="echarts.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 xarr = ['张三','李四','王五','张麻子','干豇豆','王宝器'];
			var yarr1 = [112,116,511,511,165,156];
			var yarr2 = [[512,612],[111,515],[215,116],[112,261],[151,521],[615,516],[156,610],
			[237,438],[448,845],[235,764],[789,653],[448,659],[234,768],[338,956],[348,759],[638,256],[473,238],[676,456],[534,236],[453,123],[462,521],[354,234],[223,122],[435,342],[76,545],[654,321],[645,342],[234,431]];
			var option = {
				xAxis:{
					type: 'value',
				},
				yAxis:{
					type: 'value',
				},
				series:[
					{
						type: 'scatter',
						data: yarr2
					}
				]
			}
			myec.setOption(option);
		</script>
	</body>
</html>

2.常见效果

2.1 点的大小（symbolSize）

1
2
3
4
5
6
7
series:[
					{
						type: 'scatter',
						data: yarr2,
						symbolSize: 20
					}
				]

2.2 气泡图

就是利用symbolSize来控制不同的点实现大小不一样。

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门第一天</title>
		<script src="echarts.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 xarr = ['张三','李四','王五','张麻子','干豇豆','王宝器'];
			var yarr1 = [112,116,511,511,165,156];
			var yarr2 = [[512,612],[111,515],[215,116],[112,261],[151,521],[615,516],[156,610],
			[237,438],[448,845],[235,764],[789,653],[448,659],[234,768],[338,956],[348,759],[638,256],[473,238],[676,456],[534,236],[453,123],[462,521],[354,234],[223,122],[435,342],[76,545],[654,321],[645,342],[234,431]];
			var option = {
				xAxis:{
					type: 'value',
				},
				yAxis:{
					type: 'value',
				},
				series:[
					{
						type: 'scatter',
						data: yarr2,
						symbolSize: function(arg){
							// console.log(arg)
							if(arg[0]>500){
								return 40
							}
							return 10
						}
					}
				]
			}
			myec.setOption(option);
		</script>
	</body>
</html>

控制其他样式：

  • 颜色
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
series:[
					{
						type: 'scatter',
						data: yarr2,
						symbolSize: function(arg){ //控制大小
							// console.log(arg)
							if(arg[0]>500){
								return 40
							}
							return 10
						},
						itemStyle:{ //控制颜色
							color: 'green'
						}
					}
				]


//根据不同的点控制不同的颜色

series:[
					{
						type: 'scatter',
						data: yarr2,
						symbolSize: function(arg){ //控制大小
							// console.log(arg)
							if(arg[0]>500){
								return 40
							}
							return 10
						},
						itemStyle:{
							color: function(arg){ //控制颜色
								// console.log(arg)
								if(arg.data[0]>500){
									return 'red'
								}
								return 'green'
							}
						}
					}
				]

2.3 涟漪效果（effectScatter）

就像水波纹一样。

1
2
3
4
将
type: 'scatter'
改为
type: 'effectScatter',

2.3.1 控制范围（rippleEffect）

控制水波纹的范围大小。

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
series:[
					{
						type: 'effectScatter',
						rippleEffect:{
						  scale: 10
						},
						data: yarr2,
						symbolSize: function(arg){
							// console.log(arg)
							if(arg[0]>500){
								return 40
							}
							return 10
						},
						itemStyle:{
							color: function(arg){
								// console.log(arg)
								if(arg.data[0]>500){
									return 'red'
								}
								return 'green'
							}
						}
					}
				]

2.3.2 效果执行时机（showEffectOn）

分为两种，一种是一直有效果（render），还有一种是当鼠标移到点上时才触发效果（emphasis）。

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
series:[
					{
						type: 'effectScatter',
						rippleEffect:{
						  scale: 10
						},
						showEffectOn:'render', //emphasis
						data: yarr2,
						symbolSize: function(arg){
							// console.log(arg)
							if(arg[0]>500){
								return 40
							}
							return 10
						},
						itemStyle:{
							color: function(arg){
								// console.log(arg)
								if(arg.data[0]>500){
									return 'red'
								}
								return 'green'
							}
						}
					}
				]
1
2
3
showEffectOn:{} 
效果等价于
showEffectOn:'emphasis'