关于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里面的值,可不传入数据。

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

你可能感兴趣的:(关于Android使用Echarts画图表的那些事)