SSM框架中生成报表（柱状图，饼状图）

1.功能介绍

在一个页面中有员工姓名查询，根据时间区间进行查询，分组根据组员名字，年，月，日进行查询潜在用户的数量。

2.qo类

引入时间插件，前两个属性是开始时间，结束时间，第三个是根据员工名称进行查询，由于是第一次进入，给他一个初始值，让第一次进页面的时候显示不出错误

public class AnalyzerQo extends BaseQo{
    @DateTimeFormat(pattern = "yyyy-MM-dd")
   private Date beginDate;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
   private Date endDate;

   private String  groupType="e.name";

}

3.service层

传qo的值，pageNum,pageSize 分页插件需要的值

public interface IAnalyzerService {

    PageInfo<AnalyzerResultBean> selectAnalyzerByGroup(AnalyzerQo qo, int pageNum, int pageSize );

}

4.接口实现

pagehelper中可以传第三个参数，orderby 会加入到isql语句中进行排序，如果是第一次进入，orderby的值为qo中grouptype的默认字段，进行拼接，结果为e.name desc
如果不是e.name就说明我在前端点击查询的时候条件进行改变，在进行新的拼接，进行传值

 public PageInfo<AnalyzerResultBean> selectAnalyzerByGroup(AnalyzerQo qo, int pageNum, int pageSize) {
        String orderby=qo.getGroupType()+" desc";
        if("e.name".equals(qo.getGroupType())){
            orderby="num desc";
        }
       PageHelper.startPage(pageNum,pageSize,orderby);
        List<AnalyzerResultBean> list = customerMapper.selectAnalyzerByGroup(qo);
        return new PageInfo<>(list);
    }

5.sql语句

由于是动态sql语句，${groupType} 为从前端点击具体查询条件，并且根据条件查询所影响的行数设置为num，在前端具体显示，使用内连接，使两张表连接起来通过顾客表中的id和员工表中的id进行匹配，现在获取到的使员工对应的客户，具体条件使status的值为0，解释就是潜在用户，然后是一个name和tel的模糊查询，日期的查询，注意日期的查询不能判断为不等于’ '，会报错，最后根据前端传来的信息进行分组

<select id="selectAnalyzerByGroup" resultType="cn.wolfcode.rbac.analyzer.AnalyzerResultBean">
      select ${groupType} name,count(1) as num
      from customer c
      left outer join employee  e on c.seller_id=e.id
      where c.status=0
      <if test="keyword!=null and keyword!=''">
           and 	e.name like concat('%',#{keyword},'%')
      </if>
      <if test="beginDate!=null ">
        and c.input_time &gt;=#{beginDate}
      </if>
      <if test="endDate!=null ">
        and c.input_time &lt;=#{endDate}
      </if>
        group by ${groupType}
    </select>

6.controller层

正常查询

public String list(
            @RequestParam(value = "currentPage",defaultValue = "1") int currentPage,
            @RequestParam(value = "pageSize",defaultValue = "3") int pageSize,
            @ModelAttribute("qo") AnalyzerQo qo,
            Model model){
        PageInfo<AnalyzerResultBean> pageInfo = analyzerService.selectAnalyzerByGroup(qo,currentPage,pageSize);
        model.addAttribute("result",pageInfo);
        return "customerReport/list";
    }

7.页面显示

第一次进去的值是value=e.name与后端的service层进行验证显示
当点击年月日的时候，会把相对应的value值传输到sql语句中进行动态获取

 <div class="form-group">
         <label for="status">分组类型:</label>
         <select class="form-control" id="groupType" name="groupType">
         <option value="e.name">员工</option>
          <option value="DATE_FORMAT(c.input_time, '%Y')">年
</option>
<option value="DATE_FORMAT(c.input_time, '%Y-%m')"> 月
</option>
<option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">日
  </option>
 </select>
 <script>                          
$("#groupType").val("${qo.groupType!}")
</script>
</div>

8.柱状图controller层

由于使用的是插件，只需要从后端设置具体的值，插件里边对应的字段相同就可以

PageInfo<AnalyzerResultBean> pageInfo = analyzerService.selectAnalyzerByGroup(qo,1,999);
         //groupTypeName
         String  groupTypeName="";
         switch (qo.getGroupType()){
             case "e.name":
                 groupTypeName="员工";
                 break;
             case "DATE_FORMAT(c.input_time, '%Y')":
                 groupTypeName="年";
                 break;
             case "DATE_FORMAT(c.input_time, '%Y-%m')":
                 groupTypeName="月";
                 break;
             case "DATE_FORMAT(c.input_time, '%Y-%m-%d')":
                 groupTypeName="日";
                 break;
         }
        //根据获取grouptype值，设置属性，并为其赋值，在页面中进行显示
         model.addAttribute("groupTypeName",groupTypeName);
         //xList
         List<String> xList=new ArrayList<>();
         //yList
         List<Integer> yList=new ArrayList<>();
         //pageinfo为所查到的值，遍历给柱状图的横纵坐标进行赋值
         //一个为名称，一个为num
         for (AnalyzerResultBean analyzerResultBean : pageInfo.getList()) {
             xList.add(analyzerResultBean.getName());
             yList.add(analyzerResultBean.getNum());
         }
         ObjectMapper objectMapper=new ObjectMapper();
       //并且设置属性  model.addAttribute("xList",objectMapper.writeValueAsString(xList));
         model.addAttribute("yList",objectMapper.writeValueAsString(yList));
        return "customerReport/listByBar";
    }

9.柱状图页面

给分组类型，横纵坐标进行具体赋值即可

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '潜在客户报表',
                subtext: "分组类型:${groupTypeName}"
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['潜在客户数']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ${xList!}
                    /*['孙总','钱二明',"赵一明","王五"]*/
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '潜在客户数',
                    type: 'bar',
                    data: ${yList!},  //[8,15,30,3]
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>