지난 며칠 동안 ECharts 공식 웹사이트에서 API와 데모를 살펴보고 매우 흥미로워서 모델 예측으로 생성된 데이터를 사용하여 의사 실시간 동적 데이터 디스플레이를 만들었습니다. 이 글은 주로 HTML5+JS+JQuery+ECharts로 구현된 비동기 로딩 문제를 소개하고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
먼저 index.html 파일을 생성하고 vscode로 열어서 작성합니다.
1.
<p id="main" style="width:600px;height:400px;"></p>
태그를 삽입하고 스타일을 설정하세요. (직접 꾸미셔도 됩니다. 저는 게으릅니다!!!)
2. 본문 아래에 <script> 스크립트를 만듭니다(왜 본문 아래에 js 스크립트를 작성해야 하나요? 이는 사용자 경험을 향상시키기 위한 것이고 Baidu에 깊이 들어갈 수 있기 때문입니다~~~). </p> <p>3. 스크립트란 무엇인가요? 걱정하지 말고 천천히 시간을 가지세요~~</p> <p> (1) 먼저 echarts 개체를 만들어 MyChart라고 부르겠습니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> var myChart = echarts.init(document.getElementById('main'));</pre><div class="contentsignin">로그인 후 복사</div></div> <p> (2) 그래프를 초기화하는 setoption을 만들고 몇 가지 기본 매개변수를 입력합니다(Fly할 수 있음). 이 링크를 통해 Echarts 공식 홈페이지 참고하세요) </p> <p> (3) 초기화 후 ajax로 로컬 파일을 비동기적으로 읽을 수 있어요~~</p> <p>스택을 이해하지 못하시는 분들 (링크는 여기, 이건 제 구글입니다) 예, 차단될 수 있습니다~~) push 및 Shift 데이터 작업을 이해하지 못하는 분들 (여기 링크는 차단하면 안 됩니다~~) </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">로그인 후 복사</div></div><p> 설명하자면, 이 비동기 로딩의 원리는 다음과 같습니다. </p> <p> (1) 이제 변수 결과에 저장된 .json 파일을 로드하고 데이터 작업을 시작합니다. 먼저 스택 개념을 사용하여 그래프에 표시할 데이터의 양을 저장합니다. 1000 포인트를 데이터에 저장(이것이 큐입니다) 동적인 실시간 데이터를 구현하고 싶다면 데이터를 보면 이동합니다~~~~~ 거기에 데이터를 저장해야 하는데 이게 큐 용량이 1000인데 못넣으면 어떡하지 상관없어요 일단 나오면 충분하지 않나요? ~</p><p>(2) 하지만 하나를 가져와서 저장하는 것은 너무 번거롭습니다. 여기에 타이머 setInterval()을 설정하고 2초마다 2개를 업데이트합니다. (업데이트 방법은 data.shift()</p><p>data입니다. push()</p><p> 스택을 시뮬레이션합니다~~~~</p><p>이렇게 하면 동적 데이터를 얻을 수 있습니다~~~~</p><p>좋아, 이 정도라면 너무 낮습니다. 프레임워크 + 데이터베이스 + 프런트엔드를 구현하고 싶습니다. 움직일 실제 데이터 ~~~~~ 며칠 동안 공부 좀 할게요 ~~~~~~</p><p>알겠습니다. 더 이상 말도 안 돼요, 여기 소스 코드가 있습니다. 필요하다면 아이들의 신발을 직접 실행하여 볼 수 있습니다 움직일 수 있다면 ~~</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>
