1.在工程目录下放入如下两个文件 注明：echarts.min.js可以在官网自行打包下载需要的功能下载地址:https://echarts.apache.org/zh/download.html
image.png
1.1创建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 准备一个具备大小（宽高）的 DOM -->
<div id="chart" style="height:100%;"></div>
<script type="text/javascript">
function setData(option) {
console.log("设置图表：\n" + JSON.stringify(option));
// 基于准备好的dom，初始化echarts实例
try {
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);
} catch (e) {
console.log("设置图表error：\n" + JSON.stringify(e));
}
}
function setEmpty(msg, fontSize = 12) {
console.log("设置图表空数据", msg, fontSize);
document.getElementById('chart').innerHTML = "<span style='font-size:" + 0.01 * (fontSize * 2) + "rem;'>" + (!msg ? '暂无数据~' : 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创建自定义WebView
public class EChartsWebView extends WebView {
private boolean requestDisallowInterceptTouchEvent = true;
private static int emptyFontSize = 14;
private static String emptyMsg = "暂无数据~";
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.在页面中使用方式 （可在官网示例里自行根据配置文档进行配置[示例地址]（这里设置option由于echarts配置太多网上提供的model bean是基于2.0版本的所以就直接在示例里将图表配置配置好直接copy字符串用来设置option了）(https://echarts.apache.org/examples/zh/index.html)、配置项手册)将options 部分复制在页面中进行数据组装
image.png
image.png
image.png
