项目后台要加一个统计，产品只要求能看到数据就行了，但是做完后我发现只有文本不够直观，就想着用图表的形式的展现一下(顺便温习一下曾经用过的 JFreeChart XD)。JFreeChat 虽好，但也有些年头了，就去网上搜了搜有没有什么更好的图表生成的类库。
当在8 个华丽而实用的 Java 图表应用看到 ECharts 的时候，发现 JFreeChart 跟它比就不是一个级别的呀！至于开头说的温习嘛，就缓缓吧，先看一下 ECharts。
先看一下用 ECharts 做的柱状图：
ECharts
开源的 ECharts 来自百度 EFE 数据可视化团队。至于 ECharts 有哪些好处？可以看看其官网和官方的 PPT Why ECharts。
ECharts-Java
首先感谢isea533写的这个类库。
ECharts 说白了就是一个 JavaScript 图表库，它的图表样式和数据都是由一个 Json 对象提供。因为 ECharts 的强大，在后端构造各种 Json 结构的时候就会比较痛苦。isea533 就写了这么一个类库( )，它实现了所有 ECharts 中的 Json 结构对应的 Java 对象，目前是针对 ECharts 2.0 的。
Action1
2
3
4
5
6
7
8
9
10
11
12
com.github.abel533
ECharts
2.2.6
com.google.code.gson
gson
2.5
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
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = ${optionJsonStr};
// 为echarts对象加载数据
myChart.setOption(option);如果显示不出来的话，使用eval（'('+optionJsonStr+')')将optionJsonStr转换为 Json 对象试试。我这里直接用${optionJsonStr}取出来的就是 Json 对象。至于显示效果嘛，本文开头已经给你看啦~
其实懂了 ECharts 的各种数据结构后，用 ECharts-Java 不用怎么看文档就能“写出”对应样式与功能的图表了。百度官方有很多栗子可以参考：http://echarts.baidu.com/doc/example.html
最后引用 ECharts-Java wiki 里的一段话，以免误入歧途：
由于本项目主要目的是方便在 Java 中构造 ECharts 中需要使用的各种数据结构，所以你需要了解 ECharts 本身，你只有知道你自己需要什么样的数据，什么样的样式，什么样的功能时，你才能写出来。
所以想通过本项目来了解 ECharts 是本末倒置。
Reference
