Maison >interface Web >js tutoriel >Chargement asynchrone HTML5, JS, JQuery, ECharts
Chargement asynchrone HTML5, JS, JQuery, ECharts
- 小云云original
- 2017-12-18 09:11:111911parcourir
Ces derniers jours, j'ai jeté un œil à l'API et à la démo sur le site officiel d'ECharts et je l'ai trouvé très intéressant, j'ai donc utilisé les données générées par la prédiction du modèle pour créer un affichage de données dynamique en pseudo-temps réel . Cet article présente principalement le problème du chargement asynchrone implémenté par HTML5+JS+JQuery+ECharts. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
Tout d'abord, créez un fichier index.html, je l'ouvre avec vscode et je l'écris.
1. Insérez une balise
<p id="main" style="width:600px;height:400px;"></p>
pour définir certains de ses styles (vous pouvez l'embellir vous-même, je suis paresseux !!!).
2. Créez un script <script> sous le corps (Pourquoi écrire un script js sous le corps ? Parce que c'est pour améliorer l'expérience utilisateur et que vous pouvez approfondir Baidu~~~). </p> <p>3. Quel est le scénario ? Ne vous inquiétez pas, prenez votre temps ~~</p> <p> (1) Tout d'abord, construisons un objet echarts, appelons-le MyChart </p> <pre class="brush:php;toolbar:false"> var myChart = echarts.init(document.getElementById('main'));</pre> <p> (2) Construisons une setoption. Pour initialiser le graphique, remplissez quelques paramètres de base (vous pouvez accéder au site officiel d'Echarts via ce lien pour référence de configuration) </p> <p> (3) Après l'initialisation, nous pouvons lire de manière asynchrone les fichiers locaux ~~~~</p> <p>Ceux qui ne comprennent pas le stack (le lien ici vient de mon Google, il peut être bloqué~~) et ceux qui ne comprennent pas le push and shift pour faire fonctionner les données (le lien ici ne doit pas être bloqué~ ~)</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>Je m'explique, le principe de ce chargement asynchrone est le suivant : </p><p> (1) On charge maintenant un fichier .json, on le stocke dans un résultat variable, et commencez à exploiter les données, utilisez le concept de pile pour stocker d'abord la quantité de données à afficher sur un graphique, en supposant qu'elle soit de 1000 points, et stockez-la dans les données (c'est une file d'attente si vous souhaitez obtenir une réalité dynamique). les données temporelles, elles bougeront lorsque vous regardez les données ~~ ~~ Vous devez enregistrer une donnée, mais cette file d'attente n'a qu'une capacité de 1 000. Et si vous ne pouvez pas l'insérer ? . Retirez-en un d'abord, et le cycle continuera comme ça ~~~~</p><p>( 2) Mais, il est trop difficile d'en prendre un et d'en enregistrer un. Nous définissons une minuterie setInterval() dans ce cas. pour mettre à jour 2 points toutes les 2 secondes (comment mettre à jour, c'est data.shift()</p><p> data.push()</p><p> simule la pile~~~~</p><p>In de cette façon, les données dynamiques sont obtenues ~~~~</p><p>Eh bien, si c'est juste comme ça, c'est trop faible Maintenant, je veux implémenter un framework + base de données + données réelles frontales pour déplacer ~. ~~~Laissez-moi étudier quelques jours~~~~~~</p><p>D'accord, plus de bêtises, voici le code source, il y a Vous pouvez exécuter les chaussures pour enfants dont vous avez besoin et voir si elles peuvent être déplacé~~~~~</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>