ECharts初识与Echarts-java类库应用

　　　ECharts，缩写来自Enterprise Charts，商业级数据图表，来自百度的一款开源、功能强大的数据可视化产品，从官网的example中可以看到能够实现目前见到的各种图形报表，并且带有详细的代码和图形demo：http://echarts.baidu.com/doc/example.html

　　不过我们通常不会像demo中那样绑定死数据，我们通常需要从数据库中获取数据，再展示出来，我们先看绑定静态数据的demo，通过代码分析如何绑定动态数据。

绑定静态数据（官网）

以条形图为例：

JS绑定数据

　　其中最关系的就是其中的option如何动态加载数据。其实无非就是拼串，我们既可以在前台去拼也可以在后台拼接成json串返回页面。如果整个项目只需要一种图表，我们拼一拼也无所谓，但是要应对以后的图形变化，或者新增图形，每种图形都拼一遍肯定是麻烦，也不符合面向对象的特点，既然如此，我们就需要把option变成对象去管理。
　　个人对Echarts其中各个图表的option不是很熟，而网上也已经有了很成熟的类库，简单学习即可，源码：
　　　http://git.oschina.net/free/ECharts/tree/master/src/main/java/com/github/abel533/echarts/

下面以springmvc框架来再次实现动态数据加载

controller

    @RequestMapping("/example")  
    public  class example{
    @ResponseBody  
    public WebResult getOption() throws Exception {  
        WebResult result = new WebResult();  
        try {  
            Option option = injuryService.selectRemoveCauses();  
            result.isOK();  
            result.setData(option);  
        } catch (BusinessException e) {  
            result.setException(e);  
        }  
        return result;  
    } 

Service逻辑处理

Public class exampleService{
    @Override  
    public Option getOption() throws BusinessException {  
        //查询前20  
        PageHelper.startPage(1, 20, false);  
        //数据库查询获取统计数据  
        List> list = exampleDao.getOption();  
        //为了数据从大到小排列，这里需要倒叙  
        Collections.sort(list, new Comparator>() {  
            @Override  
            public int compare(Map o1, Map o2) {  
                return -1;  
            }  
        });  
        //创建Option  
        Option option = new Option();  
        option.title("平台交易额").tooltip(Trigger.axis).legend("2015年");  
        //横轴为值轴  
        option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));  
        //创建类目轴  
        CategoryAxis category = new CategoryAxis();  
        //柱状数据  
        Bar bar = new Bar("2015年");  
        //循环数据  
        for (Map objectMap : list) {  
            //设置类目  
            category.data(objectMap.get("NAME"));  
            //类目对应的柱状图  
            bar.data(objectMap.get("TOTAL"));  
        }  
        //设置类目轴  
        option.yAxis(category);  
        //设置数据  
        option.series(bar);  
        //返回Option  
        return option;  
    }  
}

Dao数据访问

代码略，从数据库获取需要的数据即可

Jsp页面

不敢哪种图表，其中变化的就是option的参数，学会了一种，其他的也就很容易实现。

Echarts是一个开源的图形报表，Echarts-java类库也是一个开源的类库，开源使他们发展的很快，也更有益于我们的应用和开发。