H5+JS+JQuery+ECharts实现异步加载
这几天，看了一下ECharts官网的API和Demo发现很有意思，于是就利用模型预测产生的数据做一个伪实时的动态数据显示 。
首先，创建一个index.html的文件，我用的vscode打开的，进行编写。
1.插入一个标签
<div id="main" style="width:600px;height:400px;"></div>
设置他的一些style（可自行美化，我很懒！！！）。
2.在body下建一个<script>脚本（为什么要在body下写js脚本呢？因为这是提高用户体验，可自行百度深层次的原因~~~）。
3.脚本写啥呢？别急，慢慢来啊~~
（1）首先，我们来建一个echarts的对象，就叫他MyChart吧
var myChart = echarts.init(document.getElementById('main'));
（2）建一个setoption这是初始化图的，填一些基本参数（可通过此链接飞到Echarts官网的配置参考一下）
（3）初始化了之后，我们就可以ajax异步读取本地文件了~~~~
其中不懂堆栈的（链接在此这个是我Google的，有可能被墙~~）不懂push，shift操作数据的（链接在此这个应该不会被墙~~）
$.ajax({
type:"get",
// async:true,
url:"test_data.json",
data:{},
dataType:"json",
success:function(result){
var datas=result
if(result){
var m=0;
for(var i=0;i<result.length;i++){
if(m<1000){
datas.shift();
date.push(result[i]["time"]);
data.push(result[i]["AM23SIG0206.AV"]);
m+=1;
}
else{
break;
}
myChart.hideLoading();
setInterval(function(){
for(var n=0;n<2;n++){
date.shift();
date.push(datas[n]["time"]);
data.shift();
data.push(datas[n]["AM23SIG0206.AV"]);
}
myChart.setOption({
xAxis:{
data:date
},
series:[
{
name:"参数",
data:data
}
]});
for(var nn=0;nn<2;nn++){
datas.shift()
}
},2000);
}
}
},
error:function(errorMsg){
alert("图表请求数据失败！");
myChart.hideLoading();
myChart_2.hideLoading();
}
})
我来解释一下，这个异步加载的原理是这样子的：
（1）我们现在加载一个.json文件，存在一个变量result里，开始进行数据的操作，利用堆栈的概念先存一个图上要显示的数据量，假设是1000个点，存到data里(这是一个队列）你如果要实现动态的实时的数据，看着数据他会动~~~~你需要存一个数据进去，但是呢这个队列只有1000个容量，放不下怎么办，没关系啊，你先取一个出来不就行了嘛，就这样循环下去~~~~
（2）但是啊，取一个存一个太麻烦了，我们在设置一个定时器setInterval()在这个里面，每过2s更新2个点（怎么更新呢，就是data.shift()
data.push()
模拟了堆栈~~~~
这样就达到了动态数据了~~~~
好吧，如果只是这样也太low了，我要实现一个框架+数据库+前端的真正数据动起来~~~~让我在研究几天~~~~~~
好了，不废话了，下面是源码，有需要的童鞋可以自己跑一下，看看可不可以动~~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<div id="main_2" style="width:600px;height:400px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var myChart_2 = echarts.init(document.getElementById('main_2'));
myChart.setOption({
title:{
text:'异步数据加载'
},
tooltip:{
show:true, }, xAxis:{
type:'category',
boundaryGap:false,
data:[],
splitLine: {
show: false
},
},
yAxis:{
boundaryGap:[0,'100%'],
type:'value',
min:'dataMin',
max:'dataMax',
splitLine: {
show: false
}, },
series:[{
name:'参数',
type:'line',
data:[]
}]
});
myChart_2.setOption({
title:{
text:'异步数据加载'
},
tooltip:{
show:true, }, xAxis:{
type:'category',
boundaryGap:false,
data:[],
splitLine: {
show: false
},
},
yAxis:{
boundaryGap:[0,'100%'],
type:'value',
min:'dataMin',
max:'dataMax',
splitLine: {
show: false
}, },
series:[{
name:'参数',
type:'line',
data:[]
}]
});
myChart.showLoading();
myChart_2.showLoading();
var date = [];
var data = [];
$.ajax({
type:"get",
// async:true,
url:"test_data.json",
data:{},
dataType:"json",
success:function(result){
var datas=result
if(result){ var m=0;
for(var i=0;i<result.length;i++){
if(m<1000){
datas.shift();
date.push(result[i]["time"]);
data.push(result[i]["AM23SIG0206.AV"]);
m+=1;
}
else{
break; }
myChart.hideLoading();
myChart_2.hideLoading();
setInterval(function(){
for(var n=0;n<2;n++){ date.shift();
date.push(datas[n]["time"]);
data.shift();
data.push(datas[n]["AM23SIG0206.AV"]);
}
myChart.setOption({
xAxis:{
data:date
},
series:[
{
name:"参数",
data:data
}
]});
myChart_2.setOption({
xAxis:{
data:date
},
series:[
{
name:"参数",
data:data
}
]});
for(var nn=0;nn<2;nn++){
datas.shift()
} },2000); }
}
},
error:function(errorMsg){
alert("图表请求数据失败！");
myChart.hideLoading();
myChart_2.hideLoading();
}
})
</script>
</html>
[
{
"AM23SIG0206.AV": "594.4071",
"time": "2016-05-01 00:00:01"
},
{
"AM23SIG0206.AV": "594.4207",
"time": "2016-05-01 00:00:04"
},
{
"AM23SIG0206.AV": "594.3883",
"time": "2016-05-01 00:00:07"
},
{
"AM23SIG0206.AV": "594.3586",
"time": "2016-05-01 00:00:10"
},
{
"AM23SIG0206.AV": "594.3883",
"time": "2016-05-01 00:00:13"
},
{
"AM23SIG0206.AV": "594.3398",
"time": "2016-05-01 00:00:16"
},
{
"AM23SIG0206.AV": "594.3398",
"time": "2016-05-01 00:00:19"
},
{
"AM23SIG0206.AV": "594.3075",
"time": "2016-05-01 00:00:22"
},
{
"AM23SIG0206.AV": "594.3076",
"time": "2016-05-01 00:00:25"
},
{
"AM23SIG0206.AV": "594.2753",
"time": "2016-05-01 00:00:28"
},
{
"AM23SIG0206.AV": "594.2753",
"time": "2016-05-01 00:00:31"
},
{
"AM23SIG0206.AV": "594.2429",
"time": "2016-05-01 00:00:34"
},
{
"AM23SIG0206.AV": "594.2753",
"time": "2016-05-01 00:00:37"
},
{
"AM23SIG0206.AV": "594.2429",
"time": "2016-05-01 00:00:40"
},
{
"AM23SIG0206.AV": "594.2565",
"time": "2016-05-01 00:00:43"
},
{
"AM23SIG0206.AV": "594.3075",
"time": "2016-05-01 00:00:46"
},
{
"AM23SIG0206.AV": "594.2726",
"time": "2016-05-01 00:00:49"
},
{
"AM23SIG0206.AV": "594.2752",
"time": "2016-05-01 00:00:52"
},
{
"AM23SIG0206.AV": "594.2914",
"time": "2016-05-01 00:00:55"
},
{
"AM23SIG0206.AV": "594.2726",
"time": "2016-05-01 00:00:58"
},
{
"AM23SIG0206.AV": "594.3075",
"time": "2016-05-01 00:01:01"
},
{
"AM23SIG0206.AV": "594.3075",
"time": "2016-05-01 00:01:04"
},
{
"AM23SIG0206.AV": "594.2752",
"time": "2016-05-01 00:01:07"
},
{
"AM23SIG0206.AV": "594.259",
"time": "2016-05-01 00:01:10"
},
{
"AM23SIG0206.AV": "594.2752",
"time": "2016-05-01 00:01:13"
},
{
"AM23SIG0206.AV": "594.2403",
"time": "2016-05-01 00:01:16"
},
{
"AM23SIG0206.AV": "594.2402",
"time": "2016-05-01 00:01:19"
},
{
"AM23SIG0206.AV": "594.1918",
"time": "2016-05-01 00:01:22"
},
{
"AM23SIG0206.AV": "594.2241",
"time": "2016-05-01 00:01:25"
},
{
"AM23SIG0206.AV": "594.1918",
"time": "2016-05-01 00:01:28"
},
{
"AM23SIG0206.AV": "594.1595",
"time": "2016-05-01 00:01:31"
},
{
"AM23SIG0206.AV": "594.0975",
"time": "2016-05-01 00:01:34"
},
{
"AM23SIG0206.AV": "594.1272",
"time": "2016-05-01 00:01:37"
},
{
"AM23SIG0206.AV": "594.111",
"time": "2016-05-01 00:01:40"
},
{
"AM23SIG0206.AV": "594.1136",
"time": "2016-05-01 00:01:43"
},
{
"AM23SIG0206.AV": "594.0787",
"time": "2016-05-01 00:01:46"
},
{
"AM23SIG0206.AV": "594.0813",
"time": "2016-05-01 00:01:49"
},
{
"AM23SIG0206.AV": "594.0464",
"time": "2016-05-01 00:01:52"
},
{
"AM23SIG0206.AV": "594.014",
"time": "2016-05-01 00:01:55"
},
{
"AM23SIG0206.AV": "594.014",
"time": "2016-05-01 00:01:58"
},
{
"AM23SIG0206.AV": "594.0328",
"time": "2016-05-01 00:02:01"
},
{
"AM23SIG0206.AV": "594.049",
"time": "2016-05-01 00:02:04"
},
{
"AM23SIG0206.AV": "594.0464",
"time": "2016-05-01 00:02:07"
},
{
"AM23SIG0206.AV": "594.0464",
"time": "2016-05-01 00:02:10"
},
{
"AM23SIG0206.AV": "594.0464",
"time": "2016-05-01 00:02:13"
},
{
"AM23SIG0206.AV": "594.0787",
"time": "2016-05-01 00:02:16"
},
{
"AM23SIG0206.AV": "594.049",
"time": "2016-05-01 00:02:19"
},
{
"AM23SIG0206.AV": "594.0625",
"time": "2016-05-01 00:02:22"
},
{
"AM23SIG0206.AV": "594.0948",
"time": "2016-05-01 00:02:25"
},
{
"AM23SIG0206.AV": "594.0774",
"time": "2016-05-01 00:02:28"
},
{
"AM23SIG0206.AV": "594.0464",
"time": "2016-05-01 00:02:31"
},
{
"AM23SIG0206.AV": "594.0948",
"time": "2016-05-01 00:02:34"
},
{
"AM23SIG0206.AV": "594.0625",
"time": "2016-05-01 00:02:37"
},
{
"AM23SIG0206.AV": "594.0625",
"time": "2016-05-01 00:02:40"
},
{
"AM23SIG0206.AV": "594.0625",
"time": "2016-05-01 00:02:43"
},
{
"AM23SIG0206.AV": "594.0787",
"time": "2016-05-01 00:02:46"
},
{
"AM23SIG0206.AV": "594.045",
"time": "2016-05-01 00:02:49"
},
{
"AM23SIG0206.AV": "594.0127",
"time": "2016-05-01 00:02:52"
},
{
"AM23SIG0206.AV": "594.0464",
"time": "2016-05-01 00:02:55"
},
{
"AM23SIG0206.AV": "594.014",
"time": "2016-05-01 00:02:58"
},
{
"AM23SIG0206.AV": "594.0464",
"time": "2016-05-01 00:03:01"
},
{
"AM23SIG0206.AV": "593.9818",
"time": "2016-05-01 00:03:04"
},
{
"AM23SIG0206.AV": "593.9495",
"time": "2016-05-01 00:03:07"
},
{
"AM23SIG0206.AV": "593.9481",
"time": "2016-05-01 00:03:10"
},
{
"AM23SIG0206.AV": "593.8997",
"time": "2016-05-01 00:03:13"
},
{
"AM23SIG0206.AV": "593.8997",
"time": "2016-05-01 00:03:16"
},
{
"AM23SIG0206.AV": "593.8673",
"time": "2016-05-01 00:03:19"
},
{
"AM23SIG0206.AV": "593.835",
"time": "2016-05-01 00:03:22"
},
{
"AM23SIG0206.AV": "593.8027",
"time": "2016-05-01 00:03:25"
},
{
"AM23SIG0206.AV": "593.7704",
"time": "2016-05-01 00:03:28"
},
{
"AM23SIG0206.AV": "593.7704",
"time": "2016-05-01 00:03:31"
},
{
"AM23SIG0206.AV": "593.7193",
"time": "2016-05-01 00:03:34"
},
{
"AM23SIG0206.AV": "593.7193",
"time": "2016-05-01 00:03:37"
},
{
"AM23SIG0206.AV": "593.6735",
"time": "2016-05-01 00:03:40"
},
{
"AM23SIG0206.AV": "593.625",
"time": "2016-05-01 00:03:43"
},
{
"AM23SIG0206.AV": "593.6062",
"time": "2016-05-01 00:03:46"
},
{
"AM23SIG0206.AV": "593.6062",
"time": "2016-05-01 00:03:49"
},
{
"AM23SIG0206.AV": "593.5442",
"time": "2016-05-01 00:03:52"
},
{
"AM23SIG0206.AV": "593.528",
"time": "2016-05-01 00:03:55"
},
{
"AM23SIG0206.AV": "593.4931",
"time": "2016-05-01 00:03:58"
},
{
"AM23SIG0206.AV": "593.4931",
"time": "2016-05-01 00:04:01"
},
{
"AM23SIG0206.AV": "593.4446",
"time": "2016-05-01 00:04:04"
},
{
"AM23SIG0206.AV": "593.4285",
"time": "2016-05-01 00:04:07"
},
{
"AM23SIG0206.AV": "593.3962",
"time": "2016-05-01 00:04:10"
},
{
"AM23SIG0206.AV": "593.38",
"time": "2016-05-01 00:04:13"
},
{
"AM23SIG0206.AV": "593.3774",
"time": "2016-05-01 00:04:16"
},
{
"AM23SIG0206.AV": "593.38",
"time": "2016-05-01 00:04:19"
},
{
"AM23SIG0206.AV": "593.3154",
"time": "2016-05-01 00:04:22"
},
{
"AM23SIG0206.AV": "593.3477",
"time": "2016-05-01 00:04:25"
},
{
"AM23SIG0206.AV": "593.3477",
"time": "2016-05-01 00:04:28"
},
{
"AM23SIG0206.AV": "593.3451",
"time": "2016-05-01 00:04:31"
},
{
"AM23SIG0206.AV": "593.3451",
"time": "2016-05-01 00:04:34"
},
{
"AM23SIG0206.AV": "593.3451",
"time": "2016-05-01 00:04:37"
},
{
"AM23SIG0206.AV": "593.3425",
"time": "2016-05-01 00:04:40"
},
{
"AM23SIG0206.AV": "593.4097",
"time": "2016-05-01 00:04:43"
},
{
"AM23SIG0206.AV": "593.4097",
"time": "2016-05-01 00:04:46"
},
{
"AM23SIG0206.AV": "593.4581",
"time": "2016-05-01 00:04:49"
},
{
"AM23SIG0206.AV": "593.4608",
"time": "2016-05-01 00:04:52"
},
{
"AM23SIG0206.AV": "593.5228",
"time": "2016-05-01 00:04:55"
},
{
"AM23SIG0206.AV": "593.5066",
"time": "2016-05-01 00:04:58"
},
{
"AM23SIG0206.AV": "593.5739",
"time": "2016-05-01 00:05:01"
},
{
"AM23SIG0206.AV": "593.6035",
"time": "2016-05-01 00:05:04"
},
{
"AM23SIG0206.AV": "593.6036",
"time": "2016-05-01 00:05:07"
},
{
"AM23SIG0206.AV": "593.6359",
"time": "2016-05-01 00:05:10"
},
{
"AM23SIG0206.AV": "593.6843",
"time": "2016-05-01 00:05:13"
},
{
"AM23SIG0206.AV": "593.7141",
"time": "2016-05-01 00:05:16"
},
{
"AM23SIG0206.AV": "593.7463",
"time": "2016-05-01 00:05:19"
},
{
"AM23SIG0206.AV": "593.749",
"time": "2016-05-01 00:05:22"
},
{
"AM23SIG0206.AV": "593.7787",
"time": "2016-05-01 00:05:25"
},
{
"AM23SIG0206.AV": "593.7974",
"time": "2016-05-01 00:05:28"
},
{
"AM23SIG0206.AV": "593.8297",
"time": "2016-05-01 00:05:31"
},
{
"AM23SIG0206.AV": "593.8782",
"time": "2016-05-01 00:05:34"
},
{
"AM23SIG0206.AV": "593.9241",
"time": "2016-05-01 00:05:37"
},
{
"AM23SIG0206.AV": "593.9105",
"time": "2016-05-01 00:05:40"
},
{
"AM23SIG0206.AV": "593.9752",
"time": "2016-05-01 00:05:43"
},
{
"AM23SIG0206.AV": "593.9887",
"time": "2016-05-01 00:05:46"
},
{
"AM23SIG0206.AV": "594.0049",
"time": "2016-05-01 00:05:49"
},
{
"AM23SIG0206.AV": "594.0049",
"time": "2016-05-01 00:05:52"
},
{
"AM23SIG0206.AV": "594.021",
"time": "2016-05-01 00:05:55"
},
{
"AM23SIG0206.AV": "594.0372",
"time": "2016-05-01 00:05:58"
},
{
"AM23SIG0206.AV": "594.021",
"time": "2016-05-01 00:06:01"
},
{
"AM23SIG0206.AV": "594.0695",
"time": "2016-05-01 00:06:04"
},
{
"AM23SIG0206.AV": "594.0856",
"time": "2016-05-01 00:06:07"
},
{
"AM23SIG0206.AV": "594.0857",
"time": "2016-05-01 00:06:10"
},
{
"AM23SIG0206.AV": "594.0857",
"time": "2016-05-01 00:06:13"
},
{
"AM23SIG0206.AV": "594.1476",
"time": "2016-05-01 00:06:16"
},
{
"AM23SIG0206.AV": "594.0830000000001",
"time": "2016-05-01 00:06:19"
},
{
"AM23SIG0206.AV": "594.1154",
"time": "2016-05-01 00:06:22"
},
{
"AM23SIG0206.AV": "594.1179",
"time": "2016-05-01 00:06:25"
},
{
"AM23SIG0206.AV": "594.1179",
"time": "2016-05-01 00:06:28"
},
{
"AM23SIG0206.AV": "594.0830000000001",
"time": "2016-05-01 00:06:31"
},
{
"AM23SIG0206.AV": "594.0830000000001",
"time": "2016-05-01 00:06:34"
},
{
"AM23SIG0206.AV": "594.0507",
"time": "2016-05-01 00:06:37"
},
{
"AM23SIG0206.AV": "594.0830000000001",
"time": "2016-05-01 00:06:40"
},
{
"AM23SIG0206.AV": "594.0830000000001",
"time": "2016-05-01 00:06:43"
},
{
"AM23SIG0206.AV": "594.0507",
"time": "2016-05-01 00:06:46"
},
{
"AM23SIG0206.AV": "594.0345",
"time": "2016-05-01 00:06:49"
},
{
"AM23SIG0206.AV": "594.0022",
"time": "2016-05-01 00:06:52"
},
{
"AM23SIG0206.AV": "593.9861",
"time": "2016-05-01 00:06:55"
},
{
"AM23SIG0206.AV": "593.9699",
"time": "2016-05-01 00:06:58"
},
{
"AM23SIG0206.AV": "593.9363",
"time": "2016-05-01 00:07:01"
},
{
"AM23SIG0206.AV": "593.9039",
"time": "2016-05-01 00:07:04"
},
{
"AM23SIG0206.AV": "593.8568",
"time": "2016-05-01 00:07:07"
},
{
"AM23SIG0206.AV": "593.8555",
"time": "2016-05-01 00:07:10"
},
{
"AM23SIG0206.AV": "593.8568",
"time": "2016-05-01 00:07:13"
},
{
"AM23SIG0206.AV": "593.8232",
"time": "2016-05-01 00:07:16"
},
{
"AM23SIG0206.AV": "593.776",
"time": "2016-05-01 00:07:19"
},
{
"AM23SIG0206.AV": "593.7747",
"time": "2016-05-01 00:07:22"
},
{
"AM23SIG0206.AV": "593.7263",
"time": "2016-05-01 00:07:25"
},
{
"AM23SIG0206.AV": "593.7424",
"time": "2016-05-01 00:07:28"
},
{
"AM23SIG0206.AV": "593.6778",
"time": "2016-05-01 00:07:31"
},
{
"AM23SIG0206.AV": "593.6616",
"time": "2016-05-01 00:07:34"
},
{
"AM23SIG0206.AV": "593.6589",
"time": "2016-05-01 00:07:37"
},
{
"AM23SIG0206.AV": "593.6293",
"time": "2016-05-01 00:07:40"
},
{
"AM23SIG0206.AV": "593.5944",
"time": "2016-05-01 00:07:43"
},
{
"AM23SIG0206.AV": "593.6267",
"time": "2016-05-01 00:07:46"
},
{
"AM23SIG0206.AV": "593.5944",
"time": "2016-05-01 00:07:49"
},
{
"AM23SIG0206.AV": "593.5944",
"time": "2016-05-01 00:07:52"
},
{
"AM23SIG0206.AV": "593.5944",
"time": "2016-05-01 00:07:55"
},
{
"AM23SIG0206.AV": "593.5782",
"time": "2016-05-01 00:07:58"
},
{
"AM23SIG0206.AV": "593.5647",
"time": "2016-05-01 00:08:01"
},
{
"AM23SIG0206.AV": "593.562",
"time": "2016-05-01 00:08:04"
},
{
"AM23SIG0206.AV": "593.5782",
"time": "2016-05-01 00:08:07"
},
{
"AM23SIG0206.AV": "593.5298",
"time": "2016-05-01 00:08:10"
},
{
"AM23SIG0206.AV": "593.5944",
"time": "2016-05-01 00:08:13"
},
{
"AM23SIG0206.AV": "593.5621",
"time": "2016-05-01 00:08:16"
},
{
"AM23SIG0206.AV": "593.5621",
"time": "2016-05-01 00:08:19"
},
{
"AM23SIG0206.AV": "593.5944",
"time": "2016-05-01 00:08:22"
},
{
"AM23SIG0206.AV": "593.5944",
"time": "2016-05-01 00:08:25"
},
{
"AM23SIG0206.AV": "593.5917",
"time": "2016-05-01 00:08:28"
},
{
"AM23SIG0206.AV": "593.659",
"time": "2016-05-01 00:08:31"
},
{
"AM23SIG0206.AV": "593.6887",
"time": "2016-05-01 00:08:34"
},
{
"AM23SIG0206.AV": "593.6564",
"time": "2016-05-01 00:08:37"
},
{
"AM23SIG0206.AV": "593.6402",
"time": "2016-05-01 00:08:40"
},
{
"AM23SIG0206.AV": "593.6752",
"time": "2016-05-01 00:08:43"
},
{
"AM23SIG0206.AV": "593.6725",
"time": "2016-05-01 00:08:46"
},
{
"AM23SIG0206.AV": "593.6725",
"time": "2016-05-01 00:08:49"
},
{
"AM23SIG0206.AV": "593.6725",
"time": "2016-05-01 00:08:52"
},
{
"AM23SIG0206.AV": "593.7022",
"time": "2016-05-01 00:08:55"
},
{
"AM23SIG0206.AV": "593.6699",
"time": "2016-05-01 00:08:58"
},
{
"AM23SIG0206.AV": "593.6402",
"time": "2016-05-01 00:09:01"
},
{
"AM23SIG0206.AV": "593.6699",
"time": "2016-05-01 00:09:04"
},
{
"AM23SIG0206.AV": "593.6564",
"time": "2016-05-01 00:09:07"
},
{
"AM23SIG0206.AV": "593.6537",
"time": "2016-05-01 00:09:10"
},
{
"AM23SIG0206.AV": "593.5917",
"time": "2016-05-01 00:09:13"
},
{
"AM23SIG0206.AV": "593.5568",
"time": "2016-05-01 00:09:16"
},
{
"AM23SIG0206.AV": "593.573",
"time": "2016-05-01 00:09:19"
},
{
"AM23SIG0206.AV": "593.5083",
"time": "2016-05-01 00:09:22"
},
{
"AM23SIG0206.AV": "593.4922",
"time": "2016-05-01 00:09:25"
},
{
"AM23SIG0206.AV": "593.4786",
"time": "2016-05-01 00:09:28"
},
{
"AM23SIG0206.AV": "593.4463",
"time": "2016-05-01 00:09:31"
},
{
"AM23SIG0206.AV": "593.4114",
"time": "2016-05-01 00:09:34"
},
{
"AM23SIG0206.AV": "593.3953",
"time": "2016-05-01 00:09:37"
},
{
"AM23SIG0206.AV": "593.3791",
"time": "2016-05-01 00:09:40"
},
{
"AM23SIG0206.AV": "593.3306",
"time": "2016-05-01 00:09:43"
},
{
"AM23SIG0206.AV": "593.3009",
"time": "2016-05-01 00:09:46"
},
{
"AM23SIG0206.AV": "593.2983",
"time": "2016-05-01 00:09:49"
},
{
"AM23SIG0206.AV": "593.266",
"time": "2016-05-01 00:09:52"
},
{
"AM23SIG0206.AV": "593.2499",
"time": "2016-05-01 00:09:55"
},
{
"AM23SIG0206.AV": "593.3145",
"time": "2016-05-01 00:09:58"
},
{
"AM23SIG0206.AV": "593.2821",
"time": "2016-05-01 00:10:01"
},
{
"AM23SIG0206.AV": "593.266",
"time": "2016-05-01 00:10:04"
},
{
"AM23SIG0206.AV": "593.2485",
"time": "2016-05-01 00:10:07"
},
{
"AM23SIG0206.AV": "593.2809",
"time": "2016-05-01 00:10:10"
},
{
"AM23SIG0206.AV": "593.2485",
"time": "2016-05-01 00:10:13"
},
{
"AM23SIG0206.AV": "593.2809",
"time": "2016-05-01 00:10:16"
},
{
"AM23SIG0206.AV": "593.2809",
"time": "2016-05-01 00:10:19"
},
{
"AM23SIG0206.AV": "593.2809",
"time": "2016-05-01 00:10:22"
},
{
"AM23SIG0206.AV": "593.297",
"time": "2016-05-01 00:10:25"
},
{
"AM23SIG0206.AV": "593.2646",
"time": "2016-05-01 00:10:28"
},
{
"AM23SIG0206.AV": "593.297",
"time": "2016-05-01 00:10:31"
},
{
"AM23SIG0206.AV": "593.297",
"time": "2016-05-01 00:10:34"
},
{
"AM23SIG0206.AV": "593.3293",
"time": "2016-05-01 00:10:37"
},
{
"AM23SIG0206.AV": "593.3131",
"time": "2016-05-01 00:10:40"
},
{
"AM23SIG0206.AV": "593.3293",
"time": "2016-05-01 00:10:43"
},
{
"AM23SIG0206.AV": "593.3293",
"time": "2016-05-01 00:10:46"
}
]
这个是.json文件（python的大数据模型预测产生的数据我拿来用一哈）
如果我写的东西对你有帮助，请点个赞呗，关注走一个呗~~~~
H5+JS+JQuery+ECharts实现异步加载的更多相关文章
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- Vue.js 子组件的异步加载及其生命周期控制
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
- 【jquery】 在异步加载的元素上绑定事件
最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...
- 基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
- jQuery的AJax异步加载
主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...
- JS的同步和异步加载
引言 JS的“加载”不能理解为下载,它是分为两个部分:下载,执行.默认的JS加载是同步的,因为浏览器需要一个稳定的DOM结构,而执行JS时可能会对DOM造成改变,所以在执行JS时一定会阻塞HTML的渲 ...
- JS文件延迟和异步加载：defer和async属性
-般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件.这意味着必须等到全部 JavaScript 代码都被加载.解析和执行完以 ...
- jquery.datatable.js与CI整合 异步加载（大数据量处理）
http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...
随机推荐
- 【转】CPU与内存的那些事
下面是网上看到的一些关于内存和CPU方面的一些很不错的文章. 整理如下: 转: CPU的等待有多久? 原文标题:What Your Computer Does While You Wait 原文地址: ...
- Yii2之类自动加载
在yii中,程序中需要使用到的类无需事先加载其类文件,在使用的时候才自动定位类文件位置并加载之,这么高效的运行方式得益于yii的类自动加载机制. Yii的类自动加载实际上使用的是PHP的类自动加载,所 ...
- jerasure 2.0译文
原文地址: 本文译者水平有限,如发现问题请批评指正 Jerasure 2.0:为方便存储相关应用开发的一个基于C开发的纠删码库 版本2.0 James S.Plank Kevin M.Greenan ...
- angular内置provider之$compileProvider
一.方法概览 directive(name, directiveFactory) component(name, options) aHrefSanitizationWhitelist([regexp ...
- Linux学习（十三）du、df、fdisk磁盘分区
一.du du命令是查看文件或者目录大小的命令. 一般使用du -sh 查看,不用-sh参数意义也不大,应为不用这个参数,它会把目录下的所有文件大小递归的显示出来,就像这样: 如果用-sh参数: [r ...
- js中编码问题escape、encodeURI
未分类 1.js对文字进行编码涉及3个函数: escape,encodeURI,encodeURIComponent, 相应3个解码函数:unescape,decodeURI,decodeURIC ...
- PHP面试随笔
1.常见的HTTP状态码: 1xx系列:代表请求已被接受,需要继续处理 2xx系列:代表请求已成功被服务器接收.理解并接受 200:表示请求已成功,请求所希望的响应头或数据体将随此响应返回 201:表 ...
- ThreadLocal 原理解析
1.对Thread local 理解 ThreadLocal 是为了解决线程间同步而创建的一个新的思路.简单来说就是每个线程都保存一个变量副本. 如果在Thread 内部定义一个field变量,也可以 ...
- [Bayes] Why we prefer Gaussian Distribution
最后还是选取一个朴素直接的名字,在此通过手算体会高斯的便捷和神奇. Ref: The Matrix Cookbook 注意,这里的所有变量默认都为多元变量,不是向量就是矩阵.多元高斯密度函数如下: 高 ...
- docker下编译mangoszero WOW60级服务端（一）
这几天看到暴雪准备开放怀旧服的新闻,突然想到几年前用大芒果window一键服务端自己搭建过服务,就想着在Linux环境下重新编译一套,毕竟Linux作为服务端,性能和稳定性都会高一些,于是在mac虚拟 ...