ehcarts实现实时时钟

最新推荐文章于 2023-10-24 09:15:41 发布

晨曦之枭

最新推荐文章于 2023-10-24 09:15:41 发布

阅读量1.6k

点赞数

分类专栏： echarts 文章标签： eharts html

本文链接：https://blog.csdn.net/zjz155/article/details/86543925

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

仪表盘参数配置项

series 系列列表
可以添加多个系列列表
series.min 最小数据值
数据项的最小取值
series. max 最大数据值
数据项的最大取值
series. splitNumber 表盘刻度的分割段数
把整个表盘均分为几大段
series.detail 仪表盘详情
用于显示数据,也就是指针指向的数值
series.radius 仪表盘半径
可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
series.center 仪表中心位置
center:[“50%”,“50%”],
series.startAngle: 仪表盘起始角度。
圆心正右手侧为0度，正上方为90度，正左手侧为180度。
series.endAngle:仪表盘结束角度。
series.data数据项数据
series.title对数据项名进设置
series.axisLine 仪表盘轴线相关配置
也就是设置仪表盘的圆环
series.axisTick 刻度样式
对splitNumber分的每一段进行在划分
series. axisLabel刻度标签。
splitNumber分割线的标签显示与样式设置
series. pointer指针样式设置

效果图：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>clock</title>
	<meta charset="utf-8">
	<script src="static/js/echarts.min3.js"></script>
