一、问题描述：
统计各个类别的文章总数，以柱状图表示。
二、实现
（1）首先根据sql语句得到每一种类型文章数目统计，并存放在表中。如下所示：
（2）在eclipse中编写代码实现柱状图：
实体层：
1 public class BarBean { 2 public String name; 3 4 public String getName() { 5 return name; 6 } 7 public void setName(String name) { 8 this.name = name; 9 } 10 public Integer getNum() { 11 return num; 12 } 13 public void setNum(Integer num) { 14 this.num = num; 15 } 16 public Integer num; 17 }
dao层：
1 public class BarDao { 2 public ArrayList<BarBean> select_all(){ 3 4 Connection conn = null; 5 Statement stmt=null; 6 ResultSet rst = null; 7 try{ 8 conn = Dbutil.getConnection(); 9 stmt = conn.createStatement(); 10 String sql = "select * from bar"; 11 rst = stmt.executeQuery(sql); 12 ArrayList<BarBean> array = new ArrayList<BarBean>(); 13 while(rst.next()) 14 { 15 BarBean bar = new BarBean(); 16 bar.setName(rst.getString("name")); 17 bar.setNum(rst.getInt("num")); 18 array.add(bar); 19 } 20 stmt.close(); 21 rst.close(); 22 return array; 23 24 }catch(SQLException e){ 25 System.out.println("Error"); 26 return new ArrayList<BarBean>(); 27 } 28 } 29 30 }
servlet层：
1 public class Barservlet extends HttpServlet { 2 private static final long serialVersionUID = 1L; 3 BarDao dao=new BarDao(); 4 public void setdata(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 5 request.setCharacterEncoding("utf-8"); 6 response.setContentType("text/html;charset=UTF-8"); 7 JSONArray json=new JSONArray(); 8 List<BarBean> list = dao.select_all(); 9 for(int i=0;i<list.size();i++) { 10 JSONObject ob=new JSONObject(); 11 ob.put("name", list.get(i).getName()); 12 ob.put("num", list.get(i).getNum()); 13 json.add(ob); 14 } 15 System.out.println(json.toString()); 16 PrintWriter out = response.getWriter(); 17 //out.write("[120, 200, 150, 80, 70, 110, 130]"); 18 System.out.println(list.size()); 19 response.getWriter().write(json.toString()); 20 } 21 /** 22 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 23 */ 24 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 25 // TODO Auto-generated method stub 26 request.setCharacterEncoding("utf-8"); 27 String method=request.getParameter("method"); 28 if(method.equals("setdata")) { 29 try { 30 setdata(request,response); 31 } catch (ServletException e) { 32 e.printStackTrace(); 33 } catch (IOException e) { 34 e.printStackTrace(); 35 } 36 } 37 38 } 39 40 /** 41 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 42 */ 43 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 44 doGet(request, response); 45 } 46 47 }
jsp页面：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <script src="echarts.js"></script> 8 <script src="js/jquery.min.js"></script> 9 <body> 10 <div id="main" style="height:500%;"></div> 11 <button onclick="getdata()">点击</button> 12 <div id="main" style="height:500%;"></div> 13 </body> 14 <script> 15 var namedata= new Array(0); 16 var numdata= new Array(0); 17 function getdata(){ 18 var url = "Barservlet?method=setdata&randnum=" + Math.random(); 19 $.ajax({ 20 type: "get", 21 url: url, 22 data: [], 23 dataType: "json", 24 success: function(result){ 25 fenli(result) 26 showbar() 27 28 }, 29 error: function(){ 30 alert("错误"); 31 } 32 }); 33 } 34 function showbar() { 35 var chartDom = document.getElementById('main'); 36 var myChart = echarts.init(chartDom); 37 var option; 38 39 option = { 40 title: { 41 text: '各类别文章总数', 42 }, 43 xAxis: { 44 type: 'category', 45 data: namedata 46 }, 47 yAxis: { 48 type: 'value' 49 }, 50 series: [ 51 { 52 data:numdata, 53 type: 'bar', 54 showBackground: true, 55 backgroundStyle: { 56 color: 'rgba(180, 180, 180, 0.2)' 57 } 58 } 59 ] 60 }; 61 62 option && myChart.setOption(option); 63 } 64 function fenli(data){ 65 for(i in data){ 66 namedata.push(data[i].name) 67 numdata.push(data[i].num) 68 } 69 } 70 </script> 71 </html>
三、结果展示
