天天看点

echart图柱状图前后台写法主要是后台查询数据放到json里的形式,和前台如何取出json

主要是后台查询数据放到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;

    }