Android使用echart展示酷炫的图表
最近开发的时候，遇到了柱状图，刻度图等各种图表的展示。查资料发现，Android用的的最多的是MPAndroidChart，我也尝试了，一般的柱状图和饼状图都可以实现，但是刻度图就不行。经了解，h5端有百度的echart可以实现各种酷炫的图表展示，echarts官方示例地址。产品能想到的图表都有，哈哈，于是乎我封装了一个webview来展示echarts的图表。效果如下:
首先去官网下载echart的依赖库echarts.min.js，放入项目的assets文件夹中（没有自己创建一个）。
然后，编写一个html文件，也放入项目的assets文件夹中，代码如下：
<!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 style="height: 100%; margin: 0">
<!-- 为 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);
window.addEventListener('resize', myChart.resize);
} catch (e) {
console.log("设置图表error：\n" + JSON.stringify(e));
}
}
</script>
</body>
</html>
最后自定义一个webview，里面本地和html进行交互，传递数据。上代码：
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) {
view.post(() -> {
if (TextUtils.isEmpty(data)) {
String emptyUrl = String.format("javascript:setEmpty(%s, %s)", "'" + emptyMsg + "'", emptyFontSize);
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);
}
}
}
至此，准备工作都做好了，可以使用了，在activity中使用
var option = "{\n" +
" series: [\n" +
" {\n" +
" type: 'gauge',\n" +
" startAngle: 180,\n" +
" endAngle: 0,\n" +
" center: ['50%', '75%'],\n" +
" radius: '90%',\n" +
" min: 0,\n" +
" max: 1,\n" +
" splitNumber: 8,\n" +
" axisLine: {\n" +
" lineStyle: {\n" +
" width: 6,\n" +
" color: [\n" +
" [0.25, '#FF6E76'],\n" +
" [0.5, '#FDDD60'],\n" +
" [0.75, '#58D9F9'],\n" +
" [1, '#7CFFB2']\n" +
" ]\n" +
" }\n" +
" },\n" +
" pointer: {\n" +
" icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',\n" +
" length: '12%',\n" +
" width: 20,\n" +
" offsetCenter: [0, '-60%'],\n" +
" itemStyle: {\n" +
" color: 'inherit'\n" +
" }\n" +
" },\n" +
" axisTick: {\n" +
" length: 12,\n" +
" lineStyle: {\n" +
" color: 'inherit',\n" +
" width: 2\n" +
" }\n" +
" },\n" +
" splitLine: {\n" +
" length: 20,\n" +
" lineStyle: {\n" +
" color: 'inherit',\n" +
" width: 5\n" +
" }\n" +
" },\n" +
" axisLabel: {\n" +
" color: '#464646',\n" +
" fontSize: 16,\n" +
" distance: -60,\n" +
" rotate: 'tangential',\n" +
" formatter: function (value) {\n" +
" if (value === 0.875) {\n" +
" return '优秀';\n" +
" } else if (value === 0.625) {\n" +
" return '良好';\n" +
" } else if (value === 0.375) {\n" +
" return '一般';\n" +
" } else if (value === 0.125) {\n" +
" return '差';\n" +
" }\n" +
" return '';\n" +
" }\n" +
" },\n" +
" title: {\n" +
" offsetCenter: [0, '-10%'],\n" +
" fontSize: 14\n" +
" },\n" +
" detail: {\n" +
" fontSize: 30,\n" +
" offsetCenter: [0, '-35%'],\n" +
" valueAnimation: true,\n" +
" formatter: function (value) {\n" +
" return Math.round(value * 100) + '';\n" +
" },\n" +
" color: 'inherit'\n" +
" },\n" +
" data: [\n" +
" {\n" +
" value: 0.7,\n" +
" name: '发电完成率'\n" +
" }\n" +
" ]\n" +
" }\n" +
" ]\n" +
"}"
mWebview?.setData(option)
这样，图片里面的刻度图就展示出来了，option可以去echart官网示例里面直接复制，把里面的参数改成你想要的就可以了。
以上就实现了echart在Android端的使用，再也不要怕产品说h5可以，Android怎么不可以了，哈哈