1.在工程目錄下放入如下兩個文件 注明：echarts.min.js可以在官網(wǎng)自行打包下載需要的功能下載地址:https://echarts.apache.org/zh/download.html
image.png
1.1創(chuàng)建Echarts模板html（有條件的可自行編寫html模板）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<!-- 引入 ECharts 文件 -->
<script src="./echarts.min.js"></script>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
}
#chart {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: .24rem;
color: #999;
}
</style>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大?。▽捀撸┑?DOM -->
<div id="chart" style="height:100%;"></div>
<script type="text/javascript">
function setData(option) {
console.log("設(shè)置圖表：\n" + JSON.stringify(option));
// 基于準(zhǔn)備好的dom，初始化echarts實例
try {
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);
} catch (e) {
console.log("設(shè)置圖表error：\n" + JSON.stringify(e));
}
}
function setEmpty(msg, fontSize = 12) {
console.log("設(shè)置圖表空數(shù)據(jù)", msg, fontSize);
document.getElementById('chart').innerHTML = "<span style='font-size:" + 0.01 * (fontSize * 2) + "rem;'>" + (!msg ? '暫無數(shù)據(jù)~' : msg) + "</span>";
}
</script>
<script type="text/javascript">
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
window.mtSizeBase = 100 * (clientWidth / 750);
window.mtSizeBase = window.mtSizeBase > 100 ? 100 : window.mtSizeBase;
window.mtSizeBase = window.mtSizeBase < 45 ? 45 : window.mtSizeBase;
docEl.style.fontSize = window.mtSizeBase + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>
1.2創(chuàng)建自定義WebView
public class EChartsWebView extends WebView {
private boolean requestDisallowInterceptTouchEvent = true;
private static int emptyFontSize = 14;
private static String emptyMsg = "暫無數(shù)據(jù)~";
public EChartsWebView(@NonNull Context context) {
this(context, null);
}
public EChartsWebView(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public EChartsWebView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@SuppressLint({"ClickableViewAccessibility", "SetJavaScriptEnabled"})
private void init() {
this.getSettings().setJavaScriptEnabled(true);
this.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
this.getSettings().setSupportZoom(false);
this.getSettings().setDisplayZoomControls(false);
this.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
requestDisallowInterceptTouchEvent(requestDisallowInterceptTouchEvent);
return super.onTouchEvent(event);
}
public void setData(String data) {
loadData(data);
}
public void setEmpty() {
loadData("");
}
public void setEmpty(String msg, int emptyFontSize) {
emptyMsg = msg;
this.emptyFontSize = emptyFontSize;
loadData("");
}
private void loadData(String data) {
this.loadUrl("file:///android_asset/echarts.html");
this.setWebViewClient(new EChartsWebViewClient(data));
}
public static class EChartsWebViewClient extends WebViewClient {
private String data;
public EChartsWebViewClient(String data) {
this.data = data;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(final WebView view, String url) {
LogUtil.info("圖表", "html加載完成 onPageFinished");
view.post(() -> {
if (StringUtil.isEmpty(data)) {
String emptyUrl = String.format("javascript:setEmpty(%s, %s)", "'" + emptyMsg + "'", emptyFontSize);
LogUtil.info("圖表", emptyUrl);
view.loadUrl(emptyUrl);
} else
view.loadUrl(String.format("javascript:setData(%s)", data));
});
super.onPageFinished(view, url);
}
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
LogUtil.info("圖表加載出錯", error.toString());
}
}
public boolean isRequestDisallowInterceptTouchEvent() {
return requestDisallowInterceptTouchEvent;
}
public void setRequestDisallowInterceptTouchEvent(boolean requestDisallowInterceptTouchEvent) {
this.requestDisallowInterceptTouchEvent = requestDisallowInterceptTouchEvent;
}
}
2.在頁面中使用方式 （可在官網(wǎng)示例里自行根據(jù)配置文檔進(jìn)行配置[示例地址]（這里設(shè)置option由于echarts配置太多網(wǎng)上提供的model bean是基于2.0版本的所以就直接在示例里將圖表配置配置好直接copy字符串用來設(shè)置option了）(https://echarts.apache.org/examples/zh/index.html)、配置項手冊)將options 部分復(fù)制在頁面中進(jìn)行數(shù)據(jù)組裝
image.png
image.png
image.png
