How to implement asynchronous loading in HTML5+JS+JQuery+ECharts
This article mainly introduces the asynchronous loading problem of HTML5 JS JQuery ECharts. Friends who need it can refer to it
In the past few days, I looked at the API and Demo of ECharts official website and found it very interesting, so I used The data generated by the model prediction is displayed as a pseudo-real-time dynamic data.
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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> var myChart = echarts.init(document.getElementById(&#39;main&#39;));</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 fit 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 the movement of real data in the front end of a framework database~~~~Let me study for a few days~~~~~~</p><p>Okay, no more nonsense, here is the source code, if you need it, you can run it yourself Give it a try and see if you can move~~~~~</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>