HTML5+JS+JQuery+ECharts实现异步加载问题
前端之家收集整理的这篇文章主要介绍了
HTML5+JS+JQuery+ECharts实现异步加载问题，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
这几天，看了一下ECharts官网的API和Demo发现很有意思，于是就利用模型预测产生的数据做一个伪实时的动态数据显示 。
首先，创建一个index.html的文件，我用的vscode打开的，进行编写。
1.插入一个标签
设置他的一些style（可自行美化，我很懒！！！）。
2.在body下建一个
403","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实现异步加载问题，希望对大家有所帮助，如果大家有任何问题欢迎给我留言，小编会及时回复大家的！
