在 Java 项目中使用 ECharts

项目后台要加一个统计,产品只要求能看到数据就行了,但是做完后我发现只有文本不够直观,就想着用图表的形式的展现一下(顺便温习一下曾经用过的 JFreeChart XD)。JFreeChat 虽好,但也有些年头了,就去网上搜了搜有没有什么更好的图表生成的类库。

当在8 个华丽而实用的 Java 图表应用看到 ECharts 的时候,发现 JFreeChart 跟它比就不是一个级别的呀!至于开头说的温习嘛,就缓缓吧,先看一下 ECharts。

先看一下用 ECharts 做的柱状图:

echarts-bar

ECharts

开源的 ECharts 来自百度 EFE 数据可视化团队。至于 ECharts 有哪些好处?可以看看其官网和官方的 PPT Why ECharts

ECharts-Java

首先感谢isea533写的这个类库。

ECharts 说白了就是一个 JavaScript 图表库,它的图表样式和数据都是由一个 Json 对象提供。因为 ECharts 的强大,在后端构造各种 Json 结构的时候就会比较痛苦。isea533 就写了这么一个类库(http://blog.csdn.net/isea533/article/details/43225717 ),它实现了所有 ECharts 中的 Json 结构对应的 Java 对象,目前是针对 ECharts 2.0 的。

ECharts-Java类库地址:
http://git.oschina.net/free/ECharts
https://github.com/abel533/ECharts

Action

下面是一个完整的柱状图的例子。
(效果见本文开头的图,参考自http://echarts.baidu.com/doc/example/bar1.html

1
2
3
4
5
6
7
8
9
10
11
12
<!-- pom.xml -->
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>2.2.6</version>
</dependency>

<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.5</version>
</dependency>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// java

public String barChart() {
// 创建Option
// Option 无需任何依赖; GsonOption 依赖 Gson, FsonOption 依赖 FastJson
Option option = new GsonOption();

// 设置标题与子标题
option.title().text("某地区蒸发量和降水量").subtext("纯属虚构").x(X.left).y(Y.top);
// 设置右上角工具箱
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore,
Tool.saveAsImage);
// 图例
option.legend().data("蒸发量", "降水量");
// 设置 x 轴为类目轴, y 轴为值轴
option.xAxis(new CategoryAxis().data("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月",
"10月", "11月", "12月")).yAxis(new ValueAxis().max(200));
// 气泡提示框
option.tooltip().trigger(Trigger.axis);

// 柱状数据, 实验嘛,就用模拟数据了。
Bar bar1 = new Bar("蒸发量");
bar1.data(2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3);
bar1.markPoint().data(new PointData().type(MarkType.max).name("最大值"),
new PointData().type(MarkType.min).name("最小值"));
bar1.markLine().data(new PointData().type(MarkType.average).name("平均值"));

// 又一个柱状数据
Bar bar2 = new Bar("降水量");
bar2.data(2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3);
bar2.markPoint().data(new PointData().type(MarkType.max).name("最大值"),
new PointData().type(MarkType.min).name("最小值"));
bar2.markLine().data(new PointData().type(MarkType.average).name("平均值"));

// 向 Option 中设置数据
option.series(bar1, bar2);

// GsonOption 重写了 toString() 方法, 返回 Json(用 Gson 实现的)
return option.toString();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- jsp -->
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js" type="text/javascript"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = ${optionJsonStr};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>

如果显示不出来的话,使用eval('('+optionJsonStr+')')optionJsonStr转换为 Json 对象试试。我这里直接用${optionJsonStr}取出来的就是 Json 对象。至于显示效果嘛,本文开头已经给你看啦~
其实懂了 ECharts 的各种数据结构后,用 ECharts-Java 不用怎么看文档就能“写出”对应样式与功能的图表了。百度官方有很多栗子可以参考:http://echarts.baidu.com/doc/example.html

最后引用 ECharts-Java wiki 里的一段话,以免误入歧途:
由于本项目主要目的是方便在Java中构造ECharts中需要使用的各种数据结构,所以你需要了解ECharts本身,你只有知道你自己需要什么样的数据,什么样的样式,什么样的功能时,你才能写出来。
所以想通过本项目来了解ECharts是本末倒置。

Reference

http://www.codeceo.com/article/8-java-graph.html
http://echarts.baidu.com/
http://blog.csdn.net/isea533/article/details/43225717
http://git.oschina.net/free/ECharts/wikis/home