echart通过ajax获取数据

通过ajax获取后台数据

---

Controller层：

@RequestMapping(value="/index5",method=RequestMethod.POST)
    public @ResponseBody Map<String, Object> echartsIndex51(){
        Map<String, Object> map=new HashMap<>();

        List<Echarts> list=echartsService.getdata();
        List<Object> category=new ArrayList<>();
        List<Object> man=new ArrayList<>();
        List<Object> woman=new ArrayList<>();

        for (int i = 0; i < list.size(); i++) {
            category.add(list.get(i).getProvince_id());
            man.add(list.get(i).getMan());
            woman.add(list.get(i).getWoman());
        }
        map.put("category", category);
        map.put("man", man);
        map.put("woman", woman);        
        map.put("result", "success");       
        return map;
    }

---

js：

$(function() {
    var btn = $("#getdata");
    var dataSize;
    // 样式
    var mychart = echarts.init(document.getElementById('main'));
    mychart.setOption({
                title : {
                    text : '各省男女人数统计'
                },
                legend : {},
                xAxis : {
                    type : 'category',
                    data:[]
                },
                yAxis : {},
                // tooltip:提示框组件
                tooltip : {
                    trigger : 'axis',
                    axisPointer : {
                        type : 'cross',
                        crossStyle : {
                            color : 'red'
                        },
                        lineStyle : {
                            color : 'red'
                        }
                    }
                },
                // toolbox:工具栏
                toolbox : {
                    emphasis : {},
                    show : true,
                    showTitle : true,
                    feature : {
                        saveAsImage : {},// 保存为图片
                        restore : {},// 还原
                        dataView : {},// 数据视图
                        magicType : {
                            type : ['line', 'bar']
                        },
                        // 数据缩放
                        dataZoom : {}
                    }
                },
                series : [
                        {
                            name:'男',
                            type : 'bar',
                            data:[]
                        }, {
                            name:'女',
                            type : 'bar',
                            data:[]
                        }

                ]

            });
        // 异步获取数据
         btn.click(function(){
         $.post('/echart/index5',function(data){
            mychart.setOption({
                xAxis : {
                    type : 'category',
                    data:data.category
                },
                series : [
                        {
                            name:'男',
                            type : 'bar',
                            data:data.man
                        }, {
                            name:'女',
                            type : 'bar',
                            data:data.woman
                        }
                ]
            });
         },'json');
         });
    });