最近一直比較頭疼,如何實現realtime圖。總結一下須要解決如下問題:javascript
1.如何傳輸自定義數據php
2.數據要以什麼格式傳輸html
3.是否可以進行局部刷新,也就是ajax請求或者其餘方式java
4.同一頁面上是否可以異步刷新不一樣的div,若是div多的話,會不會很慢jquery
5.實現realtime圖的機制是什麼,是否能夠自定製web
一直研究的echarts前不久剛更新adddata的實時數據接口。因此本身單獨抽出來作了個實驗。源代碼以下:ajax
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mix 2 個圖表的效果</title> <script src="js/esl.js"></script> <script src="js/jquery-1.7.1.js"></script> <script type="text/javascript"> /** 實驗 2個動態圖展現,變化方式不一樣 */ require.config({ packages:[ { name:'echarts', location:'echarts-master/src', main:'echarts' }, { name:'zrender', location:'zrender-master/src', main:'zrender' } ] }); var option1 = { title : { text: '上季度溫度變化', subtext: '純屬虛構' }, tooltip : { trigger: 'axis' }, legend: { data:['平均氣溫'] }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : (function(){ var res = []; var len = 100; while (len--) { res.push(len + 1); } return res; })() } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' }, splitArea : {show : true} } ], series : [ { name:'平均氣溫', type:'line', smooth:false, itemStyle: { normal: { color:'#00fa9a', areaStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:dataXRand() } ] }; var option2 = { title : { text: '本季度溫度變化化', subtext: '純屬虛構' }, tooltip : { trigger: 'axis' }, legend: { data:['最高氣溫'] }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : (function(){ var res = []; var len = 100; while (len--) { res.push(len + 1); } return res; })() } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' }, splitArea : {show : true} } ], series : [ { name:'最高氣溫', type:'line', smooth:false, itemStyle: { normal: { areaStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:dataXRand() } ] }; var myChart1; var myChart2; require( [ 'echarts', 'echarts/chart/line' ], function(ec){ myChart1=ec.init(document.getElementById('main1')); myChart1.setOption(option1); var timeTicket1; clearInterval(timeTicket1); timeTicket1 = setInterval(function(){ RandANum1(ec); }, 300); myChart2=ec.init(document.getElementById('main2')); myChart2.setOption(option2); var timeTicket2; clearInterval(timeTicket2); timeTicket2 = setInterval(function(){ RandANum2(ec); }, 100); } ) function RandANum1(ec){ $.ajax({ url:"./control/AjaxService.php?method=RandANum", dataType:"text", success:function(data) { Rdata=eval(data); myChart1.addData([ [ 0, // 系列索引 Rdata, // 新增數據 false, // 新增數據是否從隊列頭部插入 false, // 是否增長隊列長度,false則自定刪除原有數據,隊頭插入刪隊尾,隊尾插入刪隊頭 // axisData // 座標軸標籤 ] ]); } }); } function RandANum2(ec){ $.ajax({ url:"./control/AjaxService.php?method=RandANum2", dataType:"text", success:function(data) { Rdata=eval(data); myChart2.addData([ [ 0, // 系列索引 Rdata, // 新增數據 false, // 新增數據是否從隊列頭部插入 false, // 是否增長隊列長度,false則自定刪除原有數據,隊頭插入刪隊尾,隊尾插入刪隊頭 // axisData // 座標軸標籤 ] ]); } }); } function dataXRand(){ var dataarr=new Array(); $.ajax({ url:"./control/AjaxService.php?method=RandTest", dataType:"text", success:function(data) { var ss=eval(data); for(var i=0;i<ss.length;i++) { dataarr.push(ss[i]); //alert(dataarr[i]); } } }); return dataarr; } </script> </head> <body> <div id="main1" style="height:220px; border:1px solid #ccc; padding:10px;"></div> <div id="main2" style="height:220px; border:1px solid #ccc; padding:10px;"></div> </body> </html>
針對上述5個問題的回答以下:數據庫
數據能夠存在數據庫或者在線,as you like,能夠經過AJAX或者jquery庫等得到JSON數據而後轉成數組,傳輸給echarts。通常最經常使用的是json格式。無論是ajax、jsonp甚至websocket均可以做爲獲取數據的方式,這是數據層面的事情不會附加到圖表中,你固然能夠經過ajax獲取數據後展示,咱們的實際應用中基本都是ajax數據~圖表提供了loading方法用於獲取數據時做爲過渡顯示~json
實時圖數據通常不會從數據庫裏面讀取,因此用php作了一個隨機數的生成函數。代碼很簡單不解釋。效果圖以下:數組
下面的文章會貼上實現的具體代碼。