使用开源ECharts-Java类库操作百度Echarts

迈不过友情╰ 2022-05-17 11:06 195阅读 0赞

### 本文转自：[isea533的博客][isea533] ###

ECharts-Java类库地址：[http://git.oschina.net/free/ECharts][http_git.oschina.net_free_ECharts]

百度ECharts地址：[http://echarts.baidu.com/][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 封装类库][Echarts _ Java]），不过数据是模拟的。

**现在终于可以拿出一个实际的例子来简单演示了。**

系统：SpringMVC+Mybatis

先看最后的效果图：

![SouthEast][]

**接下来通过代码来简单讲解：**

**首先**通过Mybatis获取数据，从上图也能看出来，我需要的数据一个是药名，一个是金额，一个简单的统计SQL就可以完成。

因为数据很简单，我使用Mybatis的时候返回值直接用的List<Map<String,Object>>。

然后在Service层构造Option结构，代码如下：

@Override 
       public Option selectRemoveCauses() throws BusinessException { 
       //查询前20 
       PageHelper.startPage( 1, 20, false); 
       //数据库查询获取统计数据 
       List<Map<String, Object>> list = kc22Mapper.selectRemoveCauses(); 
       //为了数据从大到小排列，这里需要倒叙 
       Collections.sort(list, new Comparator<Map<String, Object>>() { 
       @Override 
       public int compare(Map<String, Object> o1, Map<String, Object> o2) { 
       return - 1; 
       } 
       }); 
       //创建Option 
       Option option = new Option(); 
       option.title( "剔除药品").tooltip(Trigger.axis).legend( "金额（元）"); 
       //横轴为值轴 
       option.xAxis( new ValueAxis().boundaryGap( 0d, 0.01)); 
       //创建类目轴 
       CategoryAxis category = new CategoryAxis(); 
       //柱状数据 
       Bar bar = new Bar( "金额（元）"); 
       //饼图数据 
       Pie pie = new Pie( "金额（元）"); 
       //循环数据 
       for (Map<String, Object> objectMap : list) { 
       //设置类目 
       category.data(objectMap.get( "NAME")); 
       //类目对应的柱状图 
       bar.data(objectMap.get( "TOTAL")); 
       //饼图数据 
       pie.data( new PieData(objectMap.get( "NAME").toString(), objectMap.get( "TOTAL"))); 
       } 
       //设置类目轴 
       option.yAxis(category); 
       //饼图的圆心和半径 
       pie.center( 900, 380).radius( 100); 
       //设置数据 
       option.series(bar, pie); 
       //由于药品名字过长，图表距离左侧距离设置180，关于grid可以看ECharts的官方文档 
       option.grid().x( 180); 
       //返回Option 
       return option; 
       }

代码中的注释很详细。

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; 
       }

SpringMVC配置的返回JSON，这里的WebResult不用多考虑，就是一层统一的封装，和ECharts图表无关。

然后是前台页面，使用jQuery的getJSON方法获取数据，完整的页面代码如下：

<body style="padding:0"> 
       <div style="padding:10px;clear: both;"> 
       <div id="psLine" style="height:600px;"> </div> 
       </div> 
       </body> 
       <script src="jslib/echarts/echarts-all.js"> </script> 
       <script type="text/javascript"> 
       //图表 
       var psLineChar = echarts.init( document.getElementById( 'psLine')); 
       
       //查询 
       function loadDrugs() { 
       psLineChar.clear(); 
       psLineChar.showLoading({ text: '正在努力的读取数据中...'}); 
       $.getJSON( 'analysis/removecauses.html', function (data) { 
       if (data.success) { 
       psLineChar.setOption(data.data, true); 
       psLineChar.hideLoading(); 
       } else { 
       alert( '提示', data.msg); 
       } 
       }); 
       } 
       //载入图表 
       loadDrugs(); 
       </script>

**根据ECharts文档，这里将<script>都放到了</body>的后面。**

代码很简单，定义了一个id=”psLine”的div，然后使用echarts.init获取图表对象。

使用$.getJSON获取数据，然后调用psLineChar.setOption(data.data, true);将数据加载进来。

实现这样一个图表的整个过程是相当简单的，只要有数据，需要什么样的图表，很容易就能写出来。

**使用ECharts-Java类库是不是很方便？**

ECharts-Java类库地址：[http://git.oschina.net/free/ECharts][http_git.oschina.net_free_ECharts]

[isea533]: https://blog.csdn.net/isea533/article/details/43225717
[http_git.oschina.net_free_ECharts]: http://git.oschina.net/free/ECharts
[http_echarts.baidu.com]: http://echarts.baidu.com/
[Echarts _ Java]: http://my.oschina.net/flags/blog/316920
[SouthEast]: /images/20220517/2c16c9b8ea824592aed80e3948f43a79.png