<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Time</title>
<!-- 引入 echarts.js -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://echarts.baidu.com/dist/echarts.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:600px;margin: 0 auto;"></div>
<div class="btns" style="position: relative;left: 35%;">
<button type="button" class="btn btn-primary" style="width: 10%;margin: 0 auto;" onclick="stop()">stop</button>
<button type="button" class="btn btn-primary" style="width: 10%;margin: 0 auto;" onclick="start()">start</button>
<button type="button" class="btn btn-primary" style="width: 10%;margin: 0 auto;" onclick="reset()">reset</button>
</div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var dom = myChart.getDom();
myChart.getDom().style.width = "600px";
myChart.getDom().style.height = "600px";
myChart = echarts.init(dom);
var option = {
series: [{ ///大表盘时针
name: '小时',
type: 'gauge',
radius: '90%', //仪表盘半径
min: 0,
max: 12,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12,
animation: 0,
pointer: { //仪表盘指针
length: '70%',
width: 6
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#109A39',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: { //仪表盘轴线样式
show: 0,
lineStyle: {
color: [
[1, '#337ab7']
],
width: 10,
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 12,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
splitLine: { //分割线样式
length: 10,
lineStyle: {
width: 2
}
},
axisTick: { //仪表盘刻度样式
show: true,
splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {
color: ['#ffffff']
}
},
axisLabel: {
show: 0
}, //刻度标签
title: {
show: 0
}, //仪表盘标题
detail: {
show: 0
}, //仪表盘显示数据
data: [{}]
}, { ///大表盘分针
name: '分钟',
type: 'gauge',
radius: '90%', //仪表盘半径
min: 0,
max: 12,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12,
animation: 0,
pointer: { //仪表盘指针
length: '85%',
width: 6
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#ca8622',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: { //仪表盘轴线样式
show: 0,
lineStyle: {
width: 0
}
},
splitLine: { //分割线样式
length: 10,
lineStyle: {
width: 2
}
},
axisTick: { //仪表盘刻度样式
show: true,
splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {
color: ['#ffffff']
}
},
axisLabel: {
show: 0
}, //刻度标签
title: {
show: 0
}, //仪表盘标题
detail: {
show: 0
}, //仪表盘显示数据
data: [{}]
}, { ///大表盘秒针
name: '秒',
type: 'gauge',
radius: '90%', //仪表盘半径
min: 0,
max: 60,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12,
animation: 0,
pointer: { //仪表盘指针
show: true,
length: '95%',
width: 4
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#00b0b0',
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 10,
shadowOffsetX: 4,
shadowOffsetY: 4
}
},
axisLine: { //仪表盘轴线样式
lineStyle: {
color: [
[1, '#337ab7']
],
width: 10
}
},
splitLine: { //分割线样式
length: 10,
lineStyle: {
width: 2
}
},
axisTick: { //仪表盘刻度样式
show: 1,
splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {
color: ['#fff']
}
},
axisLabel: { //刻度标签
show: 1,
distance: 6, //标签与刻度线的距离
textStyle: {
fontWeight: 'bold',
fontSize: 16
},
formatter: function(t) {
switch(t + '') {
case '0':
return '';
case '5':
return '1';
case '10':
return '2';
case '15':
return '3';
case '20':
return '4';
case '25':
return '5';
case '30':
return '6';
case '35':
return '7';
case '40':
return '8';
case '45':
return '9';
case '50':
return '10';
case '55':
return '11';
case '60':
return '12';
}
}
},
title: {
show: 0
}, //仪表盘标题
detail: { //仪表盘显示数据
formatter: '',
offsetCenter: [0, '60%']
},
data: [{}]
}]
};
myChart.setOption(option);
var n = 6;
var time = 0;
var year = 1914,
month = 7,
date = 23,
h = 0,
m = 0,
s = 0;
function getDaysInOneMonth(year, month) {
month = parseInt(month, 10);
var d = new Date(year, month, 0);
return d.getDate();
}
var dates = getDaysInOneMonth(year, month);
console.log(dates);
function timeTicket() {
s = s + 1;
if(s >= 60) {
s = 0;
m = m + 1; //分钟
}
if(m >= 60) {
m = 0;
h = h + 1; //小时
}
if(h >= 24) {
h = 0;
date = date + 1; //小时
}
if(date > dates) {
date = 1;
month = month + 1;
}
if(month > 12) {
month = month - 12;
year = year + 1;
}
hours_24 = h + m / 60;
if(hours_24 > 12)
hours_12 = hours_24 - 12;
else
hours_12 = hours_24;
minutes = m + s / 60;
seconds = s;
option.series[0].data[0].value = (hours_12).toFixed(2);
option.series[1].data[0].value = (minutes / 5).toFixed(2);
option.series[2].data[0].value = (seconds).toFixed(2);
var daytxt = year + "年" + month + "月" + date + "日";
var timetxt = toDub(h) + ":" + toDub(m) + ":" + toDub(s);
option.series[2].detail.formatter = daytxt + "\n" + timetxt;
myChart.setOption(option, true);
};
function reset() { //重置
clearInterval(time);
h = m = s = 0;
option.series[0].data[0].value = 0;
option.series[1].data[0].value = 0;
option.series[2].data[0].value = 0;
var daytxt = year + "年" + month + "月" + date + "日";
var timetxt = toDub(h) + ":" + toDub(m) + ":" + toDub(s);
option.series[2].detail.formatter = daytxt + "\n" + timetxt;
myChart.setOption(option, true);
}
function start() { //开始
time = setInterval(timeTicket, 1000 / n);
}
function stop() { //暂停
clearInterval(time);
}
function toDub(n) { //补0操作
if(n < 10) {
return "0" + n;
} else {
return "" + n;
}
}
</script>
</body>
</html>
可以随时开始暂停和更改时间流速的小页面
最新推荐文章于 2023-06-16 18:55:47 发布