EchartsTest --- Echarts 的 servlet 实现动态获取数据练习

来源：互联网发布：盘古ios9.2 for mac 编辑：程序博客网时间：2024/06/07 08:31

/**

servlet的内容

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

public class EchartsServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
       throws ServletException, IOException {

   Dao dao = new DaoImp();

   List<Map<String, Object>> list = dao.query();
   List<Map<String, Object>> list1 = dao.queryLI();

   List<String> chs = new ArrayList<String>();
   HashMap hashMap = new HashMap();




   for (Map<String, Object> map : list) {
       chs.add((String) map.get("name"));
   }

//转换为JSON格式数据

   System.out.println("=================="+(new Gson().toJson(chs)));
   System.out.println("=================="+(new Gson().toJson(list1)));


   req.setAttribute("tt", "123456");
   req.setAttribute("len", new Gson().toJson(chs));
   req.setAttribute("xiam", new Gson().toJson(list1));
   req.getRequestDispatcher("index.jsp").forward(req, resp);

}

}

/**

对数据库的数据查询方式

    @Override
   public List<Map<String, Object>> query() {
       String sql = "select t.cls_id ,count(*) as value,p.cls_name as name from t_user_info t,t_class p where t.cls_id=p.cls_id group by t.cls_id";
       return BaseDAO.doDQL(sql);
   }

   @Override
   public List<Map<String, Object>> queryLI() {
       String sql = "select count(*) as value,p.cls_name as name from t_user_info t,t_class p where t.cls_id=p.cls_id group by t.cls_id";
       return BaseDAO.doDQL(sql);
   }

/**

jsp的书写

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ECharts</title>

<script src="js/echarts.common.min.js"></script>
<script language="JavaScript" src="js/jquery.js"></script>
<script type="text/javascript">
   // 基于准备好的dom，初始化echarts实例
   $(function() {

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

       // 指定图表的配置项和数据
       option = {
           title : {
               text : '学员所在班级人数比重',
               subtext : '纯属虚构',
               x : 'center'
           },
           tooltip : {
               trigger : 'item',
               formatter : "{a} <br/>{b} : {c} ({d}%)"
           },
           legend : {
               orient : 'vertical',
               left : 'left',
               data : ${len},
           },
           series : [ {
               name : '访问来源',
               type : 'pie',
               radius : '55%',
               center : [ '50%', '60%' ],
               data : ${xiam},
               itemStyle : {
                   emphasis : {
                       shadowBlur : 10,
                       shadowOffsetX : 0,
                       shadowColor : 'rgba(0, 0, 0, 0.5)'
                   }
               }
           } ]
       };

       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
   });

   function ll(){
       var tt = ${tt};
       alert(tt);
   }




</script>
</head>
<body>
   
   <div id="main" style="width: 600px;height:400px;"></div>

   <input type="hidden" id="aa" value="${len}" />
   <input type="button" id="bb" onclick="ll();"/>
</body>
</html>

/**

导入需要jar包以及 js文件

0 0

EchartsTest --- Echarts 的 servlet 实现 动态获取数据 练习

EchartsTest --- Echarts 的 servlet 实现动态获取数据练习