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

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