Android图表开发之ECharts
开始这篇文章之前，需要提到一个上篇文章中忘记说的一个问题，就是我们在使用HelloCharts绘制折线图的时候，当我们进入其它界面后重新进入该界面有可能会出现折线图中首尾两个点相连的奇怪现象（兴许还有其他绘制怪象），这是因为数据残留的原因，所以我们需要每次在绘制图表的时候先清除一下之前的数据，清除方法就是把我们用来存储PointValue的集合clear一下就OK了！那今天我们就来聊聊ECharts吧。。。
ECharts是百度推出的基于JavaScript实现的开源可视化库，可以说涵盖量非常广，基本上我们需要用到的图表，它都能提供，现在更新到3.0版本，我看了下官网给出的例子，可以帮我们实现很多酷炫的图表要求，大家可自行欣赏一下：ECharts Demo
既然这么好用，我们为什么还要用其他的库呢，直接用这个多省事。。。别急，前面说到了ECharts是基于JavaScript实现的，所以它更多地是被运用在Web端开发上，对于我们Android开发而言，想要用的话就必须有一个可以和JavaScript交互的控件，没错，就是WebView，正因为我们是用WebView加载图表，所以图表在绘制的时候会出现延迟加载的现象，尤其当我们需要加载的数据很多的时候，我们会发现进入界面后一两秒的时间，图表才被绘制出来，好在图表绘制的时候会有一个动画效果，但对于有些用户而言可能体验效果就没有那么好，当然我们可以运用一些技术手段让它没有延迟加载的现象。所以就像我在上篇文章中介绍的时候提到的，当我们项目中只是需要一些简单的图表展示时，我觉得是没有必要引入ECharts的，图表要求比较高的时候，ECharts绝对是一个不错的选择！
那么接下来我们就开始介绍它的用法了，Android中的实现方式就是WebView加载本地H5，而ECharts里各种图表的属性和数据等都是由option决定的，这里我们将介绍两种方式来生成option，从而绘制图表。。。
在介绍实现方式之前，我们需要去ECharts官网下载我们所需要的js文件，官网提供了四个版本：
每个版本所包含的图表组件量是不一样的，而官网也特别提到了我们在开发环境中建议选择源代码版本，因为该版本中包含了常见的警告和错误提示，方便我们排查问题，那么我们在演示的时候也选择源代码版吧，文件名称为echarts.js，每个版本的名称是不一样的，大家还是要根据开发实际需求进行选择吧，如果只是简单的折柱饼图表要求，我觉得没有必要放一个源代码版的进去，毕竟2.76MB呢
下载完成以后就可以把我们echarts.js文件放入到工程目录的assets文件夹下了，那么接下来就来看看是如何实现的。。。
方式1：html负责所有的流程，获取数据、生成option并调用ECharts进行绘制
这种方式的侧重点就在H5页面了，首先我们需要在assets文件夹下新建一个本地H5页面，接下来的操作都是在该H5页面完成，我们需要在该页面中完成对相应图表位置、大小、颜色、数据等很多属性的设置，对于不是很熟悉标签语言的人来说是一件很痛苦的事，并且你会发现没有任何提示，一不留神就有可能出错，并且很难排查错误，然后运行的时候就会发现怎么都没法显示，殊不知你有可能只是在某个地方少写了个英文版的逗号。。。但这种方式有一个好处就是一次开发三端（Web/Android/IOS）使用，所以公司如果有Web大神的话，强烈建议让他来写这些页面，我们只需要用WebView加载就行，那么下面就贴出我写的H5页面的代码，这段代码也是借鉴了网上某位大神的，个人觉得相对灵活，大家可以先看一下：
ECharts
灵活之处在于对内分别构建了创建折线图、饼状图、柱状图的方法，对外提供createChart方法，我们在绘制的时候只需要传入我们需要的图表类型和数据集就可以得到我们想要的图表了，当然大家可以直接把数据添加在H5中，这样出来的图表可控性就很低了，因为我们的数据往往都是从服务端获取的，所以还是建议大家对外提供方法来设置数据。
那我们来简单看看这段js代码吧，我们先是定义一个myChart变量，然后往myChart中setOption，而我们看到每一个图表对应一个options，我们在options中构建我们的图表属性，其实每一个图表的属性不止这些的，具体的大家可以去这个网址查看：点击打开链接，另外我们看一下doCreateChart这个方法，require里面我们需要用到的主题和图表类型，最后都需要设置到我们的myChart里，这里顺便看一下我的assets目录吧：
我们引入了H5中需要用到的三种图表js文件以及所有的主题类型，其实不用这么复杂的，一个本地html和echarts.js文件就可以搞定的，只不过为了更加详细的展示，所以又多引入了这些文件，这里需要主要的是我们在引入echarts.js文件的时候一定要注意它与html文件的路径关系，否则就会出现引入不成功，无法显示图表的问题，那么接下来就是在我们的代码中进行WebView的交互了。。。
首先就是WebView的初始化了，这个想必大家都已经很熟练了，其实最重要的就是这段代码了：
mWebViewChart.getSettings().setJavaScriptEnabled(true);
然后我们需要设置WebView的加载路径，也就是加载本地html：
mWebViewChart.loadUrl("file:///android_asset/echart/echart.html");紧接着就是通过WebView调用本地html中的方法来绘制图表了：
mWebViewChart.loadUrl("javascript:createChart('line',[820, 932, 901, 934, 1290, 1330, 1320]);");这里我们传入的图表类型为“line”，然后紧接着传入数据数组，就能得到我们想要的图表了，运行出来的效果就是这样的了：
那么想要得到饼状图和柱状图，我们只需要传入“pie”和“bar”就可以了，我们得到的效果图也贴出来看看吧：
这里我们得到的是一个环形的饼状图，我们只需要控制它的radius值就行，radius赋一个值时得到的就是实心的，两个值得到的就是环形的，大家可以看到饼状图自带标签效果，我们还可以让它显示比例数值，那么这个效果是HelloChart没法达到的（反正我是没发现），至于这些图表的颜色，有一个color属性是可以控制的，大家有兴趣可以自行实现。。。这就是我们的第一种实现方式，接下来我们看看第二种：
方式2：数据部分交给Android，H5页面负责解析数据并调用ECharts进行绘制
这种方式的侧重点就在于Android的代码部分了，我们需要在代码中生成所需要的option，然后交给H5负责解析，那么我们又该如何在代码中去生成option呢？这里就需要用到Github上面一位前辈帮我们封装好的Java类库abel533/ECharts了，它实现了所有ECharts中的Json结构对应的Java对象，并且可以很方便的创建option、series等，那么这里我们的H5页面的代码就要发生变化了，先贴出来大家看看吧：
ECharts
有没有觉得代码瞬间清爽了不少，其实最主要的就是setOption方法，我们在Android代码中生成完option后，调用js中的setOption方法就可以完成图表的绘制了，这里我就不再演示折线图和柱状图了，因为公司项目正好用到了饼状图，就偷个懒拿来展示了。接下来我们看看Android代码部分吧：
private void showPieChart() {
mWebViewPie.loadUrl("javascript:clear()");
ItemStyle dataStyle = new ItemStyle();
dataStyle.normal().label().show(true).formatter("{b}\n({d}%)");
GsonOption option = new GsonOption();
Pie pie = new Pie("访问来源");
pie.clockWise(false).center("48%", "45%").radius("55", "80")
.itemStyle(dataStyle)
.data(
new Data("直接访问",335),
new Data("邮件营销",310),
new Data("联盟广告",274),
new Data("视频广告",235),
new Data("搜索引擎",400)
);
option.series(pie);
mWebViewPie.loadUrl("javascript:setOption(" + option + ")");
}可以看到我们通过创建一个Pie对象，然后往对象里面设置我们的一些属性和数据，最后得到我们想要的option，其实我们可以输出一下这个option，跟我们前面方式1在js代码中写的格式是一模一样的，得出来的效果图也自然而然是一样的：
至于其他图表，该框架中都封装有相应的对象，我们用的时候只需要new一个对象，设置相应的属性和数据即可！那么这种方式的优势在于可能对于我们Android开发者而言，更加倾向于在Android代码中去控制属性和数据，标签语言在Android工程中写起来是真的很麻烦的。。。
好了，以上就是两种ECharts在Android中的实现方式，可能有些地方说的不是很清楚，毕竟我也是在研究当中，欢迎大家多多批评、指正！
另外文章中有用到其他借鉴的地方，在此表示感谢！希望大家可以多多分享。。。