关于Android使用Echarts画图表的那些事

0、前言

ECharts 是一个使用 JavaScript 实现的开源可视化库，且兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，当然也支持在Android中的显示，主要是通过WebView来加载，可随时随地任性展示，支持多种图标样式的展示。
本文主要从echarts的使用以及在Android中的使用来讲解echarts。

1、如何使用Echarts

首先是下载echarts
如上所述，下载后的文件为echarts.min.js，是一个JavaScript文件，如何在html导入该文件，例如：

这里，在htlm文档中通过JavaScript定义了一个function loadEcharts(dataArray)方法，为Android加载htlm时提供了一个数据传入接口，其中dataArray可以为任何数据，一般使用json格式的数据，以便实现传入多数据，然后在通过JSON解析取出数据：

 var array = JSON.parse(dataArray);
 var xData=array.data;
 var sData=array.series;

2.2 webview加载htlm

首先，在上文写好html文件后，放入assets包里面（配置asset

的方法请自行百度），以供加载，本项目用到的html文件如下所示：

image.png

接着，自定义一个webview

package echarts_view;

import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebSettings;
import android.webkit.WebView;

import comment.LogUit;

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);
    }

    //配置webview，设定加载的url文件路劲
    public void init(String url) {
        WebSettings webSettings = getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setSupportZoom(false);
        webSettings.setDisplayZoomControls(false);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        loadUrl(url);
    }

    /**刷新图表
     */
     public void refreshEchartsWithOption(Object value) {
        LogUit.INSTANCE.printE("TablePrint","init-refresh value="+value);
         String call = "javascript:loadEcharts('" + value+ "')";
        loadUrl(call);
    }
}

以上文的例子为例，在本地写好这个html文件后，通过这个自定义webview的init方法，传入路劲（比如file:///android_asset/normal_heart.html），然后根据需要配置好webview，即可使用webview加载装载echarts的html页面。
之后通过refreshEchartsWithOption方法，传入value(即options中动态变化的值），即可刷新并加载图表。
注意：refreshEchartsWithOption方法须在html的标签加载完成之后调用,即在WebViewClient的onPageFinished方法中调用：

 private val client: WebViewClient?=object : WebViewClient() {
        override fun onPageFinished(view: WebView, url: String) {
            super.onPageFinished(view, url)
            refreshLineChart(value)
        }
    }

此处给出在fragment里面调用的例子：

 override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.day_blood_page_fg, container, false)
        echar_day = view.findViewById(R.id.echar_day)
        echar_day!!.webViewClient =client
        echar_day!!.init(url)
        return view
    }
......
//传入value的值，刷新图表
echar_day!!.refreshEchartsWithOption(value)

3、小结

至此，Android使用echarts的方法介绍结束，主要可分为以下几步：

1. 创建html文件，导入echarts.min.js库
2. html中构造options，提供接口供Android端传入动态变化的值
3. 自定义webview，加载html页面，传入动态变化的值刷新图表

当然，如果不需要动态改变options里面的值，可不传入数据。

原创文章，转载请附上原文链接