for example, the time in the frame is refreshed in seconds
Code:
< 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", //xy
},
legend : {
data : [ "" ]
},
grid : {
left : "3%",
right : "4%",
bottom : "3%",
containLabel : true
}, //
xAxis : [ {
} ],
yAxis : {},
series : [ {
name : "",
type : "line",
itemStyle : {
normal : {
color : "-sharp47b34f",
lineStyle : {
color : "-sharp47b34f"
}
}
//
},
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 : "-sharp95BC2F"
},
areaStyle : {
color : "-sharp95BC2F",
opacity : 1,
}
},
}, {
type : "inside"//
} ],
};
function gettable() {
var tablename = $("-sharptable").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; iPP) {
option.xAxis[0].data.push(result[i].date);
}
//option.series[0]data
option.series[0].data = [];
for (var i = 0; i < result.length; iPP) {
option.series[0].data.push(result[i].value);
if (result[i].value != null) {
countPP;
}
}
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 >