web数据可视化(Echarts版)4-8多仪表盘图(代码仅供参考)

【代码】web数据可视化(Echarts版)4-8多仪表盘图(代码仅供参考)

m0_63471474

1214人浏览 · 2023-05-19 12:45:48

m0_63471474 · 2023-05-19 12:45:48 发布

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="echarts.js"></script>
		<title></title>
	</head>
	<body>
		<div id="main" style="height: 1000px;width:1000px;"></div>
		<script type="text/javascript">
			var myChart=echarts.init(document.getElementById("main"));
			var option={
				backgroundColor:'rgba(128,128,128,0.1)',
				tooltip:{formatter:"{a} <br/>{c} {b}"},
				title:{
					text:'多仪表盘实例(共四个仪表盘)',
					x:'center',y:100,
					show:true,
					offsetCenter:[50,"20%"],
					textStyle:{
						fontFamily:"黑体",
						color:"blue",
						fontSize:20,
					}
				},
				series:[
					{
						name:"速度",type:"gauge",z:3,
						radius:"35%",
						min:0,
						max:220,
						splitNumber:22,
						axisLine:{lineStyle:{width:10}},
						axisTick:{
							length:15,
							splitNumber:5,
							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)'}]
					},
					{
						name:"转速",type:"gauge",
						radius:"35%",
						center:["20%","55%"],
						min:0,
						max:7,
						endAngle:45,
						splitNumber:7,
						axisLine:{lineStyle:{width:8}},
						axisTick:{
							length:12,
							splitNumber:5,
							lineStyle:{
								color:"auto",
							},
						},
						splitLine:{length:20,lineStyle:{color:"auto",}},
						pointer:{width:5},
						title:{offsetCenter:[0,'-30%'],},
						detail:{textStyle:{fontWeight:'bolder'}},
						data:[{value:1.5,name:'转速(x1000 r/min)'}]
					},
					{
						name:"油表",type:"gauge",
						radius:"25%",
						center:["77%","50%"],
						min:0,
						max:2,
						startAngle:135,
						endAngle:45,
						splitNumber:2,
						axisLine:{lineStyle:{width:8}},
						axisTick:{
							length:10,
							splitNumber:5,
							lineStyle:{
								color:"auto",
							},
						},
						axisLabel:{
							formatter:function(v){
								switch(v+''){
									case '0':return 'E';
									case '1':return '油表';
									case '2':return 'F';
								}
							}
						},
						splitLine:{length:15,lineStyle:{color:"auto",}},
						pointer:{width:4},
						title:{show:false},
						detail:{show:false},
						data:[{value:0.5,name:'gas'}]
					},
					{
						name:"水表",type:"gauge",
						radius:"25%",
						center:["77%","50%"],
						min:0,
						max:2,
						startAngle:315,
						endAngle:225,
						splitNumber:2,
						axisLine:{lineStyle:{width:8}},
						axisTick:{show:false},
						axisLabel:{
							formatter:function(v){
								switch(v+''){
									case '0':return 'H';
									case '1':return '水表';
									case '2':return 'C';
								}
							}
						},
						splitLine:{length:15,lineStyle:{color:"auto",}},
						pointer:{width:2},
						title:{show:false},
						detail:{show:false},
						data:[{value:0.5,name:'gas'}]
					},
				]
			};
			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;
					option.series[3].data[0].value=(Math.random()*2).toFixed(2)-0;
					myChart.setOption(option,true);
				},2000);
			myChart.setOption(option);
		</script>
	</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。