Echarts-（四）Echarts的折线图

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

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

目录

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

官方文档

在前面也已经说了很多了，相同用法的就不说了，只是说一些不同的。

1.标记

最大、最小、平均值。标注区间（markArea）。

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
<!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
				},
				xAxis:{
					type: 'category',
					data: xarr
				},
				yAxis:{
					type: 'value'
				},
				series:[
					{
						name: '语文',
						type: 'bar',
						data: yarr1,
						type: 'line',
						markArea:{
							data:[
								[
									{xAxis: '张三'},
									{xAxis: '李四'}
								],
								[
									{xAxis: '张麻子'},
									{xAxis: '干豇豆'}
								]
							]
						}
					}
				]
			}
			myec.setOption(option);
		</script>
	</body>
</html>

2.线条设置

2.1 平滑效果（smooth）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
series:[
					{
						name: '语文',
						type: 'bar',
						data: yarr1,
						type: 'line',
						smooth: true,
						markArea:{
							data:[
								[
									{xAxis: '张三'},
									{xAxis: '李四'}
								],
								[
									{xAxis: '张麻子'},
									{xAxis: '干豇豆'}
								]
							]
						}
					}
				]

2.2 线条样式（lineStyle）

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:[
					{
						name: '语文',
						type: 'bar',
						data: yarr1,
						type: 'line',
						smooth: true,
						markArea:{
							data:[
								[
									{xAxis: '张三'},
									{xAxis: '李四'}
								],
								[
									{xAxis: '张麻子'},
									{xAxis: '干豇豆'}
								]
							]
						},
						lineStyle:{
							color: 'green', //颜色
							type: 'dashed' //类型。solid实线、dashed虚线、dotted点线
						}
					}
				]

2.3 填充阴影（areaStyle）

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
series:[
					{
						name: '语文',
						type: 'bar',
						data: yarr1,
						type: 'line',
						smooth: true,
						markArea:{
							data:[
								[
									{xAxis: '张三'},
									{xAxis: '李四'}
								],
								[
									{xAxis: '张麻子'},
									{xAxis: '干豇豆'}
								]
							]
						},
						lineStyle:{
							color: 'green',
							type: 'dashed'
						},
						areaStyle:{
							color: 'green' //填充颜色
						}
					}
				]

3.紧挨边缘（boundaryGap）

第一组数据与y轴之间有间隙，如果想让从y轴上开始，则把间隙取消即可。

1
2
3
4
5
xAxis:{
					type: 'category',
					data: xarr,
					boundaryGap:false
				},

4.脱离0值比例（scale）

即让坐标轴不从0开始。而从给出的最小的数开始。

1
2
3
4
yAxis:{
					type: 'value',
					scale: true
				},

5.堆叠图（stack）

5.1 正常

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
<!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
				},
				xAxis:{
					type: 'category',
					data: xarr,
				},
				yAxis:{
					type: 'value',
				},
				series:[
					{
						name: '语文',
						type: 'bar',
						data: yarr1,
						type: 'line',
					},
					{
						name: '数学',
						type: 'bar',
						data: yarr2,
						type: 'line',
					}
				]
			}
			myec.setOption(option);
		</script>
	</body>
</html>

可以看见效果，两个折线图是交叉了的。

5.2 堆叠（stack）

所谓堆叠，就是把另外一条折线的对应点当成开始。即参考点变了。这样一来，就不会交叉了。需要注意的是，两条折线的stack必须一样。

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
<!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
				},
				xAxis:{
					type: 'category',
					data: xarr,
				},
				yAxis:{
					type: 'value',
				},
				series:[
					{
						name: '语文',
						type: 'bar',
						data: yarr1,
						stack: 'all',
						type: 'line'
					},
					{
						name: '数学',
						type: 'bar',
						data: yarr2,
						stack: 'all',
						type: 'line',
					}
				]
			}
			myec.setOption(option);
		</script>
	</body>
</html>

这样，两条折线就不会进行交叉了。