基于ssm框架正式环境echarts图表的使用

一、介绍

关于echarts的介绍及测试环境用法请看：echarts图表的用法。下面介绍的是echarts正式环境的用法，在正式环境中需要从后台数据库读取数据并转化为echarts各种图表的option中需要的数据格式，把转化后的数据放到option中相应的属性上才能实现真实的效果。由于根据echarts官网解释echarts图表的option是配置数据的万能接口。所以在使用的时候注意到图表变化是通过更新option中的数据并重新设置option来实现的，所以把option和数据格式化抽取到一个文件中，把后台读取的数据格式化并放到option中相应的位置上即可。

二、使用

下面将个人在开发项目实现各个echarts图表的一般流程记录下来，以备以后可以使用。

该项目使用的是spring、springmvc、mybatis框架，前端使用jquery，echarts图表接入真实数据一般需要根据url调用后台查询数据库中的数据。

新建一个web工程ssmec

准备：配置ssm框架，配置echarts相关文件及jquery文件请看：echarts图表的使用，由于在《echarts图表的使用》中描述了基本的用法，所以这里我将《echarts图表的使用》创建的testec中的ui复制过来并将不需要的删除，把testec中的ecjsp中的文件复制到ssmec中的WEB-INF/jsp下并把不需要的文件删掉。

0、控制层文件名：TestEc，文件头注解@RequestMapping("tec")，构造数据在这个类EcDtUtils中实现；图表option和数据格式化方法放到cfgopts.js中。

1、实现柱状图Bar

(1)、写后台action方法及返回json数据的方法

action方法：

 @RequestMapping("/toBar")  
    public ModelAndView toBar(HttpServletRequest request) {  
        return new ModelAndView("ecjsp/testBar");  
    }

返回json数据方法：

@RequestMapping("/barData")
    @ResponseBody
    public List<HashMap<String, Object>> barData(HttpServletRequest request) {
        /*
        测试数据，正式环境从数据库读取
         */
        List<HashMap<String, Object>> bList = EcDtUtils.getBarRndVal();
        return bList;
    }

说明：这里只是模拟从后台读取数据，在正式使用的时候是从数据库读取的，我这里在一个类EcDtUtils中写一个方法构造数据，具