echarts实例，前后台数据调用

第一步：testEcharts.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"";
%>

   
   
   
   
   
   

   

   
   
   
   
   
   

   
   
   

   
   

   
   

     

   

       

           

               

                   

option

                    <br>       option = {<br>         title : {<br>         text: '北京天融信有限公司人员信息',<br>         subtext: '纯属虚构'<br>     },<br>                    toolbox: {<br>                     show : true,<br>                     feature : {<br>                         mark : {show: true},<br>                         dataView : {show: true, readOnly: false},<br>                         magicType : {show: true, type: ['line', 'bar']},<br>                         restore : {show: true},<br>                          saveAsImage : {<br>         show : true,<br>         title : '保存为图片',<br>         type : 'png',<br>         lang : ['点击保存'] <br>     }<br>                     }<br>                 },<br>                 calculable : true,<br>                     tooltip: {<br>                         show: true<br>                     },<br>                     legend: {<br>                         data:['人员信息']<br>                     },<br>                     xAxis : [<br>                         {<br>                             type : 'category',<br>                           // data : ["衬衫","羊毛衫","球衣","运动鞋"]<br>                             data:(<br>                               xz()<br>                                     )<br>                         }<br>                     ],<br>                     yAxis : [<br>                         {<br>                             type : 'value'<br>                         }<br>                     ],<br>                     series : [<br>                         {<br>                             "name":"人员信息",<br>                             "type":"bar",<br>                             //"data":[4,6,33,111]//"" 0<br>                                 "data":(<br>                                   yz()<br>                                      // )<br>                                 )//data完毕<br>                         }<br>                     ]<br>                 };<br>        <br>                    
             

           

           

               

                555tytytuyu
               

              
    
               
               
               
               
               
               
               

                    刷 新
                    切换主题
                   

                   
               

           

       

       
       

   

   
   
    <%--
   
    --%>
   

 

第二步：调用后台此方法

 
 /**
  * testecharts
  * @throws IOException
  * @throws Exception
  */
 public String testEcharts() throws IOException {
  List queryList = userService.query(user);
  //PrintWriter writer=null;
  //for (User user : queryList) {
   //user.setName(user.getName());
   //String name = user.getName();
   //int num = user.getNum();
   //user.setName(user.get)
   //queryList.add(user);
  //}
 /* JSONArray json=null;
  try {
  //调用jsonAray.fromobject方法把array中的对象转换为json格式的数组
   json = JSONArray.fromObject(queryList);//得到的是json数据的数组
  String jsonString = json.toString();
  System.err.println("jsonString:"+jsonString);
  // 返回给前台页面
  
 
   writer = response().getWriter();
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  writer.println(json);
  writer.flush();
  writer.close();
  
  return null;
  
 }
 */
  // System.err.println(userList);
  Gson gson = new Gson();
  /**
   * //[{"id":1,"loginName":"admin","password":
   * "21232f297a57a5a743894a0e4a801fc3",
   * "name":"\u8d85\u7ea7\u7ba1\u7406\u5458","beginTime":{},"endTime":{}},
   * {"id":2,"loginName":"shen","password":
   * "81dc9bdb52d04dc20036dbd8313ed055"
   * ,"name":"shen","gender":"\u5973","phoneNumber"
   * :"","email":"","description":"","beginTime":{},"endTime":{}}]
   */
  String json = null;
  try {
   json = gson.toJson(queryList);
   System.err.println(json);

  } catch (Exception e) {
   e.printStackTrace();
  }

  PrintWriter out = response().getWriter();

  out.print(json);
  out.flush();
  out.close();
  return null;
}
}

页面显示情况如下