HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問題
更新時(shí)間：2017年12月16日 16:35:01 作者：哈哈丶大傻瓜
這篇文章主要介紹了HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問題,需要的朋友可以參考下
這幾天，看了一下ECharts官網(wǎng)的API和Demo發(fā)現(xiàn)很有意思，于是就利用模型預(yù)測(cè)產(chǎn)生的數(shù)據(jù)做一個(gè)偽實(shí)時(shí)的動(dòng)態(tài)數(shù)據(jù)顯示 。
首先，創(chuàng)建一個(gè)index.html的文件，我用的vscode打開的，進(jìn)行編寫。
1.插入一個(gè)標(biāo)簽
<div id="main" style="width:600px;height:400px;"></div>
設(shè)置他的一些style（可自行美化，我很懶?。。。?/p>
2.在body下建一個(gè)<script>腳本（為什么要在body下寫js腳本呢？因?yàn)檫@是提高用戶體驗(yàn)，可自行百度深層次的原因~~~）。
3.腳本寫啥呢？別急，慢慢來啊~~
（1）首先，我們來建一個(gè)echarts的對(duì)象，就叫他MyChart吧
var myChart = echarts.init(document.getElementById('main'));
（2）建一個(gè)setoption這是初始化圖的，填一些基本參數(shù)（可通過此鏈接飛到Echarts官網(wǎng)的配置參考一下）
（3）初始化了之后，我們就可以ajax異步讀取本地文件了~~~~
其中不懂堆棧的（鏈接在此這個(gè)是我Google的，有可能被墻~~）不懂push，shift操作數(shù)據(jù)的（鏈接在此這個(gè)應(yīng)該不會(huì)被墻~~）
$.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:"參數(shù)",
data:data
}
]});
for(var nn=0;nn<2;nn++){
datas.shift()
}
},2000);
}
}
},
error:function(errorMsg){
alert("圖表請(qǐng)求數(shù)據(jù)失敗！");
myChart.hideLoading();
myChart_2.hideLoading();
}
})
我來解釋一下，這個(gè)異步加載的原理是這樣子的：
（1）我們現(xiàn)在加載一個(gè).json文件，存在一個(gè)變量result里，開始進(jìn)行數(shù)據(jù)的操作，利用堆棧的概念先存一個(gè)圖上要顯示的數(shù)據(jù)量，假設(shè)是1000個(gè)點(diǎn)，存到data里(這是一個(gè)隊(duì)列）你如果要實(shí)現(xiàn)動(dòng)態(tài)的實(shí)時(shí)的數(shù)據(jù)，看著數(shù)據(jù)他會(huì)動(dòng)~~~~你需要存一個(gè)數(shù)據(jù)進(jìn)去，但是呢這個(gè)隊(duì)列只有1000個(gè)容量，放不下怎么辦，沒關(guān)系啊，你先取一個(gè)出來不就行了嘛，就這樣循環(huán)下去~~~~
（2）但是啊，取一個(gè)存一個(gè)太麻煩了，我們?cè)谠O(shè)置一個(gè)定時(shí)器setInterval()在這個(gè)里面，每過2s更新2個(gè)點(diǎn)（怎么更新呢，就是data.shift()
data.push()
模擬了堆棧~~~~
這樣就達(dá)到了動(dòng)態(tài)數(shù)據(jù)了~~~~
好吧，如果只是這樣也太low了，我要實(shí)現(xiàn)一個(gè)框架+數(shù)據(jù)庫+前端的真正數(shù)據(jù)動(dòng)起來~~~~讓我在研究幾天~~~~~~
好了，不廢話了，下面是源碼，有需要的童鞋可以自己跑一下，看看可不可以動(dòng)~~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<div id="main_2" style="width:600px;height:400px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var myChart_2 = echarts.init(document.getElementById('main_2'));
myChart.setOption({
title:{
text:'異步數(shù)據(jù)加載'
},
tooltip:{
show:true,
},
xAxis:{
type:'category',
boundaryGap:false,
data:[],
splitLine: {
show: false
},
},
yAxis:{
boundaryGap:[0,'100%'],
type:'value',
min:'dataMin',
max:'dataMax',
splitLine: {
show: false
},
},
series:[{
name:'參數(shù)',
type:'line',
data:[]
}]
});
myChart_2.setOption({
title:{
text:'異步數(shù)據(jù)加載'
},
tooltip:{
show:true,
},
xAxis:{
type:'category',
boundaryGap:false,
data:[],
splitLine: {
show: false
},
},
yAxis:{
boundaryGap:[0,'100%'],
type:'value',
min:'dataMin',
max:'dataMax',
splitLine: {
show: false
},
},
series:[{
name:'參數(shù)',
type:'line',
data:[]
}]
});
myChart.showLoading();
myChart_2.showLoading();
var date = [];
var data = [];
$.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();
myChart_2.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:"參數(shù)",
data:data
}
]});
myChart_2.setOption({
xAxis:{
data:date
},
series:[
{
name:"參數(shù)",
data:data
}
]});
for(var nn=0;nn<2;nn++){
datas.shift()
}
},2000);
}
}
},
error:function(errorMsg){
alert("圖表請(qǐng)求數(shù)據(jù)失??！");
myChart.hideLoading();
myChart_2.hideLoading();
}
})
</script>
</html>
[
{
"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"
}
]
這個(gè)是.json文件（python的大數(shù)據(jù)模型預(yù)測(cè)產(chǎn)生的數(shù)據(jù)我拿來用一哈）
總結(jié)
以上所述是小編給大家介紹的HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問題，希望對(duì)大家有所幫助，如果大家有任何問題歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
您可能感興趣的文章:
- vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能
- 詳解vue文件中使用echarts.js的兩種方式
- echarts同一頁面中四個(gè)圖表切換的js數(shù)據(jù)交互方法示例
- 利用ECharts.js畫K線圖的方法示例
- vue.js如何將echarts封裝為組件一鍵使用詳解
- vue.js+Echarts開發(fā)圖表放大縮小功能實(shí)例
- jsp利用echarts實(shí)現(xiàn)報(bào)表統(tǒng)計(jì)的實(shí)例
- jsp使用ECharts動(dòng)態(tài)在地圖上標(biāo)識(shí)點(diǎn)
- Echarts.js無法引入問題解決方案
相關(guān)文章
小程序scroll-view安卓機(jī)隱藏橫向滾動(dòng)條的實(shí)現(xiàn)詳解
這篇文章主要介紹了小程序scroll-view安卓機(jī)隱藏橫向滾動(dòng)條的實(shí)現(xiàn)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家介紹了使用tree?shaking?移除無用代碼示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
javascript中加var和不加var的區(qū)別 你真的懂嗎
var 語句用于聲明變量，本文給大家介紹javascript 中加’var‘和不加'var'的區(qū)別，涉及到j(luò)avascript var相關(guān)知識(shí)，對(duì)javascript var相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
理解與使用JavaScript中的回調(diào)函數(shù)
這篇文章主要介紹了JavaScript中的回調(diào)函數(shù)，想詳細(xì)了解回調(diào)函數(shù)的同學(xué)，一定要看一下2021-04-04
本篇文章主要介紹了談?wù)劦谌紸pp接入微信登錄 解讀 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧。2016-12-12
這篇文章主要介紹了JS如何判斷對(duì)象是否包含某個(gè)屬性,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
基于js實(shí)現(xiàn)的限制文本框只可以輸入數(shù)字
本文主要介紹了js限制文本框只可以輸入數(shù)字的實(shí)例代碼，可復(fù)制直接調(diào)用函數(shù)實(shí)現(xiàn)其功能。需要的朋友可以看下2016-12-12
這篇文章主要為大家分享了最全面詳細(xì)的微信JS接口大全，希望對(duì)大家有幫助，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JavaScript中時(shí)間日期函數(shù)new?Date()詳解(5種獲取時(shí)間戳的函數(shù))
這篇文章主要給大家介紹了關(guān)于JavaScript中時(shí)間日期函數(shù)new?Date()的相關(guān)資料,主要講的是JS中5種獲取時(shí)間戳的函數(shù),new Date()是JavaScript中用于獲取當(dāng)前日期和時(shí)間的內(nèi)置函數(shù),需要的朋友可以參考下2024-04-04