百度ECharts---android線上展示統計圖表(折線圖\柱狀圖\餅狀圖)
阿新 • • 發佈：2019-01-06
做金融型別的應用經常會用到資料的統計報表 諸如折線圖 , K線圖, 餅狀圖,柱狀圖 既能形象的表述資料的分佈 , 同時又增加了資料的可讀性
實現思路: 百度Echarts支援安卓移動端的運用 , WebView載入html, 巢狀JavaScript程式碼 , 即可動態實現線上圖表的展示功能..
下面展示下今天要實現的效果
進入Echarts官網下載頁 可以選擇自己需要的圖表型別 自定義下載js檔案 , 精簡版,常用版, 完整版 根據需求自定義下載
- 匯入剛下載的圖表構建工具 echarts.min.js 到安卓專案的 資產目錄(assets)下 這裡我使用的 完整版
- 建立 Htm l檔案 , 即要展示的網頁 , 檔名自定義 這裡我是 myechart.html
- 我的assets目錄結構如下:
- 接下來就是html檔案的程式碼了 首先我們為ECharts準備一個具備大小(寬高) 的 DOM 並取別名
<div id="main" style="float: left; width: 600px;height:500px; margin-top: 20px"></div> - 匯入圖表構建工具
<script src="js/echarts.min.js"></script> - 因為我這裡要展示多種型別的圖表 所以定義了幾個方法 下面以折線圖為例
var lineJson;//用於臨時儲存折線圖json物件, 便於追加資料 //建立折線圖 function createLineChart(obj){ lineJson=obj; options = { title : { //text: '脈搏值(次/min)', text: obj.title, subtext: 'make by sxt', x:'left' }, tooltip: { trigger: 'axis', formatter: "脈搏頻率 : <br/>{b} - {c} 次/min" }, xAxis: { id: 'dataX', type: 'category', splitLine:{ show:true }, axisLabel: { //formatter: '{value} °C' formatter: '{value}' }, data: obj.times //動態展示運動時間 }, yAxis: { type: 'value', axisLine: {onZero: true}, splitLine:{ show:true }, axisLabel: { //formatter: '{value} km' formatter: '{value}' }, min:0, max:150//在此設定範圍 }, dataZoom: [ { id:'dataZoom', show:false, type: 'inside',//inside 為拖動效果 //type: 'slider',//slider為手動更新效果 realtime: true, filterMode: 'filter', start: 20, end: 85, xAxisIndex: 0 } ], series: [{ id: 'dataY', name: '脈搏頻率(次)/(s)', type: 'line', smooth: true, data: obj.steps, //動態展示運動步數資料 lineStyle: { normal: { width: 3, shadowColor: 'rgba(0,0,0,0.4)', shadowBlur: 10, shadowOffsetY: 10 } }, markPoint : {//標註點 data : [//這種方式內部自動計算最值 { type :'max' , name:'最大值' , symbol:'image://' + treeUrl, symbolSize: [30, 30] }, { type : 'min', name: '最小值', symbol:'image://' + childUrl, symbolSize: [30, 30] } ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }] }; } //更新折線圖的縮放起始位置 function updateZoomState(start,end){ myChart.setOption({ dataZoom: [{ id: 'dataZoom', start: start, end: end }] }); } //獲取陣列最小值 function getMinValue(obj){ var min = obj.steps[0]; for (var i = 1; i < obj.steps.length; i++){ if (obj.steps[i] < min){ min = obj.steps[i]; } } return min; } //獲取陣列最大值 function getMaxValue(obj){ var max = obj.steps[0]; for (var i = 1; i < obj.steps.length; i++){ if (obj.steps[i] > max) { max = obj.steps[i]; } } return max; } //更新折線圖資料 繼續在後面追加資料 function updateDataXY(dataX,dataY){ myChart.setOption({ xAxis: { id: 'dataX', data:lineJson.times.concat(dataX) }, series:[{ id: 'dataY', data:lineJson.steps.concat(dataY) }], dataZoom: [{ id: 'dataZoom', start: 60, end: 100 }] }); }
- 展示圖表
//顯示圖表 function createChart(type,json){ if(type=='line'){ createLineChart(json); } if(type=='bar'){ createBarChart(json); } if(type=='pie'){ createPieChart(json); } if(type=='more'){ createMoreChart() } // 基於準備好的dom，初始化echarts例項 myChart = echarts.init(document.getElementById('main')); //使用指定的配置項和資料顯示圖表。 myChart.setOption(options); }
- html 檔案已寫好 到了安卓中呼叫的時候了
//進行webwiev的一堆設定 chartshowWb.getSettings().setAllowFileAccess(true); chartshowWb.getSettings().setJavaScriptEnabled(true); chartshowWb.loadUrl("file:///android_asset/echart/myechart.html"); chartshowWb.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return super.shouldOverrideUrlLoading(view, url); } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); dialog.show(); } @Override public void onPageFinished(WebView view, String url) { //最好在這裡呼叫js程式碼 以免網頁未載入完成 chartshowWb.loadUrl("javascript:createChart('line'," + EchartsDataBean.getInstance().getEchartsLineJson() + ");"); findViewById(R.id.rl_bottom).setVisibility(View.VISIBLE); if (dialog.isShowing()) { dialog.dismiss(); } } });
-
點選按鈕載入不同的 圖表 -
@Override public void onClick(View view) { switch (view.getId()) { case R.id.linechart_bt: chartshowWb.loadUrl("javascript:createChart('line'," + EchartsDataBean.getInstance().getEchartsLineJson() + ");"); findViewById(R.id.rl_bottom).setVisibility(View.VISIBLE); break; case R.id.barchart_bt: chartshowWb.loadUrl("javascript:createChart('bar'," + EchartsDataBean.getInstance().getEchartsBarJson() + ");"); findViewById(R.id.rl_bottom).setVisibility(View.GONE); break; case R.id.piechart_bt: chartshowWb.loadUrl("javascript:createChart('pie'," + EchartsDataBean.getInstance().getEchartsPieJson() + ");"); findViewById(R.id.rl_bottom).setVisibility(View.GONE); break; case R.id.morechart_bt://createMapChart chartshowWb.loadUrl("javascript:createChart('more'," + EchartsDataBean.getInstance().getEchartsLineJson() + ");"); findViewById(R.id.rl_bottom).setVisibility(View.GONE); break; case R.id.iv_left: dealwithLeft(); break; case R.id.iv_right: dealwithRight(); break; default: chartshowWb.loadUrl("javascript:updateDataXY(" + newDataX + "," + newDataY + ");"); findViewById(R.id.rl_bottom).setVisibility(View.VISIBLE); break; } }
-
至此 通過百度Echarts線上展示統計圖表 已完成 關於動態展示資料 我們可以將要展示的資料封裝成物件 , -
通過Gson將集合轉換成Json資料 作為引數傳入即可 , 有問題請留言...