Echars+Ajax+SpringMVC获取动态数据

Echars使用步骤：

第一步、引入Echars-all.js

 <script src="${pageContext.request.contextPath }/js/echarts-all.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.2.min.js"></script>

第二步获取Echars容器对象并Ajax获取数据、

   <div id="main" style="width: 1300px;height:700px;"></div>//给Echars一个容器  

/**Ajax获取数据*/

   var myChart = echarts.init(document.getElementById('main'));

 $.ajax({
         type : "post",
         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "${pageContext.request.contextPath }/show/lcd.do?method=searchCityDoThingNumber",    //请求发送到相应url处
         data : {flag:flag},
         dataType : "json",        //返回数据形式为json
         success : function(result) {
        	 
        	 
             //请求成功时执行该函数内容，result即为服务器返回的json对象
               if (result) {
                    for(var i=0;i<result.length;i++){       
                       names.push(result[i].deptname);    //挨个取出类别并填入类别数组
                     }
                    for(var i=0;i<result.length;i++){       
                        nums.push(result[i].casenum);    //挨个取出数量并填入数量数组
                      }
                    
               
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                    	title: {
                	        x: 'center',
                	        text: ''
                	 
                	    },
                    	
                    	tooltip : {
                            trigger: 'axis'
                        }, 
                        // legend: {
                        //	 x: 'right',
                         //   data:['办件量' /* ,'降水量' */ ]
                       // }, 
                       /*  toolbox: {//工具栏
                            show : true,
                            feature : {
                               // mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                myTool : { //自定义Echars 工具栏工具事件 
                                    show : true,  
                                    title : '上一周数据',  
                                    icon : 'image://http://echarts.baidu.com/images/favicon.png',  
                                    onclick : function (){  
                                    	rediret(); //点击事件
                                    }  
                                 },  
                                saveAsImage : {show: true}
                            }
                        }, */
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                show: false,
                                data :names,
                                axisLabel:{  
                                    interval:0,//横轴信息全部显示  
                                    rotate:-30,//-30度角倾斜显示  
                               } 
                            }
                        ],
                        
                        grid: { // 控制图的大小，调整下面这些值就可以，
                        	            /*  x: 40,
                        	             x2: 100, */
                        	             x:'10%',
                        	             x2: '10%',
                        	             y2:'20%'// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                        	    },
                        yAxis : [
                        /*     {
                                type : 'value',
                                splitArea : {show : true}
                            } */
                        ], 
                        series : [
                            {
                                name:'办件量',
                                type:'bar',
                                
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            // build a color map as your need.
                                            var colorList = [
                                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                               '#CDB79E','#ADFF2F','#B4EEB4','#90EE90','#4EEE94'
                                            ];
                                            return colorList[params.dataIndex]
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: '{b}\n{c}'
                                        }
                                    }
                                },
                                
                                
                                
                                
                                data:nums
                            }/* ,
                            {
                                name:'降水量',
                                type:'bar',
                                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                            } */
                        ]
                    });
                    
             }  
         
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
         //alert("图表请求数据失败!");
         myChart.hideLoading();
         }
    })
第三步、SpringMVC接受数据,并返回数据

@RequestMapping(params = "method=searchCityDoThingNumber")
	public void searchCityDoThingNumber(String flag,Model model,HttpServletResponse response,HttpServletRequest request){
		
		String logo  =request.getParameter("flag");
		List<CityDoThingNumber> departmentList=cityDoThingNumberService.getCityDoThingNumber(logo);//获取所有区域	
	
		ObjectMapper mapper = new ObjectMapper();//一个工具类可以转将List<Object>转成json		 
		 String json;
		try {
			json = mapper.writeValueAsString(departmentList);//可以转将List<Object>转成json	

			response.getWriter().write(json);
			System.out.println(json);
		} catch (Exception e) {
			
			e.printStackTrace();
		}
		
	
	}