Android数据可视化
Android数据可视化
- 前言
-
- ECharts
-
-
-
- 移动端优化
- ECharts官网
-
-
- 下载ECharts组件
-
-
-
- EChart 依赖库
-
-
前言
由于最近做数据分析与安卓记账本小程序，使用到了关于数据可视化绘图的相关工具，特此记录安卓绘制饼图，柱状图等方法。Android绘制图表，一般都会采用第三方图表框架，简单而且实现效果好。安卓的图标框架有很多，主流的有MPAndroidChart、hellocharts-android-master以及许多GitHub上的框架，由于之前在研究大数据的时候用到了百度ECharts这个框架，就给大家介绍这个框架。
ECharts
Echarts是百度
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
移动端优化
ECharts 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
细粒度的模块化和打包机制可以让 ECharts 在移动端也拥有很小的体积，可选的 SVG 渲染模块让移动端的内存占用不再捉襟见肘。
ECharts官网
ECharts
https://echarts.baidu.com/
下载ECharts组件
ECharts组件
https://echarts.baidu.com/download.html
将下载好的echarts.min.js文件放入工程中assets目录下。如果没有assets目录，可以先在mian目录下，通过右击 new -> Folder -> Assets Folder 创建。
编写echarts.html文件，并将echarts.html放入assets目录。
<html style="height: 100%">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
head>
<body style="height: 100%; margin: 0">
<div id="container" style="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 ={
};
function loadEcharts(echartJson){
var option = JSON.parse(echartJson);
if (option &&typeof option ==="object") {
myChart.setOption(option,true);
}
}
script>
body>
html>
EChart 依赖库
dependencies {
compile 'com.github.abel533:ECharts:3.0.0.2'
implementation 'com.google.code.gson:gson:2.8.1'
}
因为Echarts需要在WebView中显示，所以我们直接自定义一个EchartView继承自WebView用来显示图表。
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);
init();
}
private void init() {
WebSettings webSettings = getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setSupportZoom(false);
webSettings.setDisplayZoomControls(false);
loadUrl("file:///android_asset/echarts.html");
}
public void refreshEchartsWithOption(GsonOption option) {
if (option == null) {
return;
}
String optionString = option.toString();
String call = "javascript:loadEcharts('" + optionString + "')";
loadUrl(call);
}
}
最后设置图表参数
public class MainActivity extends AppCompatActivity {
private EchartView lineChart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lineChart = findViewById(R.id.lineChart);
lineChart.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//最好在h5页面加载完毕后再加载数据，防止html的标签还未加载完成，不能正常显示
refreshLineChart();
}
});
}
private void refreshLineChart(){
Object[] x = new Object[]{
"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
};
Object[] y = new Object[]{
820, 932, 901, 934, 1290, 1330, 1320
};
lineChart.refreshEchartsWithOption(EchartOptionUtil.getLineChartOptions(x, y));
}
}
显示效果
官方还有很多图形样式
作者：陈奇涵 原文链接