echarts android使用教程,在android上使用ECharts

前言

做Android开发经常会需要画一些图表，自己写的话不仅麻烦而且工作量太大，所以一般都会采用第三方图表框架，现在给大家介绍一款功能非常丰富的图表框架 ECharts 。

准备

ECharts 是由百度开发提供的开源框架，主要提供给Web使用，所以Android中一般使用WebView加载显示，其实本质上也就是用 WebView 加载本地 H5。

ECharts的图表样式主要由option控制，option是由js编写，如下面代码就是一个简单折线图的option。

在andorid中使用ECharts,一般来讲我们有两种实现方案

Android获取数据并封装好option，然后传递给h5，h5再对数据进行解析，调用ECharts绘制。

这种方案的难点在于option的属性太多了，封装起来太麻烦。

h5处理所有操作，进行获取数据，并调用ECharts进行绘制。

这种方案需要对js比较熟悉。

这里我们采用第一种方案，因为前人栽树后人乘凉，已经有大神帮我们做好最困难的数据封装工作：EChart java 对象库

实现

配置ECharts

下载Echarts。你可以根据你的需求在ECharts官网下载需要的ECharts组件。我这里选择的是完整版。

将下载好的echarts.min.js文件放入工程中assets目录下。如果没有assets目录，可以先在mian目录下，通过右击 new -> Folder -> Assets Folder 创建。

assets.png

编写echarts.html文件，并将echarts.html放入assets目录。

依赖EChart java 对象库

注意：因为该对象库依赖Gson，所以project同样需要添加Gson依赖

代码实现

因为Echarts需要在WebView中显示，所以我们直接自定义一个EchartView继承自WebView用来显示图表。

再定义一个工具类用来将数据封装为option，这里只封装了一个简单的折线图做例子。

更多图表的封装请参照EChart java 对象库和ECharts官方例子。

在Acitvity中显示

activity_main.xml

MainActivity .java

Screenshot_2018-04-11-14-36-32-219_com.example.ming.echartsforandroid.png

后记

EChart java 对象库目前只封装了常用的十几种图表，所以如果需要用到更多的图表，建议直接下载EChart java 对象库代码，对其进行扩充。