ECharts-Java类库地址:http://git.oschina.net/free/ECharts
百度ECharts地址:http://echarts.baidu.com/
大概在5个月前的时候,有个项目需要用到图表,百度ECharts很不错,就选择了ECharts。
我的项目是SpringMVC + Mybatis,当从数据库获取数据后,我不知道该如何处理这些数据了,是传到前台拼ECharts的Option结构还是在后台拼Option的JSON结构?
两种方式我都尝试了:
第一种在前台拼会导致逻辑很乱,JS很多很麻烦,很不好维护。
第二种在后台构造JSON结构,这种仍然很麻烦,由于我现在只是需要某个样子的图表,因此我创建一些需要的数据结构,然后各种乱七八糟的类都出来了。想到什么写什么,仍然很乱,仍然很难维护。
怎么办?
为了解决这个问题,我用业余时间,一个晚上写了一个ECharts-Java类库的基础数据结构。第二天在项目中试用了一下,不过当时说图表不重要,不用写这功能了。之后我在项目中就没用过ECharts-Java类库了。
但是我一直在想更简单的编码方式,因此增加了链式调用,让写java代码和js代码一样的方便和快捷,效率提高了很多。
到了现在(2015-01-27)这个项目突然需要几个图表了,我终于算是第一次用上了ECharts-Java类库,开发ECharts-Java类库的时候写了很多测试,所以我用起来很顺手,写的很快,确实非常的方便。
好多使用ECharts-Java类库的人都问我有没有实际的例子,我一直都说看测试代码和官网例子去吧。我当时真没有实际的例子,到后来写过一个简单的例子(【实例教程】Echarts 的 Java 封装类库),不过数据是模拟的。
现在终于可以拿出一个实际的例子来简单演示了。
系统:SpringMVC+Mybatis
先看最后的效果图:
接下来通过代码来简单讲解:
首先通过Mybatis获取数据,从上图也能看出来,我需要的数据一个是药名,一个是金额,一个简单的统计SQL就可以完成。
因为数据很简单,我使用Mybatis的时候返回值直接用的List
然后在Service层构造Option结构,代码如下:
@Override
public Option selectRemoveCauses() throws BusinessException {
//查询前20
PageHelper.startPage(1, 20, false);
//数据库查询获取统计数据
List
Service返回Option后,在Controller层返回,Controller层代码如下:
@RequestMapping("/removecauses")
public
@ResponseBody
WebResult removecauses() throws Exception {
WebResult result = new WebResult();
try {
Option option = injuryService.selectRemoveCauses();
result.isOK();
result.setData(option);
} catch (BusinessException e) {
result.setException(e);
}
return result;
}
然后是前台页面,使用jQuery的getJSON方法获取数据,完整的页面代码如下: