0、前言
ECharts 是一個使用 JavaScript 實現(xiàn)的開源可視化庫，且兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等）及兼容多種設(shè)備，當(dāng)然也支持在Android中的顯示，主要是通過WebView來加載，可隨時隨地任性展示，支持多種圖標(biāo)樣式的展示。
本文主要從echarts的使用以及在Android中的使用來講解echarts。
1、如何使用Echarts
首先是下載echarts
如上所述，下載后的文件為echarts.min.js，是一個JavaScript文件，如何在html導(dǎo)入該文件，例如：
<!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'
}
]
};
然后在調(diào)用echarts的setOption方法即可：
<!--注意以下代碼在script里面-->
if (option &&typeof option ==="object") {
myChart.setOption(option,true);
}
關(guān)于option的寫法和例子，見官方例子有很多例子，本文重點講如何在Android中使用ehcarts
2、Android調(diào)用echarts
如上文所述，echarts是JavaScript編寫的可視化庫，因此使用echarts主要是在htlm文件中使用，然后通過html實現(xiàn)跨平臺，在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時提供了一個數(shù)據(jù)傳入接口，其中dataArray可以為任何數(shù)據(jù)，一般使用json格式的數(shù)據(jù)，以便實現(xiàn)傳入多數(shù)據(jù)，然后在通過JSON解析取出數(shù)據(jù)：
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，設(shè)定加載的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），然后根據(jù)需要配置好webview，即可使用webview加載裝載echarts的html頁面。
之后通過refreshEchartsWithOption方法，傳入value(即options中動態(tài)變化的值），即可刷新并加載圖表。
注意：refreshEchartsWithOption方法須在html的標(biāo)簽加載完成之后調(diào)用,即在WebViewClient的onPageFinished方法中調(diào)用：
private val client: WebViewClient?=object : WebViewClient() {
override fun onPageFinished(view: WebView, url: String) {
super.onPageFinished(view, url)
refreshLineChart(value)
}
}
此處給出在fragment里面調(diào)用的例子：
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、小結(jié)
至此，Android使用echarts的方法介紹結(jié)束，主要可分為以下幾步：
- 創(chuàng)建html文件，導(dǎo)入echarts.min.js庫
- html中構(gòu)造options，提供接口供Android端傳入動態(tài)變化的值
- 自定義webview，加載html頁面，傳入動態(tài)變化的值刷新圖表
當(dāng)然，如果不需要動態(tài)改變options里面的值，可不傳入數(shù)據(jù)。
原創(chuàng)文章，轉(zhuǎn)載請附上原文鏈接
