玩转表格：在android上使用ECharts

作者：ming 4月 28 2018

支持原创，转载请注明出处

前言

做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 创建。

编写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依赖
1
2
3
4
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 对象库代码，对其进行扩充。