这几天，看了一下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="/UploadFiles/2021-04-02/echarts.min.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" }, { "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的大数据模型预测产生的数据我拿来用一哈）
总结
以上所述是小编给大家介绍的HTML5+JS+JQuery+ECharts实现异步加载问题，希望对大家有所帮助，如果大家有任何问题欢迎给我留言，小编会及时回复大家的！