极客观点
项目管理
HarmonyOS
如图框内的时间 按秒刷新 倒计时
代码：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script><script type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script><script type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script><script type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script><script type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script><script type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script><script type="text/javascript"
src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script><script type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script><script type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script></head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 60%"></div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="gettable()">Go!</button>
</span> <input type="text" class="form-control" placeholder="输入搜索的表名"
id="table">
</div>
<!-- /input-group -->
</div>
</div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var count = 0;
var newtime = null;
myChart.showLoading({
text : '正在努力的读取数据中...', //loading话术
});
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str="2018/10/25 20:30:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
}
return d+"天"+h+"时"+m+"分"+s+"秒";
//递归每秒调用countTime方法，显示动态时间效果
}
var option = {
title : {
text : '111'
},
tooltip : {
trigger : 'axis', //放在折线点的时候显示出相应x和y坐标相应的数据信息
},
legend : {
data : [ '数值' ]
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
}, //整个图表的跟父容器的间距
xAxis : [ {
} ],
yAxis : {},
series : [ {
name : '数值',
type : 'line',
itemStyle : {
normal : {
color : '#47b34f',
lineStyle : {
color : '#47b34f'
}
}
//设置折线图中折线线条颜色和折线点颜色
},
markPoint: {
symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z',
data:[{name : 'S', value : "ECB\n2018-10-25\t20:30\n剩余时间:"+ countTime(), coord: [800, 3]}],
},
} ],
dataZoom : [ {
type : 'slider',//数据滑块
start : 0,
minSpan : 8, //5min
dataBackground : {
lineStyle : {
color : '#95BC2F'
},
areaStyle : {
color : '#95BC2F',
opacity : 1,
}
},
}, {
type : 'inside'//使鼠标在图表中时滚轮可用
} ],
};
function gettable() {
var tablename = $("#table").val();
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var date1 = date.getDate();
$.ajax({
url : 'gettable/' + tablename,
type : 'get',
async : false, //同步执行
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
//初始化option.xAxis[0]中的data
option.xAxis[0].data = [];
for (var i = 0; i < result.length; i++) {
option.xAxis[0].data.push(result[i].date);
}
//初始化option.series[0]中的data
option.series[0].data = [];
for (var i = 0; i < result.length; i++) {
option.series[0].data.push(result[i].value);
if (result[i].value != null) {
count++;
}
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption(option);
}
},
error : function(errorMsg) {
alert("图表请求数据失败啦!");
}
})
}
setInterval(function () {
myChart.dispatchAction({
type: 'showTip',
seriesIndex:0 ,//第几条series
dataIndex:count-1,//第几个tooltip
});
},3000);
setInterval(function () {
series: [
{
markPoint: {
symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z',
data:[{name : 'S', value : "ECB\n2018-10-25\t20:30\n剩余时间:"+ countTime(), coord: [800, 3]}],
},
},
]
},1000);
//echarts图表点击跳转
myChart.on('click', function (param){
var currenttimevalue=param.name;
window.location.href="currenttime.html?currenttimevalue="+currenttimevalue;
});
</script></body>
</html>