0、前言

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

1、如何使用Echarts

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 echarts.js -->
   <script type="text/javascript" src="./echarts.min.js"></script>
<script type="text/javascript">
    <!-- 先给echarts显示的图表占个位置 -->
<div id="container" style="width: 100%;height: 100%;"></div>

</head>
<body> 
</body>
</html>

而echarts的使用也很简单，首先是初始化echarts和option：

    <!-- 上文定义的存放echarts的div -->
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;

接下来遵循echarts的语法编写好options：

<!--这里引用官方的例子-->
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

然后在调用echarts的setOption方法即可：

<!--注意以下代码在script里面-->
if (option &&typeof option ==="object") {
       myChart.setOption(option,true);
 }

关于option的写法和例子，见官方例子有很多例子，本文重点讲如何在Android中使用ehcarts

2、Android调用echarts

如上文所述，echarts是JavaScript编写的可视化库，因此使用echarts主要是在htlm文件中使用，然后通过html实现跨平台，在Android平台通过webview控件加载即可展示。

2.1 htlm加载echarts

还是上文的例子，为了演示，此处先给出完整代码：

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-simple
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="width: 100%;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 = {};
var option;

window.onresize=myChart.resize;


function loadEcharts(dataArray){
                var array = JSON.parse(dataArray);
                <!--这里引用官方的例子-->
                option = {
                  xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [
                    {
                      data: [150, 230, 224, 218, 135, 147, 260],
                      type: 'line'
                    }
                  ]
                };
                if (option &&typeof option ==="object") {
                    myChart.setOption(option,true);
                }
            }
        </script>
</body>
</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)