Dieser Artikel stellt hauptsächlich das asynchrone Ladeproblem von HTML5+JS+JQuery+ECharts vor. Freunde, die es brauchen, können darauf verweisen
In den letzten Tagen habe ich mir die offizielle API und Demo von ECharts angesehen Website und fanden es sehr interessant. Daher verwenden wir die durch die Modellvorhersage generierten Daten, um eine dynamische Datenanzeige in Pseudo-Echtzeit zu erstellen.
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) Lassen Sie uns zunächst ein Echarts-Objekt erstellen, nennen wir es 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">Nach dem Login kopieren</div></div><p> (2) Erstellen Sie eine Setoption. Dies ist das Initialisierungsdiagramm Ja, 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><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">Nach dem Login kopieren</div></div> <p>Lassen Sie mich erklären, das Prinzip dieses asynchronen Ladens ist wie folgt: </p><p> (1) Wir laden jetzt eine .json-Datei, die in einem variablen Ergebnis gespeichert ist, und beginnen mit der Arbeit Die Daten mithilfe des Stapels. Das Konzept besteht darin, zunächst die in einem Diagramm anzuzeigende Datenmenge zu speichern, vorausgesetzt, es sind 1000 Punkte, und sie in Daten zu speichern (dies ist eine Warteschlange, wenn Sie dynamische Echtzeit erreichen möchten). Daten werden verschoben, wenn Sie sich die Daten ansehen. Sie müssen ein Datenelement speichern, aber die Warteschlange hat nur eine Kapazität von 1.000. Es spielt keine Rolle Sie können einfach zuerst einen herausnehmen, und der Zyklus wird so weitergehen~~~~</p><p> (2) Aber ah, es ist zu mühsam, einen zu nehmen und einen zu speichern. Wir stellen einen Timer setInterval() ein Damit werden alle 2 Sekunden 2 Punkte aktualisiert (wie man aktualisiert, ist data.shift()</p><p>data.push( )</p><p>Simuliert den Stapel~~~~</p><p> Auf diese Weise werden dynamische Daten erreicht~~~~</p><p>Okay, wenn es einfach so ist, ist es zu niedrig, ich möchte Realisieren Sie ein Framework + eine Datenbank + ein Front-End, um echte Daten zu verschieben~~~ ~Lass mich ein paar Tage lernen~~~~~~</p><p>Okay, kein Unsinn mehr, hier ist der Quellcode. Wenn du ihn brauchst, kannst du ihn selbst ausführen und sehen, ob er sich bewegen lässt~~ ~~~</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>
