HTML5+JS+JQuery+ECharts实现异步加载问题

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

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

1.插入一个标签

rush:js;">

设置他的一些style（可自行美化，我很懒！！！）。

2.在body下建一个

rush:js;"> [ { "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" },"time": "2016-05-01 00:00:13" },{ "AM23SIG0206.AV": "594.3398","time": "2016-05-01 00:00:16" },"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" },"time": "2016-05-01 00:00:31" },{ "AM23SIG0206.AV": "594.2429","time": "2016-05-01 00:00:34" },"time": "2016-05-01 00:00:37" },"time": "2016-05-01 00:00:40" },{ "AM23SIG0206.AV": "594.2565","time": "2016-05-01 00:00:43" },"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" },"time": "2016-05-01 00:00:58" },"time": "2016-05-01 00:01:01" },"time": "2016-05-01 00:01:04" },"time": "2016-05-01 00:01:07" },{ "AM23SIG0206.AV": "594.259","time": "2016-05-01 00:01:10" },"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" },"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" },"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" },"time": "2016-05-01 00:02:07" },"time": "2016-05-01 00:02:10" },"time": "2016-05-01 00:02:13" },"time": "2016-05-01 00:02:16" },"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" },"time": "2016-05-01 00:02:31" },"time": "2016-05-01 00:02:34" },"time": "2016-05-01 00:02:37" },"time": "2016-05-01 00:02:40" },"time": "2016-05-01 00:02:43" },"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" },"time": "2016-05-01 00:02:55" },"time": "2016-05-01 00:02:58" },"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" },"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" },"time": "2016-05-01 00:03:31" },{ "AM23SIG0206.AV": "593.7193","time": "2016-05-01 00:03:34" },"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" },"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" },"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" },"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" },"time": "2016-05-01 00:04:28" },{ "AM23SIG0206.AV": "593.3451","time": "2016-05-01 00:04:31" },"time": "2016-05-01 00:04:34" },"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" },"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" },"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" },"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" },"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" },"time": "2016-05-01 00:06:28" },"time": "2016-05-01 00:06:31" },"time": "2016-05-01 00:06:34" },{ "AM23SIG0206.AV": "594.0507","time": "2016-05-01 00:06:37" },"time": "2016-05-01 00:06:40" },"time": "2016-05-01 00:06:43" },"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" },"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" },"time": "2016-05-01 00:07:49" },"time": "2016-05-01 00:07:52" },"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" },"time": "2016-05-01 00:08:07" },{ "AM23SIG0206.AV": "593.5298","time": "2016-05-01 00:08:10" },"time": "2016-05-01 00:08:13" },{ "AM23SIG0206.AV": "593.5621","time": "2016-05-01 00:08:16" },"time": "2016-05-01 00:08:19" },"time": "2016-05-01 00:08:22" },"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" },"time": "2016-05-01 00:08:49" },"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" },"time": "2016-05-01 00:09:01" },"time": "2016-05-01 00:09:04" },"time": "2016-05-01 00:09:07" },{ "AM23SIG0206.AV": "593.6537","time": "2016-05-01 00:09:10" },"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" },"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" },"time": "2016-05-01 00:10:13" },"time": "2016-05-01 00:10:16" },"time": "2016-05-01 00:10:19" },"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" },"time": "2016-05-01 00:10:31" },"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" },"time": "2016-05-01 00:10:43" },"time": "2016-05-01 00:10:46" } ]

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

总结

以上所述是小编给大家介绍的HTML5+JS+JQuery+ECharts实现异步加载问题，希望对大家有所帮助，如果大家有任何问题欢迎给我留言，小编会及时回复大家的！