这几天，看了一下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个容量，放不下怎么办，没关系啊，你先取一个出来不就行了嘛，就这样循环下去~~~~