Echarts第二讲-JAVA实现

上一讲的Echarts小记介绍了一些基本的使用点，安装，引用，配置option，组装数据。

但是有没有发现，Echarts的option要配置大量js文件，即使你把单独引用一个js文件，看上去还是很冗长。当你做一两个图表的时候还是，但我这次的需求要设计100多个不同样式的宏观数据图表时，还这样做就要奔溃了。

仔细发现option是标准的json格式的数据，也就是说我们后台可以动态的组装option在传给前台给Echarts进行实例化就搞定。一开始我的想法是把option看成一个类，它里面的多个配置看作是option的属性，最后在把option类转化为json格式的字符串就搞定了。然后再去看Echarts提供的API文档，立马吓尿了太多可配置的属性了，任务的工期有限没办法去全部把所有的参数都整成类，在想想别人也肯定遇到我类似的问题。

google搞起，搜索java 现实Echarts 在开源中国中就找到大神已经对我的想法实现好了，简直是完美。

<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>3.0.0</version>
</dependency>

maven引用就可以使用了。接下来就是我们愉快的快速配置option类，接下来我的思路就是先统一风格，把所有公共option的属性先定义好，然后针对不同的图表进行定制

/**公用的Option参数
* @param json 图表数据
* @return
*/
public static Option getDefaultOption(JSONObject json){
Option option = new Option();
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line), Tool.restore, Tool.saveAsImage);
option.tooltip().trigger(Trigger.axis).axisPointer().setType(PointerType.shadow);
option.grid().left(3).right(4).bottom(3).containLabel(true);
option.dataZoom(new DataZoom().type(DataZoomType.inside).xAxisIndex(0));
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.setType(AxisType.category);
categoryAxis.setData(json.getJSONArray("F1"));
option.xAxis(categoryAxis);
option.yAxis(new ValueAxis().type(AxisType.value),new ValueAxis().type(AxisType.value));
return option;

}

然后看一个定制的图表

public String getGdpChangeOption(JSONObject json) {
option.legend("资本形成", "净出口","消费支出","GDP同比");
Bar bar1 = new Bar();
bar1.name("资本形成").stack("总量").type(SeriesType.bar).label().normal().show(true);
bar1.setData(json.getJSONArray("F2"));
Bar bar2 = new Bar();
bar2.name("净出口").stack("总量").type(SeriesType.bar).label().normal().show(true);
bar2.setData(json.getJSONArray("F3"));
Bar bar3 = new Bar();
bar3.name("消费支出").stack("总量").type(SeriesType.bar).label().normal().show(true);
bar3.setData(json.getJSONArray("F4"));
Line line = new Line();
line.name("GDP同比").type(SeriesType.line).yAxisIndex(0);
line.setData(json.getJSONArray("F5"));
option.series(bar1,bar2,bar3,line);
return JSONObject.toJSONString(option);
}

剩下的就简单了把返回的json格式的字符串传到页面，并且所有的图表都可以共用这个页面

var myChart = echarts.init(document.getElementById('myChart'));
//myChart.showLoading(); //预加载动画
option = $!option;
myChart.setOption(option);

图片就展现出来了，在做接下来的图表就有点无聊啦