HTML5, JS, JQuery, ECharts asynchronous loading-JS Tutorial-php.cn

HTML5, JS, JQuery, ECharts asynchronous loading

小云云

Release： 2017-12-18 09:11:11

Original

1867 people have browsed it

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>

Copy after login

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> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> var myChart = echarts.init(document.getElementById('main'));</pre><div class="contentsignin">Copy after login</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$.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(); } })</pre><div class="contentsignin">Copy after login</div></div> <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><div class="code" style="position:relative; padding:0px; margin:0px;"><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>

Copy after login

[ { "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)

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!