Home > Article > Web Front-end > HTML5, JS, JQuery, ECharts asynchronous loading
HTML5, JS, JQuery, ECharts asynchronous loading
- 小云云Original
- 2017-12-18 09:11:111816browse
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:"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> <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>