Echarts-（三）Echarts的通用配置

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

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

目录

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

官方文档

上一篇中说了柱状图的基本使用和一些常见的效果实现。但echarts里面的图表有很多，不可能每一种图表都这样去记。这篇就说一下通用的配置。

全部源码准备：

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
<!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 = ['a','b','c','d','e','f'];
			var yarr = [12,6,51,5,65,56];
			var option = {
				title: {
					text: 'EchartsStudy_01'
				},
				xAxis:{
					type: 'category',
					data: xarr
				},
				yAxis:{
					type: 'value'
				},
				series:[
					{
						name: 'sssssssss',
						type: 'bar',
						markPoint: {
							data: [
								{
									type: 'max',
									name: '这是最大值'
								},
								{
									type: 'min',
									name: '这是最小值'
								}
							]
						},
						markLine: {
							data: [
								{
									type: 'average',
									name: '这是平均值' //这个name并不会在页面中显示
								}
							]
						},
						label:{
							show: true,
							rotate: 30,
							position: 'inside'
						},
						barWidth: '30%',
						data: yarr
					}
				]
			}
			myec.setOption(option);
		</script>
	</body>
</html>

1.通用配置

在任何图表中都能使用的配置。

通用配置：标题（title）、提示（tooltip）、工具按钮（toolbox）、图例（legend）。

1.1 标题（title）

1.文字样式（textStyle）

1
2
3
4
5
6
title: {
					text: 'EchartsStudy_01',
					textStyle:{
						color: 'red'
					}
				},

更多用法，这里不一一演示，可见官方文档。下同。

2.标题边框

1
2
3
4
5
6
7
8
9
title: {
					text: 'EchartsStudy_01',
					textStyle:{
						color: 'red'
					},
					borderWidth: 5, //边框
					borderColor: 'blue', //边框演示
					borderRadius: 5 //边框圆角
				},

3.标题位置

1
2
3
4
5
6
7
8
9
10
11
title: {
					text: 'EchartsStudy_01',
					textStyle:{
						color: 'red'
					},
					borderWidth: 5,
					borderColor: 'blue',
					borderRadius: 5,
					left: 20, //距左
					top: 32 //距上
				},

1.2 提示（tooltip）

1.触发类型（trigger）

当鼠标滑过或点击图表时的显示框。有item、axis两种。

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
var option = {
				title: {
					text: 'EchartsStudy_01',
					textStyle:{
						color: 'red'
					},
					borderWidth: 5,
					borderColor: 'blue',
					borderRadius: 5,
					left: 20,
					top: 32
				},
				tooltip:{
					// trigger: 'item', //当鼠标移入柱状图内部，才显示
					trigger: 'axis', //当鼠标移入到图表内就显示，自行查看效果
				},
				xAxis:{
					type: 'category',
					data: xarr
				},
				yAxis:{
					type: 'value'
				},
				series:[
					{
						name: '语文成绩', //方便看，这里更改了
						type: 'bar',
						markPoint: {
							data: [
								{
									type: 'max',
									name: '这是最大值'
								},
								{
									type: 'min',
									name: '这是最小值'
								}
							]
						},
						markLine: {
							data: [
								{
									type: 'average',
									name: '这是平均值' //这个name并不会在页面中显示
								}
							]
						},
						label:{
							show: true,
							rotate: 30,
							position: 'inside'
						},
						barWidth: '30%',
						data: yarr
					}
				]
			}

2.触发时机（triggerOn）

有mouseover（默认）、click两种。

1
2
3
4
tooltip:{
					trigger: 'item',
					triggerOn: 'click' //只有点击后才会显示
				},

3.数据显示格式化（formatter）

有两种方式，字符串模板和回调函数两种形式。这里最好自己去官方文档结合着看。

1.字符串模板

在字符串模板中。只是要说明的是：文档中的{a}（系列名称）指的是你series里面配置的name，{b}（类目值）指的是x坐标名称，{c}（数值）指的是对应的值。可看示例。

