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

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

Echarts第二讲-JAVA实现

猜你喜欢