echart图柱状图前后台写法

主要是后台查询数据放到json里的形式，和前台如何取出json

<td style="width:35%;padding:0px;">
                      <div id="qingTuiTJ" style="width: 100%;height:220px;"></div>
                      <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart22 = echarts.init(document.getElementById('qingTuiTJ'));
                
                        var option22 = {
                            title : {
                                text: '${yearMonth!''}清退统计',
                                subtext: '',
                                x:'right'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['超时清退','按时清退','尚未清退','无需清退']
                            },
                            series : [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: ['50%', '70%'],
                                    center: ['58%', '58%'],
                                    data:[],
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                
                        // 使用刚指定的配置项和数据显示图表。
                        myChart22.setOption(option22);
                        $(function(){
                            $.post("./countNumByMonth",{},function(result){
                                var nums=[];  
                                  $.each(result.obj,function(key,values){ //此处我返回的是list<String,map<String,String>>循环map  
                                      var obj = new Object();  
                                      obj.name = values.name;  
                                      obj.value = values.value;  
                                      nums.push(obj);  
                                   });
                                myChart22.setOption({
                                    series: [{
                                        data: nums
                                    }]
                                });
                            },"json");
                        });
                    </script>
                  </td>

 

后台代码:

@ResponseBody
    @RequestMapping(value = "/countNumByMonth", method = { RequestMethod.POST, RequestMethod.GET })
    public Json countNumByMonth(
            HttpServletRequest request, HttpServletResponse response, ModelMap model
            ){
        Json json = new Json();
        
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM");
        String yearMonth = sdf.format(new Date());
        json.setSuccess(true);
        List<Map<String,Object>> resultList = new ArrayList<Map<String,Object>>();
        Map<String,Object> map1 = new HashMap<String,Object>();
        EntityWrapper<GwdjIdeainfo> wrapper1 = new EntityWrapper<GwdjIdeainfo>();
        wrapper1.like("SI_SEND_TIME", yearMonth, SqlLike.RIGHT);
        wrapper1.eq("SI_STATE", "3");
        map1.put("name", "超时清退");
        map1.put("value", gwdjIdeainfoServiceImpl.selectCount(wrapper1));
        Map<String,Object> map2 = new HashMap<String,Object>();
        EntityWrapper<GwdjIdeainfo> wrapper2 = new EntityWrapper<GwdjIdeainfo>();
        wrapper2.like("SI_SEND_TIME", yearMonth, SqlLike.RIGHT);
        wrapper2.eq("SI_STATE", "2");
        wrapper2.where("SI_QTTYPE!='0'");
        map2.put("name", "按时清退");
        map2.put("value", gwdjIdeainfoServiceImpl.selectCount(wrapper2));
        Map<String,Object> map3 = new HashMap<String,Object>();
        EntityWrapper<GwdjIdeainfo> wrapper3 = new EntityWrapper<GwdjIdeainfo>();
        wrapper3.like("SI_SEND_TIME", yearMonth, SqlLike.RIGHT);
        wrapper3.eq("SI_STATE", "1");
        map3.put("name", "尚未清退");
        map3.put("value", gwdjIdeainfoServiceImpl.selectCount(wrapper3));
        Map<String,Object> map4 = new HashMap<String,Object>();
        EntityWrapper<GwdjIdeainfo> wrapper4 = new EntityWrapper<GwdjIdeainfo>();
        wrapper4.like("SI_SEND_TIME", yearMonth, SqlLike.RIGHT);
        wrapper4.eq("SI_STATE", "2");
        wrapper2.eq("SI_QTTYPE", "0");
        map4.put("name", "无需清退");
        map4.put("value", gwdjIdeainfoServiceImpl.selectCount(wrapper4));
        resultList.add(map1);
        resultList.add(map2);
        resultList.add(map3);
        resultList.add(map4);
        
        json.setObj(resultList);
        
        return json;
    }