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. 准备数据，设置给series下的data。data：[{value：100}]。
  2. 图表类型。在series下设置type：gauge。
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
<!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 option = {
				series:[
					{
						type: 'gauge',
						data:[
							{
								value: 23,
							}
						]
					}
				]
			}
			
			myec.setOption(option);
		</script>
	</body>
</html>

2.常用效果

2.1 设置仪表盘数值范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var option = {
				series:[
					{
						type: 'gauge',
						data:[
							{
								value: 67,
							}
						],
						min: 13, //最小值
						max: 250 //最大值
					}
				]
			}

2.2 多个指针

1
2
3
4
5
6
7
8
data:[
							{
								value: 67,
							},
							{
								value: 37,
							}
						],

2.3 指针颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
data:[
							{
								value: 67,
								itemStyle:{
									color: 'red'
								}
							},
							{
								value: 37,
								itemStyle:{
									color: 'green'
								}
							}
						],