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ù)測產(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的對象，就叫他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("圖表請求數(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è)太麻煩了，我們在設(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("圖表請求數(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ù)測產(chǎn)生的數(shù)據(jù)我拿來用一哈）
總結(jié)
以上所述是小編給大家介紹的HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問題，希望對大家有所幫助，如果大家有任何問題歡迎給我留言，小編會(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)識點(diǎn)
- Echarts.js無法引入問題解決方案
相關(guān)文章
這篇文章主要介紹了詳解微信小程序中的頁面代碼中的模板的封裝的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
終于解決了IE8不支持?jǐn)?shù)組的indexOf方法
今天，測試報(bào)過來一個(gè)js bug, 在IE8下有個(gè)js錯(cuò)誤，但是在其它瀏覽器下(Firefox, Chrome, IE9)下面都很正常。后來調(diào)試發(fā)現(xiàn)原因是在IE8下，js數(shù)組沒有indexOf方法。2013-04-04
幾個(gè)javascript操作word的參考代碼，對于具體的調(diào)用代碼，大家可以參考我們的上一篇文章。2009-10-10
javascript變量作用域使用中常見錯(cuò)誤總結(jié)
剛看了一篇文章對js作用域的理解又會(huì)上升到一個(gè)新的臺階，javascript里變量作用域是個(gè)經(jīng)常讓人頭痛抓狂的問題,接下來對經(jīng)常遇到又容易出錯(cuò)的情況進(jìn)行了簡單總結(jié)，感興趣的各位可以參考下哈2013-03-03
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)蒙版彈出窗功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之wxs使用教程的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
js實(shí)現(xiàn)移動(dòng)端圖片滑塊驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端圖片滑塊驗(yàn)證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript強(qiáng)制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換操作示例
這篇文章主要介紹了JavaScript強(qiáng)制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了javascript字符串、數(shù)字等顯示類型轉(zhuǎn)換,以及運(yùn)算、判斷等情況下的隱式類型轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
Webpack 本身功能比較少,只能處理 js 資源,一旦遇到 css 等其他資源就會(huì)報(bào)錯(cuò),本文給大家講解Webpack介紹和基本使用指南,感興趣的朋友一起看看吧2024-02-02
如何才能學(xué)好JS？在這里給大家總結(jié)一些學(xué)習(xí)Js的經(jīng)驗(yàn)，希望能對你們有所幫助。2021-05-05