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文件如下所示：
接着，自定义一个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的方法介绍结束，主要可分为以下几步：
- 创建html文件，导入echarts.min.js库
- html中构造options，提供接口供Android端传入动态变化的值
- 自定义webview，加载html页面，传入动态变化的值刷新图表
当然，如果不需要动态改变options里面的值，可不传入数据。
原创文章，转载请附上原文链接
