大数据可视化-echarts三个仪表盘（HBuilderX）

本文链接：https://blog.csdn.net/weixin_64272885/article/details/129900351

文章提供了一段HTML代码，展示了如何利用ECharts库创建包含多个仪表盘（速度、转速）的动态图表。代码详细定义了图表的配置项，包括颜色、大小、字体等，并通过setInterval函数每两秒更新数据以实现动态变化。

摘要由CSDN通过智能技术生成

效果图：

具体代码：

<html>

<head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
  <script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>

</head>

<body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		//基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		//指定图表的配置项和数据
		var option = {  //指定图表的配置项和数据
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			title: {  //配置标题组件
				text: '多仪表盘实例 ',
				x: 'center', y: 100,
				show: true,  //设置是否显示标题，默认true
				offsetCenter: [50, "20%"],  //设置相对于仪表盘中心的偏移
				textStyle: {
					fontFamily: "黑体",  //设置字体名称，默认宋体
					color: "blue",  //设置字体颜色，默认#333
					fontSize: 20,  //设置字体大小，默认15
				}
			},
			tooltip: { formatter: "{a} <br/>{c} {b}" },  //配置提示框组件
			series: [  //配置数据系列，共有4个仪表盘
				{   //设置数据系列之1：速度
					name: '速度', type: 'gauge', z: 3,
					min: 0,  //设置速度仪表盘的最小值
					max: 220,  //设置速度仪表盘的最大值
					splitNumber: 22,  //设置速度仪表盘的分隔数目为22
					radius: '50%',  //设置速度仪表盘的大小
					axisLine: { lineStyle: { width: 10 } },
					axisTick: {  //设置坐标轴小标记
						length: 15,  //设置属性length控制线长
						splitNumber: 5,  //设置坐标轴小标记的分隔数目为5
						lineStyle: {  //设置属性lineStyle控制线条样式
							color: 'auto'
						}
					},
					splitLine: { length: 20, lineStyle: { color: 'auto' } },
					title: { textStyle: { fontWeight: 'bolder', fontSize: 20, fontStyle: 'italic' } },
					detail: { textStyle: { fontWeight: 'bolder' } },
					data: [{ value: 40, name: '车速(km/h)' }]
				},
				{   //设置数据系列之2：转速
					name: '转速', type: 'gauge',
					center: ['20%', '55%'],  //设置转速仪表盘中心点的位置，默认全局居中
					radius: '35%',  //设置转速油表仪表盘的大小
					min: 0,  //设置转速仪表盘的最小值
					max: 7,  //设置转速仪表盘的最大值
					endAngle: 45,
					splitNumber: 7,  //设置转速仪表盘的分隔数目为7
					axisLine: { lineStyle: { width: 8 } },  //设置属性lineStyle控制线条样式
					axisTick: {  //设置坐标轴小标记
						length: 12,  //设置属性length控制线长
						splitNumber: 5,  //设置坐标轴小标记的分隔数目为5
						lineStyle: {  //设置属性lineStyle控制线条样式
							color: 'auto'
						}
					},
					splitLine: {  //设置分隔线
						length: 20,  //设置属性length控制线长
						lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式
							color: 'auto'
						}
					},
					pointer: { width: 5 },
					title: { offsetCenter: [0, '-30%'], },
					detail: { textStyle: { fontWeight: 'bolder' } },
					data: [{ value: 1.5, name: '转速(x1000 r/min)' }]
				},
				{   //设置数据系列之1：速度
				name: '转速', type: 'gauge',
				center: ['80%', '55%'],  //设置转速仪表盘中心点的位置，默认全局居中
				radius: '35%',  //设置转速油表仪表盘的大小
				min: 0,  //设置转速仪表盘的最小值
				max: 7,  //设置转速仪表盘的最大值
				startAngle: 135, 
				endAngle: -45,
				splitNumber: 7,  //设置转速仪表盘的分隔数目为7
				axisLine: { lineStyle: { width: 8 } },  //设置属性lineStyle控制线条样式
				axisTick: {  //设置坐标轴小标记
					length: 12,  //设置属性length控制线长
					splitNumber: 5,  //设置坐标轴小标记的分隔数目为5
					lineStyle: {  //设置属性lineStyle控制线条样式
						color: 'auto'
					}
				},
				splitLine: {  //设置分隔线
					length: 20,  //设置属性length控制线长
					lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式
						color: 'auto'
					}
				},
				pointer: { width: 5 },
				title: { offsetCenter: [0, '-30%'], },
				detail: { textStyle: { fontWeight: 'bolder' } },
				data: [{ value: 1.5, name: '油表' }]
				},
			]
		};
		setInterval(function () {
			option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
			option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
			option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
			myChart.setOption(option, true);
		}, 2000);  //每间2秒重新渲染一次，以实现动态效果
	</script>
</body>

</html>

每两秒渲染一次，实现动态效果

		setInterval(function () {
			option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
			option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
			option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
			myChart.setOption(option, true);
		}, 2000);  //每间2秒重新渲染一次，以实现动态效果

想要使用该图表,只需要复制以上代码

引入 ECharts 文件可以用上面代码中的方法

<script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>

也可以下载 echarts.js 在页面文件中引入即可.

echarts.js 下载链接: http://echarts.baidu.com/download.html