前言
做Android開發經常會需要畫一些圖表，自己寫的話不僅麻煩而且工作量太大，所以一般都會采用第三方圖表框架，現在給大家介紹一款功能非常豐富的圖表框架 ECharts 。
准備
ECharts 是由百度開發提供的開源框架，主要提供給Web使用，所以Android中一般使用WebView加載顯示，其實本質上也就是用 WebView 加載本地 H5。
ECharts的圖表樣式主要由option控制，option是由js編寫，如下面代碼就是一個簡單折線圖的option。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
在andorid中使用ECharts,一般來講我們有兩種實現方案
- Android獲取數據並封裝好option，然后傳遞給h5，h5再對數據進行解析，調用ECharts繪制。
這種方案的難點在於option的屬性太多了，封裝起來太麻煩。 - h5處理所有操作，進行獲取數據，並調用ECharts進行繪制。
這種方案需要對js比較熟悉。
這里我們采用第一種方案，因為前人栽樹后人乘涼，已經有大神幫我們做好最困難的數據封裝工作：EChart java 對象庫
實現
配置ECharts
-
下載Echarts。你可以根據你的需求在ECharts官網下載需要的ECharts組件。我這里選擇的是完整版。
-
將下載好的
echarts.min.js文件放入工程中assets目錄下。如果沒有assets目錄，可以先在mian目錄下，通過右擊 new -> Folder -> Assets Folder 創建。
assets.png -
編寫echarts.html文件，並將echarts.html放入assets目錄。
<!DOCTYPE html> <html style="height: 100%"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="./echarts.min.js"></script> <script type="text/javascript"> var dom =document.getElementById("container"); var myChart =echarts.init(dom); var app ={}; function loadEcharts(echartJson){ var option = JSON.parse(echartJson); if (option &&typeof option ==="object") { myChart.setOption(option,true); } } </script> </body> </html> 依賴EChart java 對象庫
注意：因為該對象庫依賴Gson，所以project同樣需要添加Gson依賴
dependencies {
compile 'com.github.abel533:ECharts:3.0.0.2'
implementation 'com.google.code.gson:gson:2.8.1'
}
代碼實現
因為Echarts需要在WebView中顯示，所以我們直接自定義一個EchartView繼承自WebView用來顯示圖表。
public class EchartView extends WebView { private static final String TAG = EchartView.class.getSimpleName(); public EchartView(Context context) { this(context, null); } public EchartView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public EchartView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { WebSettings webSettings = getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setJavaScriptCanOpenWindowsAutomatically(true); webSettings.setSupportZoom(false); webSettings.setDisplayZoomControls(false); loadUrl("file:///android_asset/echarts.html"); } /**刷新圖表 * java調用js的loadEcharts方法刷新echart * 不能在第一時間就用此方法來顯示圖表，因為第一時間html的標簽還未加載完成，不能獲取到標簽值 * @param option */ public void refreshEchartsWithOption(GsonOption option) { if (option == null) { return; } String optionString = option.toString(); String call = "javascript:loadEcharts('" + optionString + "')"; loadUrl(call); } } 再定義一個工具類用來將數據封裝為option，這里只封裝了一個簡單的折線圖做例子。
更多圖表的封裝請參照EChart java 對象庫和ECharts官方例子。
public class EchartOptionUtil { public static GsonOption getLineChartOptions(Object[] xAxis, Object[] yAxis) { GsonOption option = new GsonOption(); option.title("折線圖"); option.legend("銷量"); option.tooltip().trigger(Trigger.axis); ValueAxis valueAxis = new ValueAxis(); option.yAxis(valueAxis); CategoryAxis categorxAxis = new CategoryAxis(); categorxAxis.axisLine().onZero(false); categorxAxis.boundaryGap(true); categorxAxis.data(xAxis); option.xAxis(categorxAxis); Line line = new Line(); line.smooth(false).name("銷量").data(yAxis).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)"); option.series(line); return option; } } 在Acitvity中顯示
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" tools:context="com.example.ming.echartsforandroid.MainActivity"> <com.example.ming.echartsforandroid.EchartView android:id="@+id/lineChart" android:layout_width="400dp" android:layout_height="400dp" android:layout_gravity="center"> </com.example.ming.echartsforandroid.EchartView> </LinearLayout> MainActivity .java
public class MainActivity extends AppCompatActivity { private EchartView lineChart; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lineChart = findViewById(R.id.lineChart); lineChart.setWebViewClient(new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); //最好在h5頁面加載完畢后再加載數據，防止html的標簽還未加載完成，不能正常顯示 refreshLineChart(); } }); } private void refreshLineChart(){ Object[] x = new Object[]{ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" }; Object[] y = new Object[]{ 820, 932, 901, 934, 1290, 1330, 1320 }; lineChart.refreshEchartsWithOption(EchartOptionUtil.getLineChartOptions(x, y)); } } 
Screenshot_2018-04-11-14-36-32-219_com.example.ming.echartsforandroid.png
后記
EChart java 對象庫目前只封裝了常用的十幾種圖表，所以如果需要用到更多的圖表，建議直接下載EChart java 對象庫代碼，對其進行擴充。