H5+JS+JQuery+ECharts实现异步加载

Posted on 2017-12-04 19:40 哈哈丶大傻瓜阅读(2189) 评论(1) 编辑收藏举报

这几天，看了一下ECharts官网的API和Demo发现很有意思，于是就利用模型预测产生的数据做一个伪实时的动态数据显示。

首先，创建一个index.html的文件，我用的vscode打开的，进行编写。

1.插入一个标签

设置他的一些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操作数据的（链接在此这个应该不会被墙~~）

 1 $.ajax({
 2         type:"get",
 3         // async:true,
 4         url:"test_data.json",
 5         data:{},
 6         dataType:"json",
 7         success:function(result){
 8             var datas=result
 9             if(result){
10                 
11                 var m=0;
12                 for(var i=0;i<result.length;i++){  
13                     if(m<1000){
14                         datas.shift();            
15                         date.push(result[i]["time"]);
16                         data.push(result[i]["AM23SIG0206.AV"]);
17                         m+=1;
18                     }
19                     else{             
20                         break;
21                         
22                     }
23                 myChart.hideLoading();
24                
25                 setInterval(function(){
26                     for(var n=0;n<2;n++){
27                         
28                         date.shift();
29                         date.push(datas[n]["time"]);
30                         data.shift();
31                         data.push(datas[n]["AM23SIG0206.AV"]);
32                     }                                                 
33                     myChart.setOption({
34                     xAxis:{
35                         data:date
36                     },
37                     series:[
38                         {
39                             name:"参数",
40                             data:data
41                         }
42                     ]});
43          
44                     for(var nn=0;nn<2;nn++){
45                         datas.shift()
46                         }
47                     
48                     },2000);
49 
50                 
51 
52                 }
53             }
54         },
55         error:function(errorMsg){
56             alert("图表请求数据失败！");
57             myChart.hideLoading();
58             myChart_2.hideLoading();
59         }
60     })

我来解释一下，这个异步加载的原理是这样子的：

