Home >Web Front-end >JS Tutorial >HTML5, JS, JQuery, ECharts asynchronous loading

HTML5, JS, JQuery, ECharts asynchronous loading

小云云
小云云Original
2017-12-18 09:11:111911browse

In the past few days, I took a look at the API and Demo of ECharts official website and found it very interesting, so I used the data generated by the model prediction to create a pseudo-real-time dynamic data display. This article mainly introduces the problem of asynchronous loading implemented by HTML5+JS+JQuery+ECharts. Friends in need can refer to it. I hope it can help everyone.

First, create an index.html file. I open it with vscode and write it.

1. Insert a tag

<p id="main" style="width:600px;height:400px;"></p>

to set some of his styles (you can beautify it yourself, I am lazy!!!).

2. Create a <script> script under the body (Why write a js script under the body? Because this is to improve the user experience and you can go deep into Baidu~~~). </p> <p>3. What to write in the script? Don’t worry, take your time~~</p> <p> (1) First, let’s build an echarts object, let’s call it MyChart </p> <pre class="brush:php;toolbar:false"> var myChart = echarts.init(document.getElementById('main'));</pre> <p> (2) Create a setoption. This is the initialization diagram Yes, fill in some basic parameters (you can fly to the Echarts official website through this link for configuration reference) </p> <p> (3) After initialization, we can read local files asynchronously with ajax~~~~</p> <p> Among them, those who don’t understand the stack (the link here is from my Google, it may be blocked~~) and those who don’t understand push and shift to operate data (the link here should not be blocked~~) </p> <pre class="brush:php;toolbar:false">$.ajax({     type:&quot;get&quot;,     // async:true,     url:&quot;test_data.json&quot;,     data:{},     dataType:&quot;json&quot;,     success:function(result){       var datas=result       if(result){         var m=0;         for(var i=0;i&lt;result.length;i++){ if(m&lt;1000){ datas.shift(); date.push(result[i][&quot;time&quot;]); data.push(result[i][&quot;AM23SIG0206.AV&quot;]); m+=1; } else{ break; } myChart.hideLoading(); setInterval(function(){ for(var n=0;n&lt;2;n++){ date.shift(); date.push(datas[n][&quot;time&quot;]); data.shift(); data.push(datas[n][&quot;AM23SIG0206.AV&quot;]); } myChart.setOption({ xAxis:{ data:date }, series:[ { name:&quot;参数&quot;, data:data } ]}); for(var nn=0;nn&lt;2;nn++){ datas.shift() } },2000); } } }, error:function(errorMsg){ alert(&quot;图表请求数据失败!&quot;); myChart.hideLoading(); myChart_2.hideLoading(); } })</pre> <p> Let me explain, the principle of this asynchronous loading is like this: </p><p> (1) We now load a .json file, which is stored in a variable result, and start to operate the data, using the stack The concept is to first store the amount of data to be displayed on a graph, assuming it is 1000 points, and store it in data (this is a queue). If you want to achieve dynamic real-time data, it will move when you look at the data~~~~You need Save a piece of data, but the queue only has a capacity of 1,000. What if you can’t put it in? It doesn’t matter. You can just take one out first, and the cycle will continue like this~~~~</p><p>(2) But ah , it is too troublesome to take one and save one. We are setting a timer setInterval() in this to update 2 points every 2 seconds (how to update, it is data.shift()</p><p>data.push( )</p><p>Simulating the stack~~~~</p><p>This way we can achieve dynamic data~~~~</p><p>Okay, if it’s just like this, it’s too low, I want Realize a framework + database + front-end real data to move~~~~Let me study for a few days~~~~~~</p><p>Okay, no more nonsense, the source code is below, if you need it, you can Run it yourself and see if you can move it~~~~~</p><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Charts</title>   <script type="text/javascript" src="echarts.min.js"></script>      <p id="main" style="width:600px;height:400px;"></p>   

[
  {
    "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"
  }
]

This is a .json file (I will use the data generated by python’s big data model prediction)

Related Recommended:

JS asynchronous loading method

Introduction to file synchronization and asynchronous loading methods in JavaScript

php asynchronous data loading process sharing

The above is the detailed content of HTML5, JS, JQuery, ECharts asynchronous loading. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn