3、echarts 数据封装

项目要求做一个从汇总数据跳转到柱状图分项展示的功能，设计到两部分数据，一个是后台数据库分项统计，一个是统计结果封装成前端echarts要求的格式。
echarts文档示例都很齐全，可以直接上官网查询。第一次用，对于我的难点在于数据封装。
1、后台数据
比如 findByAcceptpolicy（按承保政策统计），返回List<Map<String, String>>格式的数据，其中ermtotalrequire.acceptpolicy就是要统计的结果，为了方便service层的处理，统一用countresult别名。

  <sql id="report_sql" >
    countresult, t2.* from ermtotalrequire join 
    (
      select ermuser.realname, t1.* from ermuser join (
        select ermusersheet.sheetid, ermusersheet.userid, ermuserproject.projectname 
        from ermusersheet join ermuserproject on (ermusersheet.userprojectid = ermuserproject.userprojectid)
      ) t1 on (ermuser.userid = t1.userid)
    ) t2 on (ermtotalrequire.sheetid = t2.sheetid) order by countresult desc
  </sql>

  <select id="findByAcceptpolicy" resultType="java.util.HashMap">
    select ermtotalrequire.acceptpolicy  
    <include refid="report_sql" />
  </select>
  
  <select id="findByNotaccept" resultType="java.util.HashMap">
    select ermtotalrequire.notaccept  
    <include refid="report_sql" />
  </select>

重点是service层的处理

// 组装echarts图标需要的数据对象Option
public Option makeChartObjectByParam(String param) {
    // 根据姓名，项目统计结果(1)
    List<Map<String, String>> resultList = new ArrayList<Map<String, String>>();
    Method[] methods = totalRequireDao.getClass().getMethods();(2)
    for(Method method : methods) {
        if(method.getName().startsWith("findBy")) {
            String methodName = "findBy" + param.substring(0, 1).toUpperCase() + param.substring(1);
            logger.info("methodName:" + methodName);
            if(methodName.equals(method.getName())) { 
                // 调用 findBy方法
                try {
                    resultList = (List<Map<String, String>>) method.invoke(totalRequireDao);
                } catch (IllegalAccessException | IllegalArgumentException | InvocationTargetException e) {
                    e.printStackTrace();
                }
            }
        }
    }
    logger.info("统计结果resultList为：" + resultList);
    Option option = new Option();(3)
    List<String> nameProjectList = new ArrayList<String>();
    Serie serie = new Serie();
    serie.setName("数量");
    serie.setType("bar");
    serie.setBarWidth("30");
    for(int i=0; i<resultList.size(); i++) {
        nameProjectList.add(resultList.get(i).get("REALNAME") + "-" + resultList.get(i).get("PROJECTNAME"));
        Object countObj = resultList.get(i).get("COUNTRESULT");
        // 设置柱状图每一项的高度(4)
        serie.getData().add(Integer.parseInt(countObj.toString()));
    }
    option.getSeries().add(serie);
    // 设置参数的X轴坐标
    option.getxAxis().setData(nameProjectList);
    return option;
}

说明：(1)返回数据无法映射到一个model对象，映射成为map是一个很好的选择，我很喜欢用这种方式。
resultList对应的查询结果长这样：

(2)这里用反射获取查询方法，原因是统计项达到20个左右，如果用if或switch，会有很多类似的分支，代码重复
(3)echarts用到的对象封装如下：

public class Option {
    private XAxis xAxis;   //x轴
    private List<Serie> series;  //柱状图集合
    
    public Option() {
        this.xAxis = new XAxis();
        this.series = new ArrayList<>();
    }
}

public class Serie {
    private String name;
    private String type;
    private String barWidth;
    private List<Integer> data;
    
    public Serie() {
        this.data = new ArrayList<>();
    }
}

public class XAxis {
    private List<String> data;
    
    public XAxis() {
        this.data = new ArrayList<>();
    }
}

(4)获取list中的数据，给柱状图每一项设置高度，给x轴设置文字说明

2、前端数据
js 整合静态数据和动态数据

<script type="text/javascript">
    
    $(function() {
        var myChart = echarts.init(document.getElementById('chart'));
        // 获取查询参数
        var param = $('#param').val();
        console.log('param:' + param);
        common.ajax({
            url: '<%=basePath %>data/showChartByParam/' + param,
            success : function(data) {
                var option = {
                    title: {
                        text: '分图表'
                    },
                    tooltip: {},
                    legend: {
                        data:['数量']
                    },
                    xAxis: {},
                    yAxis: {}, 
                    series : [
                        {
                            barWidth : 30
                        }
                    ]
                };
                console.log('data:' + data);
                console.log('option.xAxis:' + option.xAxis + ", option.series:" + option.series);
                // 对象拷贝
                $.extend(true, option, data);
                // 给整个图表赋值
                myChart.setOption(option);
                console.log('option.xAxis:' + option.xAxis + ", option.series:" + option.series);
            },
            type : 'GET'
        });
    });
     
    /**
     * 对jQuery的ajax方法的二次封装
     */
    var common = window.common || {};
    common.ajax = function(param) {
        var mergeParam = $.extend({
            timeout : 10000
        } , param , {
            complete : function(response) {
                var url = response.getResponseHeader("url");
                if(url) {
                    location.href = url;
                } else {
                    if(param.complete && typeof param.complete == "function") {
                        param.complete();
                    }
                }
            }
        });
        $.ajax(mergeParam);
    }
    
</script>

引入官网提供的echarts文件，设置div

<script src="<%=basePath %>js/echarts.js"></script>
<!--图表所在的div-->
<div id="chart" style="width: 800px;height:400px;"></div>

最终生成效果图：