（1）我们现在加载一个.json文件，存在一个变量result里，开始进行数据的操作，利用堆栈的概念先存一个图上要显示的数据量，假设是1000个点，存到data里(这是一个队列）你如果要实现动态的实时的数据，看着数据他会动~~~~你需要存一个数据进去，但是呢这个队列只有1000个容量，放不下怎么办，没关系啊，你先取一个出来不就行了嘛，就这样循环下去~~~~

（2）但是啊，取一个存一个太麻烦了，我们在设置一个定时器setInterval()在这个里面，每过2s更新2个点（怎么更新呢，就是data.shift()

data.push()

模拟了堆栈~~~~

这样就达到了动态数据了~~~~

好吧，如果只是这样也太low了，我要实现一个框架+数据库+前端的真正数据动起来~~~~让我在研究几天~~~~~~

好了，不废话了，下面是源码，有需要的童鞋可以自己跑一下，看看可不可以动~~~~~

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Charts</title>
  6     <script type="text/javascript" src="echarts.min.js"></script>
  7     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  8 </head>
  9 <body>
 10     <div id="main" style="width:600px;height:400px;"></div>
 11     <div id="main_2" style="width:600px;height:400px;"></div>
 12 </body>
 13 <script type="text/javascript">
 14     var myChart = echarts.init(document.getElementById('main'));
 15     var myChart_2 = echarts.init(document.getElementById('main_2'));
 16     myChart.setOption({
 17         title:{
 18             text:'异步数据加载'
 19         },
 20         tooltip:{
 21             show:true,
 22 
 23         },
 24       
 25         xAxis:{
 26             type:'category',
 27             boundaryGap:false,
 28             data:[],
 29             splitLine: {
 30             show: false
 31             },
 32         },
 33         yAxis:{
 34             boundaryGap:[0,'100%'],
 35             type:'value',
 36             min:'dataMin',
 37             max:'dataMax',
 38             splitLine: {
 39             show: false
 40             },
 41            
 42         },
 43         series:[{
 44             name:'参数',
 45             type:'line',
 46             data:[]
 47         }]
 48     });
 49     myChart_2.setOption({
 50         title:{
 51             text:'异步数据加载'
 52         },
 53         tooltip:{
 54             show:true,
 55 
 56         },
 57       
 58         xAxis:{
 59             type:'category',
 60             boundaryGap:false,
 61             data:[],
 62             splitLine: {
 63             show: false
 64             },
 65         },
 66         yAxis:{
 67             boundaryGap:[0,'100%'],
 68             type:'value',
 69             min:'dataMin',
 70             max:'dataMax',
 71             splitLine: {
 72             show: false
 73             },
 74            
 75         },
 76         series:[{
 77             name:'参数',
 78             type:'line',
 79             data:[]
 80         }]
 81     });
 82     myChart.showLoading();
 83     myChart_2.showLoading();
 84     var date = [];
 85     var data = [];
 86     $.ajax({
 87         type:"get",
 88         // async:true,
 89         url:"test_data.json",
 90         data:{},
 91         dataType:"json",
 92         success:function(result){
 93             var datas=result
 94             if(result){
 95                 
 96                 var m=0;
 97                 for(var i=0;i<result.length;i++){  
 98                     if(m<1000){
 99                         datas.shift();            
100                         date.push(result[i]["time"]);
101                         data.push(result[i]["AM23SIG0206.AV"]);
102                         m+=1;
103                     }
104                     else{             
105                         break;
106                         
107                     }
108                 myChart.hideLoading();
109                 myChart_2.hideLoading();
110                 setInterval(function(){
111                     for(var n=0;n<2;n++){
112                         
113                         date.shift();
114                         date.push(datas[n]["time"]);
115                         data.shift();
116                         data.push(datas[n]["AM23SIG0206.AV"]);
117                     }                                                 
118                     myChart.setOption({
119                     xAxis:{
120                         data:date
121                     },
122                     series:[
123                         {
124                             name:"参数",
125                             data:data
126                         }
127                     ]});
128                     myChart_2.setOption({
129                     xAxis:{
130                         data:date
131                     },
132                     series:[
133                         {
134                             name:"参数",
135                             data:data
136                         }
137                     ]});
138                     for(var nn=0;nn<2;nn++){
139                         datas.shift()
140                         }
141                     
142                     },2000);
143 
144                 
145 
146                 }
147             }
148         },
149         error:function(errorMsg){
150             alert("图表请求数据失败！");
151             myChart.hideLoading();
152             myChart_2.hideLoading();
153         }
154     })
155 </script>
156 </html>

  1 [
  2     {
  3         "AM23SIG0206.AV": "594.4071",
  4         "time": "2016-05-01 00:00:01"
  5     },
  6     {
  7         "AM23SIG0206.AV": "594.4207",
  8         "time": "2016-05-01 00:00:04"
  9     },
 10     {
 11         "AM23SIG0206.AV": "594.3883",
 12         "time": "2016-05-01 00:00:07"
 13     },
 14     {
 15         "AM23SIG0206.AV": "594.3586",
 16         "time": "2016-05-01 00:00:10"
 17     },
 18     {
 19         "AM23SIG0206.AV": "594.3883",
 20         "time": "2016-05-01 00:00:13"
 21     },
 22     {
 23         "AM23SIG0206.AV": "594.3398",
 24         "time": "2016-05-01 00:00:16"
 25     },
 26     {
 27         "AM23SIG0206.AV": "594.3398",
 28         "time": "2016-05-01 00:00:19"
 29     },
 30     {
 31         "AM23SIG0206.AV": "594.3075",
 32         "time": "2016-05-01 00:00:22"
 33     },
 34     {
 35         "AM23SIG0206.AV": "594.3076",
 36         "time": "2016-05-01 00:00:25"
 37     },
 38     {
 39         "AM23SIG0206.AV": "594.2753",
 40         "time": "2016-05-01 00:00:28"
 41     },
 42     {
 43         "AM23SIG0206.AV": "594.2753",
 44         "time": "2016-05-01 00:00:31"
 45     },
 46     {
 47         "AM23SIG0206.AV": "594.2429",
 48         "time": "2016-05-01 00:00:34"
 49     },
 50     {
 51         "AM23SIG0206.AV": "594.2753",
 52         "time": "2016-05-01 00:00:37"
 53     },
 54     {
 55         "AM23SIG0206.AV": "594.2429",
 56         "time": "2016-05-01 00:00:40"
 57     },
 58     {
 59         "AM23SIG0206.AV": "594.2565",
 60         "time": "2016-05-01 00:00:43"
 61     },
 62     {
 63         "AM23SIG0206.AV": "594.3075",
 64         "time": "2016-05-01 00:00:46"
 65     },
 66     {
 67         "AM23SIG0206.AV": "594.2726",
 68         "time": "2016-05-01 00:00:49"
 69     },
 70     {
 71         "AM23SIG0206.AV": "594.2752",
 72         "time": "2016-05-01 00:00:52"
 73     },
 74     {
 75         "AM23SIG0206.AV": "594.2914",
 76         "time": "2016-05-01 00:00:55"
 77     },
 78     {
 79         "AM23SIG0206.AV": "594.2726",
 80         "time": "2016-05-01 00:00:58"
 81     },
 82     {
 83         "AM23SIG0206.AV": "594.3075",
 84         "time": "2016-05-01 00:01:01"
 85     },
 86     {
 87         "AM23SIG0206.AV": "594.3075",
 88         "time": "2016-05-01 00:01:04"
 89     },
 90     {
 91         "AM23SIG0206.AV": "594.2752",
 92         "time": "2016-05-01 00:01:07"
 93     },
 94     {
 95         "AM23SIG0206.AV": "594.259",
 96         "time": "2016-05-01 00:01:10"
 97     },
 98     {
 99         "AM23SIG0206.AV": "594.2752",
100         "time": "2016-05-01 00:01:13"
101     },
102     {
103         "AM23SIG0206.AV": "594.2403",
104         "time": "2016-05-01 00:01:16"
105     },
106     {
107         "AM23SIG0206.AV": "594.2402",
108         "time": "2016-05-01 00:01:19"
109     },
110     {
111         "AM23SIG0206.AV": "594.1918",
112         "time": "2016-05-01 00:01:22"
113     },
114     {
115         "AM23SIG0206.AV": "594.2241",
116         "time": "2016-05-01 00:01:25"
117     },
118     {
119         "AM23SIG0206.AV": "594.1918",
120         "time": "2016-05-01 00:01:28"
121     },
122     {
123         "AM23SIG0206.AV": "594.1595",
124         "time": "2016-05-01 00:01:31"
125     },
126     {
127         "AM23SIG0206.AV": "594.0975",
128         "time": "2016-05-01 00:01:34"
129     },
130     {
131         "AM23SIG0206.AV": "594.1272",
132         "time": "2016-05-01 00:01:37"
133     },
134     {
135         "AM23SIG0206.AV": "594.111",
136         "time": "2016-05-01 00:01:40"
137     },
138     {
139         "AM23SIG0206.AV": "594.1136",
140         "time": "2016-05-01 00:01:43"
141     },
142     {
143         "AM23SIG0206.AV": "594.0787",
144         "time": "2016-05-01 00:01:46"
145     },
146     {
147         "AM23SIG0206.AV": "594.0813",
148         "time": "2016-05-01 00:01:49"
149     },
150     {
151         "AM23SIG0206.AV": "594.0464",
152         "time": "2016-05-01 00:01:52"
153     },
154     {
155         "AM23SIG0206.AV": "594.014",
156         "time": "2016-05-01 00:01:55"
157     },
158     {
159         "AM23SIG0206.AV": "594.014",
160         "time": "2016-05-01 00:01:58"
161     },
162     {
163         "AM23SIG0206.AV": "594.0328",
164         "time": "2016-05-01 00:02:01"
165     },
166     {
167         "AM23SIG0206.AV": "594.049",
168         "time": "2016-05-01 00:02:04"
169     },
170     {
171         "AM23SIG0206.AV": "594.0464",
172         "time": "2016-05-01 00:02:07"
173     },
174     {
175         "AM23SIG0206.AV": "594.0464",
176         "time": "2016-05-01 00:02:10"
177     },
178     {
179         "AM23SIG0206.AV": "594.0464",
180         "time": "2016-05-01 00:02:13"
181     },
182     {
183         "AM23SIG0206.AV": "594.0787",
184         "time": "2016-05-01 00:02:16"
185     },
186     {
187         "AM23SIG0206.AV": "594.049",
188         "time": "2016-05-01 00:02:19"
189     },
190     {
191         "AM23SIG0206.AV": "594.0625",
192         "time": "2016-05-01 00:02:22"
193     },
194     {
195         "AM23SIG0206.AV": "594.0948",
196         "time": "2016-05-01 00:02:25"
197     },
198     {
199         "AM23SIG0206.AV": "594.0774",
200         "time": "2016-05-01 00:02:28"
201     },
202     {
203         "AM23SIG0206.AV": "594.0464",
204         "time": "2016-05-01 00:02:31"
205     },
206     {
207         "AM23SIG0206.AV": "594.0948",
208         "time": "2016-05-01 00:02:34"
209     },
210     {
211         "AM23SIG0206.AV": "594.0625",
212         "time": "2016-05-01 00:02:37"
213     },
214     {
215         "AM23SIG0206.AV": "594.0625",
216         "time": "2016-05-01 00:02:40"
217     },
218     {
219         "AM23SIG0206.AV": "594.0625",
220         "time": "2016-05-01 00:02:43"
221     },
222     {
223         "AM23SIG0206.AV": "594.0787",
224         "time": "2016-05-01 00:02:46"
225     },
226     {
227         "AM23SIG0206.AV": "594.045",
228         "time": "2016-05-01 00:02:49"
229     },
230     {
231         "AM23SIG0206.AV": "594.0127",
232         "time": "2016-05-01 00:02:52"
233     },
234     {
235         "AM23SIG0206.AV": "594.0464",
236         "time": "2016-05-01 00:02:55"
237     },
238     {
239         "AM23SIG0206.AV": "594.014",
240         "time": "2016-05-01 00:02:58"
241     },
242     {
243         "AM23SIG0206.AV": "594.0464",
244         "time": "2016-05-01 00:03:01"
245     },
246     {
247         "AM23SIG0206.AV": "593.9818",
248         "time": "2016-05-01 00:03:04"
249     },
250     {
251         "AM23SIG0206.AV": "593.9495",
252         "time": "2016-05-01 00:03:07"
253     },
254     {
255         "AM23SIG0206.AV": "593.9481",
256         "time": "2016-05-01 00:03:10"
257     },
258     {
259         "AM23SIG0206.AV": "593.8997",
260         "time": "2016-05-01 00:03:13"
261     },
262     {
263         "AM23SIG0206.AV": "593.8997",
264         "time": "2016-05-01 00:03:16"
265     },
266     {
267         "AM23SIG0206.AV": "593.8673",
268         "time": "2016-05-01 00:03:19"
269     },
270     {
271         "AM23SIG0206.AV": "593.835",
272         "time": "2016-05-01 00:03:22"
273     },
274     {
275         "AM23SIG0206.AV": "593.8027",
276         "time": "2016-05-01 00:03:25"
277     },
278     {
279         "AM23SIG0206.AV": "593.7704",
280         "time": "2016-05-01 00:03:28"
281     },
282     {
283         "AM23SIG0206.AV": "593.7704",
284         "time": "2016-05-01 00:03:31"
285     },
286     {
287         "AM23SIG0206.AV": "593.7193",
288         "time": "2016-05-01 00:03:34"
289     },
290     {
291         "AM23SIG0206.AV": "593.7193",
292         "time": "2016-05-01 00:03:37"
293     },
294     {
295         "AM23SIG0206.AV": "593.6735",
296         "time": "2016-05-01 00:03:40"
297     },
298     {
299         "AM23SIG0206.AV": "593.625",
300         "time": "2016-05-01 00:03:43"
301     },
302     {
303         "AM23SIG0206.AV": "593.6062",
304         "time": "2016-05-01 00:03:46"
305     },
306     {
307         "AM23SIG0206.AV": "593.6062",
308         "time": "2016-05-01 00:03:49"
309     },
310     {
311         "AM23SIG0206.AV": "593.5442",
312         "time": "2016-05-01 00:03:52"
313     },
314     {
315         "AM23SIG0206.AV": "593.528",
316         "time": "2016-05-01 00:03:55"
317     },
318     {
319         "AM23SIG0206.AV": "593.4931",
320         "time": "2016-05-01 00:03:58"
321     },
322     {
323         "AM23SIG0206.AV": "593.4931",
324         "time": "2016-05-01 00:04:01"
325     },
326     {
327         "AM23SIG0206.AV": "593.4446",
328         "time": "2016-05-01 00:04:04"
329     },
330     {
331         "AM23SIG0206.AV": "593.4285",
332         "time": "2016-05-01 00:04:07"
333     },
334     {
335         "AM23SIG0206.AV": "593.3962",
336         "time": "2016-05-01 00:04:10"
337     },
338     {
339         "AM23SIG0206.AV": "593.38",
340         "time": "2016-05-01 00:04:13"
341     },
342     {
343         "AM23SIG0206.AV": "593.3774",
344         "time": "2016-05-01 00:04:16"
345     },
346     {
347         "AM23SIG0206.AV": "593.38",
348         "time": "2016-05-01 00:04:19"
349     },
350     {
351         "AM23SIG0206.AV": "593.3154",
352         "time": "2016-05-01 00:04:22"
353     },
354     {
355         "AM23SIG0206.AV": "593.3477",
356         "time": "2016-05-01 00:04:25"
357     },
358     {
359         "AM23SIG0206.AV": "593.3477",
360         "time": "2016-05-01 00:04:28"
361     },
362     {
363         "AM23SIG0206.AV": "593.3451",
364         "time": "2016-05-01 00:04:31"
365     },
366     {
367         "AM23SIG0206.AV": "593.3451",
368         "time": "2016-05-01 00:04:34"
369     },
370     {
371         "AM23SIG0206.AV": "593.3451",
372         "time": "2016-05-01 00:04:37"
373     },
374     {
375         "AM23SIG0206.AV": "593.3425",
376         "time": "2016-05-01 00:04:40"
377     },
378     {
379         "AM23SIG0206.AV": "593.4097",
380         "time": "2016-05-01 00:04:43"
381     },
382     {
383         "AM23SIG0206.AV": "593.4097",
384         "time": "2016-05-01 00:04:46"
385     },
386     {
387         "AM23SIG0206.AV": "593.4581",
388         "time": "2016-05-01 00:04:49"
389     },
390     {
391         "AM23SIG0206.AV": "593.4608",
392         "time": "2016-05-01 00:04:52"
393     },
394     {
395         "AM23SIG0206.AV": "593.5228",
396         "time": "2016-05-01 00:04:55"
397     },
398     {
399         "AM23SIG0206.AV": "593.5066",
400         "time": "2016-05-01 00:04:58"
401     },
402     {
403         "AM23SIG0206.AV": "593.5739",
404         "time": "2016-05-01 00:05:01"
405     },
406     {
407         "AM23SIG0206.AV": "593.6035",
408         "time": "2016-05-01 00:05:04"
409     },
410     {
411         "AM23SIG0206.AV": "593.6036",
412         "time": "2016-05-01 00:05:07"
413     },
414     {
415         "AM23SIG0206.AV": "593.6359",
416         "time": "2016-05-01 00:05:10"
417     },
418     {
419         "AM23SIG0206.AV": "593.6843",
420         "time": "2016-05-01 00:05:13"
421     },
422     {
423         "AM23SIG0206.AV": "593.7141",
424         "time": "2016-05-01 00:05:16"
425     },
426     {
427         "AM23SIG0206.AV": "593.7463",
428         "time": "2016-05-01 00:05:19"
429     },
430     {
431         "AM23SIG0206.AV": "593.749",
432         "time": "2016-05-01 00:05:22"
433     },
434     {
435         "AM23SIG0206.AV": "593.7787",
436         "time": "2016-05-01 00:05:25"
437     },
438     {
439         "AM23SIG0206.AV": "593.7974",
440         "time": "2016-05-01 00:05:28"
441     },
442     {
443         "AM23SIG0206.AV": "593.8297",
444         "time": "2016-05-01 00:05:31"
445     },
446     {
447         "AM23SIG0206.AV": "593.8782",
448         "time": "2016-05-01 00:05:34"
449     },
450     {
451         "AM23SIG0206.AV": "593.9241",
452         "time": "2016-05-01 00:05:37"
453     },
454     {
455         "AM23SIG0206.AV": "593.9105",
456         "time": "2016-05-01 00:05:40"
457     },
458     {
459         "AM23SIG0206.AV": "593.9752",
460         "time": "2016-05-01 00:05:43"
461     },
462     {
463         "AM23SIG0206.AV": "593.9887",
464         "time": "2016-05-01 00:05:46"
465     },
466     {
467         "AM23SIG0206.AV": "594.0049",
468         "time": "2016-05-01 00:05:49"
469     },
470     {
471         "AM23SIG0206.AV": "594.0049",
472         "time": "2016-05-01 00:05:52"
473     },
474     {
475         "AM23SIG0206.AV": "594.021",
476         "time": "2016-05-01 00:05:55"
477     },
478     {
479         "AM23SIG0206.AV": "594.0372",
480         "time": "2016-05-01 00:05:58"
481     },
482     {
483         "AM23SIG0206.AV": "594.021",
484         "time": "2016-05-01 00:06:01"
485     },
486     {
487         "AM23SIG0206.AV": "594.0695",
488         "time": "2016-05-01 00:06:04"
489     },
490     {
491         "AM23SIG0206.AV": "594.0856",
492         "time": "2016-05-01 00:06:07"
493     },
494     {
495         "AM23SIG0206.AV": "594.0857",
496         "time": "2016-05-01 00:06:10"
497     },
498     {
499         "AM23SIG0206.AV": "594.0857",
500         "time": "2016-05-01 00:06:13"
501     },
502     {
503         "AM23SIG0206.AV": "594.1476",
504         "time": "2016-05-01 00:06:16"
505     },
506     {
507         "AM23SIG0206.AV": "594.0830000000001",
508         "time": "2016-05-01 00:06:19"
509     },
510     {
511         "AM23SIG0206.AV": "594.1154",
512         "time": "2016-05-01 00:06:22"
513     },
514     {
515         "AM23SIG0206.AV": "594.1179",
516         "time": "2016-05-01 00:06:25"
517     },
518     {
519         "AM23SIG0206.AV": "594.1179",
520         "time": "2016-05-01 00:06:28"
521     },
522     {
523         "AM23SIG0206.AV": "594.0830000000001",
524         "time": "2016-05-01 00:06:31"
525     },
526     {
527         "AM23SIG0206.AV": "594.0830000000001",
528         "time": "2016-05-01 00:06:34"
529     },
530     {
531         "AM23SIG0206.AV": "594.0507",
532         "time": "2016-05-01 00:06:37"
533     },
534     {
535         "AM23SIG0206.AV": "594.0830000000001",
536         "time": "2016-05-01 00:06:40"
537     },
538     {
539         "AM23SIG0206.AV": "594.0830000000001",
540         "time": "2016-05-01 00:06:43"
541     },
542     {
543         "AM23SIG0206.AV": "594.0507",
544         "time": "2016-05-01 00:06:46"
545     },
546     {
547         "AM23SIG0206.AV": "594.0345",
548         "time": "2016-05-01 00:06:49"
549     },
550     {
551         "AM23SIG0206.AV": "594.0022",
552         "time": "2016-05-01 00:06:52"
553     },
554     {
555         "AM23SIG0206.AV": "593.9861",
556         "time": "2016-05-01 00:06:55"
557     },
558     {
559         "AM23SIG0206.AV": "593.9699",
560         "time": "2016-05-01 00:06:58"
561     },
562     {
563         "AM23SIG0206.AV": "593.9363",
564         "time": "2016-05-01 00:07:01"
565     },
566     {
567         "AM23SIG0206.AV": "593.9039",
568         "time": "2016-05-01 00:07:04"
569     },
570     {
571         "AM23SIG0206.AV": "593.8568",
572         "time": "2016-05-01 00:07:07"
573     },
574     {
575         "AM23SIG0206.AV": "593.8555",
576         "time": "2016-05-01 00:07:10"
577     },
578     {
579         "AM23SIG0206.AV": "593.8568",
580         "time": "2016-05-01 00:07:13"
581     },
582     {
583         "AM23SIG0206.AV": "593.8232",
584         "time": "2016-05-01 00:07:16"
585     },
586     {
587         "AM23SIG0206.AV": "593.776",
588         "time": "2016-05-01 00:07:19"
589     },
590     {
591         "AM23SIG0206.AV": "593.7747",
592         "time": "2016-05-01 00:07:22"
593     },
594     {
595         "AM23SIG0206.AV": "593.7263",
596         "time": "2016-05-01 00:07:25"
597     },
598     {
599         "AM23SIG0206.AV": "593.7424",
600         "time": "2016-05-01 00:07:28"
601     },
602     {
603         "AM23SIG0206.AV": "593.6778",
604         "time": "2016-05-01 00:07:31"
605     },
606     {
607         "AM23SIG0206.AV": "593.6616",
608         "time": "2016-05-01 00:07:34"
609     },
610     {
611         "AM23SIG0206.AV": "593.6589",
612         "time": "2016-05-01 00:07:37"
613     },
614     {
615         "AM23SIG0206.AV": "593.6293",
616         "time": "2016-05-01 00:07:40"
617     },
618     {
619         "AM23SIG0206.AV": "593.5944",
620         "time": "2016-05-01 00:07:43"
621     },
622     {
623         "AM23SIG0206.AV": "593.6267",
624         "time": "2016-05-01 00:07:46"
625     },
626     {
627         "AM23SIG0206.AV": "593.5944",
628         "time": "2016-05-01 00:07:49"
629     },
630     {
631         "AM23SIG0206.AV": "593.5944",
632         "time": "2016-05-01 00:07:52"
633     },
634     {
635         "AM23SIG0206.AV": "593.5944",
636         "time": "2016-05-01 00:07:55"
637     },
638     {
639         "AM23SIG0206.AV": "593.5782",
640         "time": "2016-05-01 00:07:58"
641     },
642     {
643         "AM23SIG0206.AV": "593.5647",
644         "time": "2016-05-01 00:08:01"
645     },
646     {
647         "AM23SIG0206.AV": "593.562",
648         "time": "2016-05-01 00:08:04"
649     },
650     {
651         "AM23SIG0206.AV": "593.5782",
652         "time": "2016-05-01 00:08:07"
653     },
654     {
655         "AM23SIG0206.AV": "593.5298",
656         "time": "2016-05-01 00:08:10"
657     },
658     {
659         "AM23SIG0206.AV": "593.5944",
660         "time": "2016-05-01 00:08:13"
661     },
662     {
663         "AM23SIG0206.AV": "593.5621",
664         "time": "2016-05-01 00:08:16"
665     },
666     {
667         "AM23SIG0206.AV": "593.5621",
668         "time": "2016-05-01 00:08:19"
669     },
670     {
671         "AM23SIG0206.AV": "593.5944",
672         "time": "2016-05-01 00:08:22"
673     },
674     {
675         "AM23SIG0206.AV": "593.5944",
676         "time": "2016-05-01 00:08:25"
677     },
678     {
679         "AM23SIG0206.AV": "593.5917",
680         "time": "2016-05-01 00:08:28"
681     },
682     {
683         "AM23SIG0206.AV": "593.659",
684         "time": "2016-05-01 00:08:31"
685     },
686     {
687         "AM23SIG0206.AV": "593.6887",
688         "time": "2016-05-01 00:08:34"
689     },
690     {
691         "AM23SIG0206.AV": "593.6564",
692         "time": "2016-05-01 00:08:37"
693     },
694     {
695         "AM23SIG0206.AV": "593.6402",
696         "time": "2016-05-01 00:08:40"
697     },
698     {
699         "AM23SIG0206.AV": "593.6752",
700         "time": "2016-05-01 00:08:43"
701     },
702     {
703         "AM23SIG0206.AV": "593.6725",
704         "time": "2016-05-01 00:08:46"
705     },
706     {
707         "AM23SIG0206.AV": "593.6725",
708         "time": "2016-05-01 00:08:49"
709     },
710     {
711         "AM23SIG0206.AV": "593.6725",
712         "time": "2016-05-01 00:08:52"
713     },
714     {
715         "AM23SIG0206.AV": "593.7022",
716         "time": "2016-05-01 00:08:55"
717     },
718     {
719         "AM23SIG0206.AV": "593.6699",
720         "time": "2016-05-01 00:08:58"
721     },
722     {
723         "AM23SIG0206.AV": "593.6402",
724         "time": "2016-05-01 00:09:01"
725     },
726     {
727         "AM23SIG0206.AV": "593.6699",
728         "time": "2016-05-01 00:09:04"
729     },
730     {
731         "AM23SIG0206.AV": "593.6564",
732         "time": "2016-05-01 00:09:07"
733     },
734     {
735         "AM23SIG0206.AV": "593.6537",
736         "time": "2016-05-01 00:09:10"
737     },
738     {
739         "AM23SIG0206.AV": "593.5917",
740         "time": "2016-05-01 00:09:13"
741     },
742     {
743         "AM23SIG0206.AV": "593.5568",
744         "time": "2016-05-01 00:09:16"
745     },
746     {
747         "AM23SIG0206.AV": "593.573",
748         "time": "2016-05-01 00:09:19"
749     },
750     {
751         "AM23SIG0206.AV": "593.5083",
752         "time": "2016-05-01 00:09:22"
753     },
754     {
755         "AM23SIG0206.AV": "593.4922",
756         "time": "2016-05-01 00:09:25"
757     },
758     {
759         "AM23SIG0206.AV": "593.4786",
760         "time": "2016-05-01 00:09:28"
761     },
762     {
763         "AM23SIG0206.AV": "593.4463",
764         "time": "2016-05-01 00:09:31"
765     },
766     {
767         "AM23SIG0206.AV": "593.4114",
768         "time": "2016-05-01 00:09:34"
769     },
770     {
771         "AM23SIG0206.AV": "593.3953",
772         "time": "2016-05-01 00:09:37"
773     },
774     {
775         "AM23SIG0206.AV": "593.3791",
776         "time": "2016-05-01 00:09:40"
777     },
778     {
779         "AM23SIG0206.AV": "593.3306",
780         "time": "2016-05-01 00:09:43"
781     },
782     {
783         "AM23SIG0206.AV": "593.3009",
784         "time": "2016-05-01 00:09:46"
785     },
786     {
787         "AM23SIG0206.AV": "593.2983",
788         "time": "2016-05-01 00:09:49"
789     },
790     {
791         "AM23SIG0206.AV": "593.266",
792         "time": "2016-05-01 00:09:52"
793     },
794     {
795         "AM23SIG0206.AV": "593.2499",
796         "time": "2016-05-01 00:09:55"
797     },
798     {
799         "AM23SIG0206.AV": "593.3145",
800         "time": "2016-05-01 00:09:58"
801     },
802     {
803         "AM23SIG0206.AV": "593.2821",
804         "time": "2016-05-01 00:10:01"
805     },
806     {
807         "AM23SIG0206.AV": "593.266",
808         "time": "2016-05-01 00:10:04"
809     },
810     {
811         "AM23SIG0206.AV": "593.2485",
812         "time": "2016-05-01 00:10:07"
813     },
814     {
815         "AM23SIG0206.AV": "593.2809",
816         "time": "2016-05-01 00:10:10"
817     },
818     {
819         "AM23SIG0206.AV": "593.2485",
820         "time": "2016-05-01 00:10:13"
821     },
822     {
823         "AM23SIG0206.AV": "593.2809",
824         "time": "2016-05-01 00:10:16"
825     },
826     {
827         "AM23SIG0206.AV": "593.2809",
828         "time": "2016-05-01 00:10:19"
829     },
830     {
831         "AM23SIG0206.AV": "593.2809",
832         "time": "2016-05-01 00:10:22"
833     },
834     {
835         "AM23SIG0206.AV": "593.297",
836         "time": "2016-05-01 00:10:25"
837     },
838     {
839         "AM23SIG0206.AV": "593.2646",
840         "time": "2016-05-01 00:10:28"
841     },
842     {
843         "AM23SIG0206.AV": "593.297",
844         "time": "2016-05-01 00:10:31"
845     },
846     {
847         "AM23SIG0206.AV": "593.297",
848         "time": "2016-05-01 00:10:34"
849     },
850     {
851         "AM23SIG0206.AV": "593.3293",
852         "time": "2016-05-01 00:10:37"
853     },
854     {
855         "AM23SIG0206.AV": "593.3131",
856         "time": "2016-05-01 00:10:40"
857     },
858     {
859         "AM23SIG0206.AV": "593.3293",
860         "time": "2016-05-01 00:10:43"
861     },
862     {
863         "AM23SIG0206.AV": "593.3293",
864         "time": "2016-05-01 00:10:46"
865     }
866 ]

View Code

这个是.json文件（python的大数据模型预测产生的数据我拿来用一哈）

如果我写的东西对你有帮助，请点个赞呗，关注走一个呗~~~~

刷新页面返回顶部

哈哈丶Stupid

公告

H5+JS+JQuery+ECharts实现异步加载