一、webview简介
WebView是android中一个非常实用的组件，它和safai、chrome一样都是基于webkit网页渲染引擎，可以通过加载html数据的方式便捷地展现软件界面，WebView主要负责解析、渲染。webview的常见工具类和用法如下：
二、客户端与前端交互的方法
1、java调用js ：WebView 的loadUrl(url)方法
先在js中定义要被调用方法：
```javascript
function initChartView() {}
```
在安卓中的类EChartWebView注册js方法：
```java
fun initChartView(){
Log.i("initChartView():",""+loadUrl("javascript:initChartView()"))
}
```
2、js调用java
javascriptInterface、webViewClient.shouldOverrideUrlLoading()、webChromeClient.onconsoleMessage()、webChromeClient.onJspompt()
具体使用在后面叙述
三、应用 —— Echarts图表的嵌入
（参考： isea533的ECharts-Java使用Java快速开发ECharts图表 和 _frendy的轻松实现 Android 图表 • ECharts）
由于eacharts 里各种图表的属性和数据等都是由 option ，使用 WebView 加载H5网页有两种思路：
1）由 Android 获取数据并生成 option，而 H5 则负责解析 option 并调用 ECharts 进行绘制。
2）H5 负责所有流程，获取数据、生成 option并调用 ECharts 进行绘制。
在此使用第 1）种方法，具体实现如下：
1、引入相关的类库
```java
implementation'com.github.frendyxzc:Charts:0.0.2'
implementation'com.github.abel533:ECharts:2.2.7'
```
2、构建继承WebView的EChartWebView方法，重写相关方法
--- loadUrl(URL）：加载http网页的方法
--- webSettings ：与webview相关的配置
--- addJavascriptInterface ：提供js调用java的相关方法
--- setDataSource : 对java构建完成的option进行返回
3、在Activity中获取数据并构建option
1）获取后台数据（略）
2）构建option
在com.github.abel533.echarts.Option中已提供了与Echarts实现的各种配置，我们只需调用即可
tooltip()：与标签有关
grid()：刻度线
CategoryAxis()：建立横向类目轴
ValueAxis()：纵轴
MarkPoint()：点数据
MarkLine()：标线
图表数据填充：
数据填充Echarts的XY轴的两种方法
（1）for in 循环方式
```java
for (item in Arraylist
categoryAxis.data(item.x)
line.data(item.y)
}
```
（2）Kotlin的变长参数
```java
categoryAxis.data(*dataArrayX)
line.data(*dataArrayY)
```
注：此处的dataArrayX和dataArrayY是任意类型的数组
*建立完成后选择展示的图表类型（线型图表）*：
```java
option.exportToHtml("line.html")
```
注：line.html和js等文件放置在安卓assets文件中
3）js中加载安卓端的数据
安卓端的数据就是option，option是构建的json字符串
在安卓端获取数据并构建被js调用的方法：
```java
addJavascriptInterface(EChartInterface(context), "Android")
```
定义一个接口供数据回调：
```java
private var dataSource: DataSource? = null
fun setDataSource(data: EChartWebView.DataSource, needReload: Boolean) {
dataSource = data
}
interface DataSource {
fun markChartOptions(): GsonOption
}
```
接口里方法的定义：
```java
internal inner class EChartInterface(var context: Context) {
val chartOptions: String?
@JavascriptInterface
get() {
if (dataSource != null) {
val option = dataSource!!.markChartOptions()
Log.i("xq","echarts图表的option：$option")
return option.toString()
}
return null
}
}
```
在js页面调用安卓的方法
```java
option = JSON.parse(Android.getChartOptions())；
JSON.parse是将json字符串其转化为json对象
```
其中Android.getChartOptions()就是js调用安卓的方法
初始化Echarts图标并设置option ，实现如下：
```java
chart = echarts.init(chartDoc)；
chart.setOption(option);
```
四、关于echarts中的option配置说明
介绍：formatter用于规定echarts数据显示的内容和格式。
使用：
1、字符串模板，此方式简单易于实现
饼图模板变量：
（1）{a}：系列名，series.name。
（2）{b}：数据名，series.data.name。
（3）{c}：数据值，series.data.value。
（4）{d}：百分比。
（5）{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
（6）{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
示例：
formatter:"{b}：{c}({d}%)"
折线、柱状图模板变量：
（1）{a}：系列名，series.name。
（2）{b}：数据名，xAxis.data。
（3）{c}：数据值，yAxis.data。
（5）{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
（6）{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
示例：
formatter:"{a}
{b}：{c}"
2、函数模板
此方法需要自行拼接要显示的标签内容，可以灵活配置比如有些图表option的配置在类库 abel533:ECharts:2.2.7 中是没有的，自定义formatter内容需要知道参数具体表示的内容，这里可以通过js的打印打印出函数传入的参数值，使用函数返回params对象，params是点数据的对象集合，打印出它的内容即可知道每个参数具体代表什么。
示例：
formatter:function(params){
console.log(params)
var result = params[0].name
for(i=0;i result = result+" } return result }
"+""+params[i].seriesName+": "+params[i].value