原生Android如何使用百度echarts
程序员文章站
2022-06-23 08:50:34
1.什么是echarts是由百度维护并开源的JavaScript 实现的开源可视化库，提供直观，交互丰富，可高度个性化定制的数据可视化图表。例如我们常用的条形图，折线图，饼形图，雷达图等等。官方定义如下ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。官网地址...
1.什么是echarts
是由百度维护并开源的JavaScript 实现的开源可视化库，提供直观，交互丰富，可高度个性化定制的数据可视化图表。例如我们常用的条形图，折线图，饼形图，雷达图等等。
官方定义如下：
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网地址
2.在Android 使用echart
由于echarts是基于JavaScript开发实现的 ，并且没有提供Android 原生依赖库去使用echarts，所以我们并不能直接使用echarts，而是需要曲线救国。通过研究我们发现echarts可以很好在移动设备的浏览器上运行，将echarts 打包在webview里 然后我们使用webview 不就可以了吗？通过实践这种方式是可以行的。
思路：是定义一个本地的html 引用echarts.js库，使用webview加载这个html，然后将这个webview封装成一个控件，并提供一个setData方法给echart赋值数据即可。
github地址 https://github.com/xiaohu409/HtEChart
1.定义html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="height:200px;"></div>
<script type="text/javascript">
function setData(option) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
</body>
</html>
2.封装WebView
封装webview 并提供setData方法
package com.github.xiaohu409.htechart.widget;
import android.content.Context;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.webkit.WebView;
import android.widget.LinearLayout;
import com.github.xiaohu409.htechart.R;
/**
* 对百度EChart的封装
* 由于EChart只有Web的实现，所以封装的思路就是加载本地html
* 然后调用js赋值就可以了
*/
public class HtEChartView extends LinearLayout {
private WebView webView;
public HtEChartView(Context context) {
this(context, null);
}
public HtEChartView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public HtEChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
private void initView(Context context) {
LayoutInflater layoutInflater = LayoutInflater.from(context);
if (layoutInflater == null) {
return;
}
View view =layoutInflater.inflate(R.layout.ht_echart, this);
webView = view.findViewById(R.id.web_view_id);
webView.getSettings().setJavaScriptEnabled(true);
}
/**
* 绑定数据
* @param data
*/
public void setData(String data) {
if (webView == null) {
return;
}
webView.setWebViewClient(new HtWebViewClient(data));
webView.loadUrl("file:///android_asset/echart/echart.html");
}
}
关于定义webviewclient 目的是在页面加载之后才能给echart 赋值，否则赋值会失败
package com.github.xiaohu409.htechart.widget;
import android.graphics.Bitmap;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
/**
* 项目名称： WholesalerManager
* 文件名： HtWebViewClient
* 描述：
* 作者： 胡涛
* 日期： 2018/9/28
* 版本： v1.0
*/
public class HtWebViewClient extends WebViewClient {
private String data;
public HtWebViewClient(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) {
super.onPageFinished(view, url);
view.post(new Runnable() {
@Override
public void run() {
view.loadUrl(String.format("javascript:setData(%s)", data));
}
});
}
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
}
}
到此echarts 封装完毕了，可以引用了
3.使用示例
布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.github.xiaohu409.htechart.widget.HtEChartView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/ht_echart_id1"/>
<com.github.xiaohu409.htechart.widget.HtEChartView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/ht_echart_id2"/>
<com.github.xiaohu409.htechart.widget.HtEChartView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/ht_echart_id3"/>
</LinearLayout>
代码
/**
* 初始控件
*/
private void initUI() {
//数据格式为json
//格式说明可以查看百度EChart文档
//http://echarts.baidu.com/tutorial.html
String data1 = "{\"title\":{\"show\":false,\"text\":\"订单状态百分比\",\"subtext\":\"\"},\"tooltip\":{\"trigger\":\"item\",\"formatter\":\"{a} <br/>{b} : {c} ({d}%)\"},\"series\":[{\"center\":[\"50%\",\"60%\"],\"radius\":[\"50%\",\"80%\"],\"type\":\"pie\",\"name\":\"订单笔数\",\"data\":[{\"name\":\"待付款\",\"value\":\"0\"},{\"name\":\"待发货\",\"value\":\"0\"},{\"name\":\"待收货\",\"value\":\"16\"},{\"name\":\"已完成\",\"value\":\"27\"}]}],\"legend\":{\"show\":false,\"data\":[\"待付款\",\"待发货\",\"待收货\",\"已完成\"]}}";
String data2 = "{\"color\":[\"#3398DB\",\"#e43c59\"],\"title\":{\"show\":false,\"text\":\"订单销售走势统计图\",\"subtext\":\"订单销售走势统计图\"},\"tooltip\":{\"trigger\":\"axis\",\"axisPointer\":{\"type\":\"shadow\"}},\"grid\":{\"zlevel\":0,\"z\":0,\"borderWidth\":0,\"containLable\":true},\"xAxis\":[{\"type\":\"category\",\"axisTick\":{\"show\":true,\"splitNumber\":0},\"data\":[\"2018-09-22\",\"2018-09-23\",\"2018-09-24\",\"2018-09-25\",\"2018-09-26\",\"2018-09-27\",\"2018-09-28\"]}],\"yAxis\":[{\"type\":\"value\",\"axisLabel\":{\"formatter\":\"{value}\"}}],\"series\":[{\"smooth\":true,\"type\":\"line\",\"name\":\"待发货订单\",\"data\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\"]},{\"smooth\":true,\"type\":\"line\",\"name\":\"已完成订单\",\"data\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"1\"]}],\"legend\":{\"show\":false,\"data\":[\"待发货订单\",\"已完成订单\"]}}";
//实例化EChart
HtEChartView eChart1 = findViewById(R.id.ht_echart_id1);
//绑定数据
eChart1.setData(data1);
HtEChartView eChart2 = findViewById(R.id.ht_echart_id2);
eChart2.setData(data2);
}
效果图如下
还有不足之处是，由于现在是使用json赋值，对数据操作不是很友好，下步优化是私有化json，对外只暴露bean。开发者只需要定义相应的bean，设置不同的统计图类型以及数据即可。
github地址 https://github.com/xiaohu409/HtEChart
本文地址：https://blog.csdn.net/hu285279904/article/details/111034150