echarts 柱状图和饼状图动态获取后台数据

运用echarts来实现图表

1.首先下载echarts包  http://echarts.baidu.com/echarts2/doc/example.html，在这里我下载的是

 

2.将echarts包放到项目中，这是我在项目中的路径

3.柱状图的动态获取

首先 1）需要引入：

1  
2   
3 

      2）html，为柱状图设置容器

1 
2       

3   

     3）js

红色部分的为用ajax来获取动态数据

 4）后台实现

 1     @RequestMapping(params="getNum", produces = "application/json")
 2     public void getNum(HttpServletRequest request, HttpServletResponse response)
 3             throws ServletException, IOException {
 4         
 5         response.setContentType("text/html; charset=utf-8");
 6         List list=new ArrayList();
 7         list=landUserBiz.findAll();
 8         JSONArray jsonArray = JSONArray.fromObject( list );//转化成json对象
 9            PrintWriter out=response.getWriter();
10            out.println(jsonArray);
11            out.flush();
12            out.close();
13             
14     }

4.饼状图的实现

1）js

  1    

2)后台

 1 @RequestMapping(params="getCount", produces = "application/json")
 2     public void getCount(HttpServletRequest request, HttpServletResponse response)
 3             throws ServletException, IOException {
 4         
 5         response.setContentType("text/html; charset=utf-8");
 6         List list=new ArrayList();
 7         List  listCont=new ArrayList();        
 8         List listName=new ArrayList();
 9         
10         list=landUserBiz.findAll();
11        int count1=0,count2=0,count3=0,count4=0,count5=0;
12        
13         for(LandUser lu:list){
14             
15             if(lu.getLandScmj()>0&&lu.getLandScmj()<10000)
16                 count1++;        
17             else if(lu.getLandScmj()>10000&&lu.getLandScmj()<20000)            
18                 count2++;                
19             else if(lu.getLandScmj()>20000&&lu.getLandScmj()<30000)            
20                 count3++;            
21             else if(lu.getLandScmj()>30000&&lu.getLandScmj()<40000)
22                 count4++;
23             else 
24                  count5++;
25         }
26         
27         listCont.add(count1);
28         listCont.add(count2);
29         listCont.add(count3);
30         listCont.add(count4);
31         listCont.add(count5);
32         listName.add("0-10000");
33         listName.add("10000-20000");
34         listName.add("20000-30000");
35         listName.add("30000-40000");
36         listName.add("40000以上");
37     
38         PrintWriter out=response.getWriter();
39            JSONObject jsonData=new JSONObject();
40            jsonData.put("listCont",listCont);
41            jsonData.put("listName",listName);         
42            out.println(jsonData);
43             out.flush();
44             out.close();
45     }

成果显示

柱状图：

 

饼状图：