echarts方式實現android圖表展示
阿新 • • 發佈：2019-02-14
採用webview載入js的方式，雖然理論上會比較耗費資源
ECharts下載地址：ECharts
以下是一個簡單的例子：
佈局檔案：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.hzbst.echartst.MainActivity" > <LinearLayout android:id="@+id/bt_ly" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" > <Button android:id="@+id/linechart_bt" style="?android:attr/buttonStyleSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="折線圖" /> <Button android:id="@+id/barchart_bt" style="?android:attr/buttonStyleSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="柱狀圖" /> <Button android:id="@+id/piechart_bt" style="?android:attr/buttonStyleSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="餅狀圖" /> </LinearLayout> <WebView android:id="@+id/chartshow_wb" android:layout_below="@id/bt_ly" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
對應的Activity如下，核心程式碼就是呼叫asset中的js檔案。然後再呼叫的javascript函式。
package com.hzbst.echartst; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Button; public class MainActivity extends Activity implements OnClickListener{ private Button linechart_bt; private Button barchart_bt; private Button piechart_bt; private WebView chartshow_wb; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } /** * 初始化頁面元素 */ private void initView(){ linechart_bt=(Button)findViewById(R.id.linechart_bt); barchart_bt=(Button)findViewById(R.id.barchart_bt); piechart_bt=(Button)findViewById(R.id.piechart_bt); linechart_bt.setOnClickListener(this); barchart_bt.setOnClickListener(this); piechart_bt.setOnClickListener(this); chartshow_wb=(WebView)findViewById(R.id.chartshow_wb); //進行webwiev的一堆設定 //開啟本地檔案讀取（預設為true，不設定也可以） chartshow_wb.getSettings().setAllowFileAccess(true); //開啟指令碼支援 chartshow_wb.getSettings().setJavaScriptEnabled(true); chartshow_wb.loadUrl("file:///android_asset/echart/myechart.html"); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.linechart_bt: chartshow_wb.loadUrl("javascript:createChart('line',[89,78,77]);"); break; case R.id.barchart_bt: chartshow_wb.loadUrl("javascript:createChart('bar',[89,78,77]);"); break; case R.id.piechart_bt: chartshow_wb.loadUrl("javascript:createChart('pie',[89,78,77]);"); break; default: break; } } }
對應的html頁面程式碼：
<script type="text/javascript"> //初始化路徑 var myChart; require.config({ paths: { echarts: './js' } }); // 通用屬性定義 var options = { title : { text : "Echart測試" }, tooltip : { show : false }, toolbox : { show : false }, }; //建立折線圖 function createLineChart(dataArray){ options = { xAxis : [ { type : 'category', boundaryGap : false, data : ['第一種','第二種','第三種'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'成交', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:dataArray } ] }; } //建立柱狀圖 function createBarChart(dataArray){ options = { xAxis : [ { type : 'category', data : ['第一種','第二種','第三種'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'成交', type:'bar', data:dataArray } ] }; } //建立餅狀圖 function createPieChart(dataArray){ options = { series : [ { type:'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:234, name:'聯盟廣告'}, {value:135, name:'視訊廣告'}, {value:1548, name:'搜尋引擎'} ] } ] }; } function createChart(chartKind,dataArray){ if (chartKind=='line') { doCreatChart(createLineChart(dataArray)); }; if (chartKind=='bar') { doCreatChart(createBarChart(dataArray)); }; if (chartKind=='pie') { doCreatChart(createPieChart(dataArray)); }; } function doCreatChart(specificChartFunction){ require( ['echarts','echarts/theme/macarons','echarts/chart/line', 'echarts/chart/bar','echarts/chart/pie' ], function(ec,theme){ myChart =ec.init(document.getElementById('main'),theme); myChart.showLoading({ text : "圖表資料正在努力載入..." }); specificChartFunction; myChart.setOption(options); //先把可選項注入myChart中 myChart.hideLoading(); } ); } //createChart('line',[89,78,77]); //createChart('bar',[89,78,77]); //createChart('pie',[89,78,77]); </script>