用echarts实现一个柱状图（前后台源码）

后台代码
-------------------------controller-------------------------------------
/**
     * <p>人员结构-政治面貌</p>
     * @param request
     * @param response
     * @return
     */
    
    @RequestMapping(value ="zzmm.do")
    public String getZzmm(HttpServletRequest request, HttpServletResponse response) {
        try {
            HashMap2JsonWrite(response, szdwService.getZzmmResult(request));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
---------------------controller调用的方法--------------------------------------
public void HashMap2JsonWrite(HttpServletResponse response, HashMap<String, Object> map) throws IOException{
        String result = Constants.HashMap2Json(map);
        response.setCharacterEncoding("UTF-8");
        response.getWriter().print(result);
        response.getWriter().close();
    }
     /*
     * <p>人员结构-政治面貌</p>
     * @param request
     * @return
     */
-------------------------service接口及实现类-----------------------------------
    HashMap<String, Object> getZzmmResult(HttpServletRequest request);

    @Override
    public HashMap<String, Object> getZzmmResult(HttpServletRequest request) {
        HashMap<String,Object>ret = new HashMap<String,Object>();
        HashMap<String,Object>param = new HashMap<String,Object>();
        String title="教职工政治面貌";
        String ident="zgmm";
        List<OptionDataModel> xmList = szdwMapper.getZzmmData(param);
        OptionModel optionModel=CreatePublicOptionUtil
                .makeBarOption(title, xmList, null, ident,
                true, 0, false, true, true, true, "人", null, null);
        optionModel.getOption().grid().top("15%").bottom("38%");
        ret.put("option",GsonUtil.format(optionModel.getOption()));
        return ret;
    }

---------------------------图表工具类-----------------------------------------

 @SuppressWarnings("rawtypes")
    public static OptionModel makeBarOption(String title,List<OptionDataModel> modelList,List<String> oplengendListNew, String type,
            Boolean xMandatoryDisplay,Integer angleRotation,Boolean isXyExchange,Boolean isStack, Boolean numFlag,
            Boolean isNumformat, String axisName,String tjfs,String addCondition) {
        
        OptionModel optionModel = new OptionModel();
        
        Option option = new Option();
        // 设置title
        option.title().setX("left");
        option.title().setY("10");
        option.title(title);
        // 设置坐标系网格
        option.grid().y("70").y2("90").containLabel(true);
        // 设置悬浮提示框
        option.tooltip().trigger(Trigger.axis);
        option.tooltip().axisPointer().type(PointerType.line);
        // 设置工具箱,切换线性，柱状图
        /*option.toolbox().show(true).feature(Tool.saveAsImage,Tool.myDetail)
            .padding(10, 0, 5, 5);*/
        option.setMyIdent(type);

        // 设置图例
        List<String> oplengendList = new ArrayList<String>();

        List<String> categoryAxisList = new ArrayList<String>();

        List<String> dataList = new ArrayList<String>();

        LinkedHashMap<String, String> xAxisMap = new LinkedHashMap<String, String>();

        if (modelList.size() > 0){
            for (OptionDataModel xm : modelList) {
                Boolean flag = true;
                if (oplengendList.size() >= 1) {
                for (int i = 0; i < oplengendList.size(); i++) {
                    if (oplengendList.get(i).equals(xm.getThreeAxis())) {
                    flag = false;
                    }
                }
                }
                if (flag && xm.getThreeAxis() != null) {
                oplengendList.add(xm.getThreeAxis());
                }
        
                if (!StringUtils.isEmpty(xm.getTwoAxis())
                    && StringUtils.isEmpty(xAxisMap.get(xm.getTwoAxis()))) {
                xAxisMap.put(xm.getTwoAxis(), xm.getTwoAxis());
                }
            }
            
            Iterator iter = xAxisMap.entrySet().iterator();
        
            while (iter.hasNext()) {
                Map.Entry entry = (Map.Entry) iter.next();
                categoryAxisList.add(entry.getKey().toString());
            }
        }
        // 设置类目轴 x轴
        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.data(categoryAxisList.toArray());
        //是否强制显示x轴标签
        if(xMandatoryDisplay){
            categoryAxis.axisLabel().interval(0);
        }
        //x轴标签是否旋转 旋转的角度
        if(angleRotation != null){
            categoryAxis.axisLabel().setRotate(angleRotation);
        }
        categoryAxis.boundaryGap(true);
    
        if(oplengendListNew != null && oplengendListNew.size() > 0) {
            oplengendList = oplengendListNew;
        }
        String serviceName= "总数";
        if (numFlag && oplengendList.size() > 0) {
            oplengendList.add(serviceName);
        }
    
        // 设置值轴
        ValueAxis valueAxis = new ValueAxis();
        valueAxis.splitLine().show(false);
        valueAxis.name(axisName);
        valueAxis.axisLine().lineStyle().width(1);
        //xy轴互换
        if(isXyExchange){
            valueAxis.position("top");
            option.xAxis(valueAxis);
            option.yAxis(categoryAxis);
        }else{
            option.xAxis(categoryAxis);
            option.yAxis(valueAxis);
        }
        
        if (modelList == null || modelList.size() < 1){
            optionModel.setOption(option);
            return optionModel;
        }
    
        // 默认设置饼图
        List<Series> barList = new ArrayList<Series>();
        
        // 增加折线图series
        for (int i = 0; i < oplengendList.size(); i++) {
            if (!serviceName.equals(oplengendList.get(i))) {
                Bar bar = new Bar(oplengendList.get(i));
                bar.type(SeriesType.bar);
                bar.barMaxWidth(barMaxWidth);
        
                dataList = new ArrayList<String>();
    
                for (int j = 0; j < categoryAxisList.size(); j++) {
        
                    for (OptionDataModel xm : modelList) {
        
                        if (!StringUtils.isEmpty(xm.getTwoAxis())
                            && !StringUtils.isEmpty(categoryAxisList.get(j))
                            && !StringUtils.isEmpty(xm.getThreeAxis())
                            && !StringUtils.isEmpty(xm.getNum())
                            && xm.getTwoAxis().equals(categoryAxisList.get(j))
                            && xm.getThreeAxis().equals(oplengendList.get(i))
                            && !serviceName.equals(categoryAxisList.get(j))) {
                            
                            dataList.add(xm.getNum());
                            //添加查询条件
                            setQueryCriteria(type, tjfs, xm, addCondition);
                        }
                    }
                    if (dataList.size() < j + 1) {
                        dataList.add("0");
                    }
                }
    
                // 叠加图显示，对于同一列叠加图的stack相同
                if (!isStack) {
                    bar.stack(i + "");
                } else {
                    bar.stack("1");
                }
                bar.data(dataList.toArray());
                bar.barCategoryGap("40%");
                barList.add(bar);
            }
        }
    
        // 增加总数折线图series
        if (numFlag) {
            Bar lineBar = new Bar(serviceName);
            lineBar.stack("zxmc");
            lineBar.type(SeriesType.line);
    
            List<String> lineDataList = new ArrayList<String>();
    
            for (String xd : categoryAxisList) {
    
                float num = 0;
    
                for (OptionDataModel xm : modelList) {
                    if (xd.equals(xm.getTwoAxis())) {
                    num += Float.parseFloat(xm.getNum());
                    }
                }
                if(isNumformat){
                    lineDataList.add((int)num+ ""); 
                }else{
                    lineDataList.add(num + "");
                }
                num = 0;
            }

            lineBar.data(lineDataList.toArray());
            lineBar.itemStyle().normal().color("rgb(255, 134, 26)");
            lineBar.itemStyle().normal().label().position("top").show(true);
            barList.add(lineBar);
        }

        option.series(barList);
    
        option.legend(oplengendList.toArray());
        option.legend().x("center").y("bottom");
        
        optionModel.setOption(option);
        //列表头 为 图表横轴数据
        optionModel.setCategoryAxisList(categoryAxisList);
        //行表头 为 图表图例数据
        if(numFlag) oplengendList.remove(oplengendList.size() - 1);
        optionModel.setYxList(oplengendList);
         //数据源（带条件）
        optionModel.setDataList(modelList);

        return optionModel;
    }
----------------dao层接口---------------------------
    List<OptionDataModel> getZzmmData(HashMap<String, Object> param);
-----------------sql语句----------------------------
<select id="getZzmmData" parameterType="HashMap" resultType="OptionDataModel">
        SELECT RYLBMC AS twoAxis, COUNT(*) AS num, ZZMMMC AS threeAxis
        FROM V_JZG_ZCJB WHERE (dqztm = '11' or dqztm = '04')
        GROUP BY ZZMMMC, RYLBMC
    </select>
前台
------------------------js页面--------------------------------------------------
var ZzmmEchart =echarts.init(document.getElementById('zzmm_echarts'));
$(function(){
    zzmm();
});

/**
 * 教职工政治面貌
 */
function zzmm(){
    $.post("zzmm.do",function(data, textStatus, jqXHR){
        var obj = eval('(' + data + ')'); 
        ZzmmEchart.clear();  
        ZzmmEchart.setOption(eval('(' + obj.option + ')'));  
    });
}
-----------前台jsp页面---------------------
<div class="mui-table-view">
    <div class="mui-table-view-cell">
        <p class="sm-title"><span>政治面貌</span></p> 
        <div class="chart" id="zzmm_echarts" style="height:500px"></div>
    </div>
</div>
<script type="text/javascript" src="static/js/szdw/ryjgIndex.js"></script>