完整代码示例：

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
<!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 yarr = [12,6,51,5,65,56];
			var option = {
				title: {
					text: 'EchartsStudy_01',
					textStyle:{
						color: 'red'
					},
					borderWidth: 5,
					borderColor: 'blue',
					borderRadius: 5,
					left: 20,
					top: 32
				},
				tooltip:{
					trigger: 'item',
					triggerOn: 'click',
					formatter: '{b}的{a}成绩是{c}'
				},
				xAxis:{
					type: 'category',
					data: xarr
				},
				yAxis:{
					type: 'value'
				},
				series:[
					{
						name: '语文',
						type: 'bar',
						markPoint: {
							data: [
								{
									type: 'max',
									name: '这是最大值'
								},
								{
									type: 'min',
									name: '这是最小值'
								}
							]
						},
						markLine: {
							data: [
								{
									type: 'average',
									name: '这是平均值' //这个name并不会在页面中显示
								}
							]
						},
						label:{
							show: true,
							rotate: 30,
							position: 'inside'
						},
						barWidth: '30%',
						data: yarr
					}
				]
			}
			myec.setOption(option);
		</script>
	</body>
</html>

2.回调函数
1
2
3
4
5
6
7
8
tooltip:{
					trigger: 'item',
					triggerOn: 'click',
					formatter: function(arg){
						// console.log(arg) 可先自行在控制台上打印，再去点击图表。看里面有哪些数据，再根据数据返回，这里的返回使用方式可能会不同。至少我在看视频时，就和视频里面的不一样。视频里面用的是 return arg[0].name+" ："+arg[0].data 。所以，这里要根据你的控制台上的数据而定。
						return arg.name+" ："+arg.seriesName +" ："+arg.value 
					}
				},

1.3 工具按钮（toolbox）

会显示在图表的右上角。

1.3.1 导出图表图片（saveAsImage）

可以下载图表对应的图片。

1
2
3
4
5
6
7
var option = {
toolbox:{
					feature:{
						saveAsImage:{}
					}
				},
}

1.3.2 数据视图（dataView）

文本显示。可以修改数据并更新图表。若要恢复为原数据，可以使用重置刷新。

1
2
3
4
5
6
toolbox:{
					feature:{
						saveAsImage:{},
						dataView:{}
					}
				},

1.3.3 重置刷新（restore）

1
2
3
4
5
6
7
toolbox:{
					feature:{
						saveAsImage:{},
						dataView:{},
						restore:{}
					}
				},

1.3.4 区域缩放（dataZoom）

出现的两个按钮中，一个有加号的表示放大，另一个表示还原。点击有加号的按钮后，再移到图表中会发现鼠标变成了加号，然后按住鼠标左键选中一部分区域后松开左键，可以发现局部发大了，若要恢复原来，则点击另外一个按钮即可。

1
2
3
4
5
6
7
8
toolbox:{
					feature:{
						saveAsImage:{},
						dataView:{},
						restore:{},
						dataZoom:{}
					}
				},

1.3.5 图表类型切换（magicType）

在两个类型中进行切换。

1
2
3
4
5
6
7
8
9
10
11
toolbox:{
					feature:{
						saveAsImage:{},
						dataView:{},
						restore:{},
						dataZoom:{},
						magicType:{
							type: ['bar','line']
						}
					}
				},

1.4 图例（legend）

用于筛选系列，需要和series配合使用。legend中的data是一个数组，并且其中的值需要和series数组中某组数据的name值一致。

可以应用于只显示部分数据。

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
<!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 = [12,6,51,5,65,56];
			var yarr2 = [52,62,11,55,25,16];
			var option = {
				title: {
					text: 'EchartsStudy_01',
					textStyle:{
						color: 'red'
					},
					borderWidth: 5,
					borderColor: 'blue',
					borderRadius: 5,
					left: 20,
					top: 12
				},
				legend:{
					data:['语文','数学']
				},
				xAxis:{
					type: 'category',
					data: xarr
				},
				yAxis:{
					type: 'value'
				},
				series:[
					{
						name: '语文',
						type: 'bar',
						data: yarr1
					},
					{
						name: '数学',
						type: 'bar',
						data: yarr2
					},
				]
			}
			myec.setOption(option);
		</script>
	</body>
</html>

其中，legend可以简写：

1
legend:{},