Heim > Artikel > Web-Frontend > Asynchrones Laden von HTML5, JS, JQuery, ECharts
Asynchrones Laden von HTML5, JS, JQuery, ECharts
- 小云云Original
- 2017-12-18 09:11:111866Durchsuche
In den letzten Tagen habe ich mir die API und die Demo auf der offiziellen Website von ECharts angesehen und fand sie sehr interessant. Daher habe ich die durch die Modellvorhersage generierten Daten verwendet, um eine dynamische Datenanzeige in Pseudo-Echtzeit zu erstellen . Dieser Artikel stellt hauptsächlich das Problem des asynchronen Ladens vor, das durch HTML5+JS+JQuery+ECarts implementiert wird. Freunde in Not können sich darauf beziehen.
Zuerst erstelle ich eine index.html-Datei. Ich öffne sie mit vscode und schreibe sie.
1. Fügen Sie einen Tag
<p id="main" style="width:600px;height:400px;"></p>
ein, um einige seiner Stile festzulegen (Sie können es selbst verschönern, ich bin faul!!!).
2. Erstellen Sie ein <script>-Skript unter dem Textkörper (Warum ein JS-Skript unter dem Textkörper schreiben? Weil dies die Benutzererfahrung verbessern soll und Sie tief in Baidu eintauchen können). </p> <p>3. Was ist das Skript? Keine Sorge, nehmen Sie sich Zeit~~</p> <p> (1) Erstellen wir zunächst ein Echarts-Objekt, nennen wir es MyChart </p> <pre class="brush:php;toolbar:false"> var myChart = echarts.init(document.getElementById('main'));</pre> <p> (2) Erstellen Sie eine Setoption Um das Diagramm zu initialisieren, geben Sie einige grundlegende Parameter ein (Sie können über diesen Link zur offiziellen Website von Echarts fliegen, um eine Konfigurationsreferenz zu erhalten) </p> <p> (3) Nach der Initialisierung können wir lokale Dateien asynchron mit Ajax lesen~~~~</p> <p>Diejenigen, die den Stapel nicht verstehen (der Link hier ist von meinem Google, er kann blockiert sein ~~) und diejenigen, die Push und Shift nicht verstehen, um Daten zu betreiben (der Link hier sollte nicht blockiert sein ~). ~)</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>Lassen Sie mich erklären, das Prinzip dieses asynchronen Ladens ist wie folgt: </p><p> (1) Wir laden jetzt eine .json-Datei, speichern sie in einem variablen Ergebnis und Beginnen Sie mit der Datenverarbeitung, verwenden Sie das Konzept des Stapels, um zunächst die in einem Diagramm anzuzeigende Datenmenge zu speichern, vorausgesetzt, es sind 1000 Punkte, und speichern Sie sie in Daten (dies ist eine Warteschlange, wenn Sie eine dynamische Realität erreichen möchten). Zeitdaten werden verschoben, wenn Sie sich die Daten ansehen. ~~ ~~ Sie müssen ein Datenelement speichern, aber diese Warteschlange hat nur eine Kapazität von 1.000. Was ist, wenn Sie es nicht einfügen können? . Nehmen Sie einfach zuerst einen heraus und der Zyklus wird so fortgesetzt~~~~</p><p>( 2) Es ist jedoch zu mühsam, einen zu nehmen und einen zu speichern. Wir stellen hier einen Timer setInterval() ein um alle 2 Sekunden 2 Punkte zu aktualisieren (wie man aktualisiert, ist es data.shift()</p><p> data.push()</p><p> simuliert den Stapel~~~~</p><p>In Auf diese Weise werden dynamische Daten erreicht~~~~</p><p>Nun, wenn es einfach so ist, ist es zu niedrig. Jetzt möchte ich ein Framework + eine Datenbank + echte Front-End-Daten zum Verschieben implementieren~ ~~~Lass mich ein paar Tage lernen~~~~~~</p><p>Okay, kein Unsinn mehr, hier ist der Quellcode, da ist Sie können die Kinderschuhe laufen lassen, die Sie brauchen, und sehen, ob sie es können verschoben~~~~~</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>