Echarts-（六）直角坐标系中的常用配置

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

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

目录

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

官方文档

直角坐标系常用配置

直角坐标系图表：柱状图、折线图、散点图。

1.网格（grid）

用来控制直角坐标系的布局和大小。

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
<!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 option = {
				grid:{
					show:true, //控制显示
					borderWidth: 10, //边框大小
					borderColor: 'green', //颜色
					left:130, //距离左边
					top:50, //上边
					width:400, //图表宽度
					height:200 //图表高度
				},
				xAxis:{
					type: 'category',
					data: xarr
				},
				yAxis:{
					type: 'value'
				},
				series:[
					{
						name: '语文',
						type: 'line',
						data: yarr1,
					}
				]
			}
			myec.setOption(option);
		</script>
	</body>
</html>

2.坐标轴（Axis）

分为x轴和y轴。默认情况下x轴在底部，y轴在左边。也可以自行更改调整。

  1. 坐标轴类型type：

  • value：数值轴，自动会从目标数据中读取数据。即从series的data中读取。如上面的yAxis。

  • category：类目轴，该类型必须通过data设置类目数据。如上面的xAxis。

  1. 显示位置position
  • xAxis：可取值为 top 或者bottom。
  • yAxis：可取值为 left 或者right。
1
2
3
4
5
6
7
8
9
xAxis:{
					type: 'category',
					data: xarr,
					position: 'top'
				},
				yAxis:{
					type: 'value',
					position: 'right'
				},

3.区域缩放（dataZoom）

用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有。dataZoom是一个数组，可以配置多个区域缩放器。

这与之前的那个用toolbox的不一样。

  1. 类型type

  • slider：滑块。图表附近会显示一个可以调整的滑块条。

  • inside：内置，可以用鼠标滑轮缩放。

1
2
3
4
5
6
7
8
var option = {
dataZoom:[
					{
						// type: 'slider'
						type: 'inside'
					},
				],
}

默认只有x轴，即使写了两个也不行。如果要y轴，则需要进行指定。

  1. 指明产生作用的轴

  • xAxisIndex：设置缩放组件控制的是哪个x轴，一般写0即可（如果有多个则根据具体情况）。

  • yAxisIndex：设置缩放组件控制的是哪个y轴，一般写0即可（如果有多个则根据具体情况）。

1
2
3
4
5
6
7
8
9
10
dataZoom:[
					{
						type: 'slider',
						xAxisIndex: 0 //指定x轴
					},
					{
						type: 'slider',
						yAxisIndex: 0 //指定y轴
					}
				],
  1. 指定初始状态的缩放情况

默认情况下，是所有数据都有。

  • start：数据窗口范围的起始百分比。

  • end：数据窗口范围的结束百分比。

1
2
3
4
5
6
7
8
9
10
11
12
dataZoom:[
					{
						type: 'slider',
						xAxisIndex: 0
					},
					{
						type: 'slider',
						yAxisIndex: 0,
						start: 100,
						end: 150
					}
				],