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

白日梦想家☜

已于 2023-05-20 12:47:00 修改

阅读量901

点赞数

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-19 12:45:48 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130764306

版权

HTML 专栏收录该内容

40 篇文章 11 订阅

订阅专栏

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>