</head>
<body>
	<div id="main" style="width: 200px;height: 200px;background-color:pink             ;">
		
	</div>
	<script>
		var myChart = echarts.init(document.getElementById("main"));
		var option = {
			title:{
				text:"天梭时钟",
				left: "center",
				
			},
			tooltip : {
		        formatter: "{a} <br/>{b} : {c}"
		    },	
		    textStyle:{
		            	color: "#0000",
		            },	   
		    series: [      
		        {
		            name: '时钟-秒',
		            type: 'gauge',
		            radius:"70%",
		            center:["50%","50%"],
		            startAngle: 90,
		            endAngle:-269.999,
		            // 最小数据值（数据项的最小取值）
		            min: 0,
		            // 最大数据值 （数据项的最大取值）
		            max: 60,
		            // 表盘刻度的分割段数(均分为几大段)
		            splitNumber: 12,
		          
		            // 仪表盘详情，用于显示数据,也就是指针指向的数值	            
		            detail: {
		            	show: false,		            	
		            	fontSize:12,
		            	color: "white",
		        		// 格式化函数或者字符串(格式化显示详情,对显示的内容,格式进行定制)
		            	formatter: function(value){
		            		if (value == 0)
		            			return "00:";
		            		else if (value<10)
		            			return "0"+value;
		            		else
		            			return value ;
		            		
		            	},
		            	
		            	offsetCenter: [12,"125%"],          	
		            },
		            // 数据项
		            data: [{value: 59, name: '秒'}],
		            // data 数据的标题名设置
		            title:{
		            	show:false,
		            },
		            // 仪表盘轴线相关配置
		            axisLine:{
		            	lineStyle:{
		            		color:[[1, '#FF0000']],
		            		width:5,
		            	},
		            },

		            splitLine:{		            	
		            	length:10,
		            	lineStyle:{
		            		color: "#000",
		            		width:5, 
		            	}
		            },
		            
		            axisTick:{
		            	show:false,
		            	splitNumber: 5,
		            	lineStyle:{
		            		color: "#000",
		            		 
		            	}
		            },
		           

		            axisLabel:{
		            	show:false,
		            	distance:5,
						formatter: function (value) {
						   if (value == 0 || value == 60)
		            			return "60";
		            		else if (value<10)
		            			return "0"+value;
		            		else
		            			return value;
						}		            	
		            },

		            pointer:{
		            	length: "70%", 
		            	width: 3,		            	
		            },  

		            itemStyle:{
		            	color:"#000",
		            } 

		        },	

		        {
		            name: ' 时钟-分',
		            type: 'gauge',
		            radius:"70%",
		            center:["50%","50%"],
		            startAngle: 90,
		            endAngle:-269.999,
		            min: 0,
		            max: 60,
		            splitNumber: 12,
		          
		            // 仪表盘详情，用于显示数据,也就是指针指向的数值	            
		            detail: {
		            	show: false,		            	
		            	fontSize:12,
		            	color: "white",
		    			formatter: function(value){
		            		if (value == 0)
		            			return "00:";
		            		else if (value<10)
		            			return "0"+value + ":";
		            		else
		            			return value + ":";
		            		
		            	},
		            	
		            	offsetCenter: [0,"125%"],          	
		            },
		            data: [{value: 59, name: '分'}],
		            title:{
		            	show:false,
		            }, 
		            
		            axisLine:{
		            	lineStyle:{
		            		color:[[1, '#14c8d4']],
		            		width:5,
		            	},
		            },

		            splitLine:{		            	
		            	length:10,
		            	lineStyle:{
		            		color: "#000",
		            		width:5, 
		            	}
		            },

		            axisTick:{
		            	show:true,
		            	splitNumber: 5,
		            	lineStyle:{
		            		color: "#000",
		            		 
		            	}
		            },
		           

		            axisLabel:{
		            	show:false,
		            	distance:5,
						formatter: function (value) {
						   if (value == 0 || value == 60)
		            			return "60";
		            		else if (value<10)
		            			return "0"+value;
		            		else
		            			return value;
						}		            	
		            },

		            pointer:{
		            	length: "70%", 
		            	width: 3,
		            },   

		        },	

		        {
		            name: '时钟-时',
		            type: 'gauge',
		            radius:"70%",
		            center:["50%","50%"],
		            startAngle: 90,
		            endAngle:-269.999,
		            // 最小数据值（数据项的最小取值）
		            min: 0,
		            // 最大数据值 （数据项的最大取值）
		            max: 12,
		            // 表盘刻度的分割段数(均分为几大段)
		            splitNumber: 12,
		          
		            // 仪表盘详情，用于显示数据,也就是指针指向的数值		            	            
		            detail: {
		            	show: true,
		            	fontSize:12,
		            	color: "white",         	
		            	backgroundColor: '#0000FF',
		            	borderWidth:1,
		            	borderRadius:3,
		            	shadowColor:"#0000CD",
		            	shadowBlur:10,
		            	// 格式化函数或者字符串(格式化显示详情,对显示的内容,格式进行定制)
		            	formatter: function(value){
		            		value=parseInt(value);
		            		var dt_ = new Date();
		            		hour_ = dt_.getHours();
		            		// 判断是上午还是下午
		            		if((hour_ - value) == 12)
		            			value = hour_;

		            		var minutes = option.series[1].data[0].value;
	            			var seconds = option.series[0].data[0].value;
	            			minutes = minutes<10?("0" + minutes):minutes;
	            			seconds = seconds<10?("0" + seconds):seconds;
		            		if (value == 0 || value == 12)    			
		            			return "12" + ":" + minutes + ":" + seconds;
		            		else if (value<10)
		            			return "0"+ value + ":" + minutes + ":" + seconds;
		            		else
		            			return value + ":" + minutes + ":" + seconds;
		            		
		            	},

		            	// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
		            	// 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。  
		            	offsetCenter: [0,"125%"],          	
		            },
		            // 数据
		            data: [{value: 8, name: 'TISSOT'}],
		            // data 数据的标题名
		            title:{
		            	show:true,
		            	fontSize:10,

		            },
		            axisLine:{
		            	lineStyle:{
		            		color:[[1, '#FFD700']],
		            		width:5,
		            	},
		            },

		            splitLine:{		            	
		            	length:10,
		            	lineStyle:{
		            		color: "#14c8d4",
		            		width:5, 
		            	}
		            },

		            axisTick:{
		            	show:false,
		            	splitNumber: 5,
		            	lineStyle:{
		            		color: "#14c8d4",
		            		 
		            	}
		            },

		            axisLabel:{
		            	show:true,
		            	distance:5,
						formatter: function (value) {	
							// console.log(value + ":" + option.series[1].data[0].value + ":" + option.series[2].data[0].value);						
						   if (value == 0 || value == 12)
		            			return "12";
		            		else if (value<10)
		            			return "0"+value;
		            		else
		            			return value;
						}		            	
		            },

		            pointer:{
		            	length: "50%",
		            	width: 3,
		            },   

		        },	       	       

		    ]
		};	

		
		setInterval(function(){
			var date = new Date();
			Hour = date.getHours()<=12?date.getHours():date.getHours()-12;
			Minutes = date.getMinutes();
			Seconds = date.getSeconds();			
			option.series[1].data[0].value = Minutes;
			option.series[0].data[0].value = Seconds;
			option.series[2].data[0].value = Hour + Minutes/12/10;

			myChart.setOption(option);			
		},1000);

	</script>
</body>
</html>