软工第三周：Echarts学习总结
这周我们学习了百度图表Echars的使用，第一阶段利用数据库数据生成统计图，第二三阶段利用数据生成全国确诊人数分布图。主要实现方法如下：
1.连接数据库，读取数据返回一个List，servlet调用这个函数，以json格式传回给前端页面。
2.前端页面接收数据
第一阶段代码：
Dao：
public class DataDao { // public List<Data> search(String beginyear, String endyear) throws SQLException { // QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource()); // String sql = "select * from info where date >= ? and date <= ?"; // return runner.query(sql, new BeanListHandler<Data>(Data.class),beginyear,endyear); // } //} public List<Data> search1(String beginyear,String endyear){ int num=0; List<Data>list=new ArrayList<Data>(); Connection con=null; java.sql.Statement psts=null; ResultSet rs=null; try { con=DataDB.getCon(); String sql="select * from info where Date between '"+beginyear+"' and '"+endyear+"'"; System.out.print(sql); psts=con.createStatement(); rs=psts.executeQuery(sql); while(rs.next()){ String id=rs.getString("Id"); String date=rs.getString("Date"); String province=rs.getString("Province"); String city=rs.getString("City"); String confirmed_num=rs.getString("Confirmed_num"); String yisi_num=rs.getString("Yisi_num"); String cured_num=rs.getString("Cured_num"); String dead_num=rs.getString("Dead_num"); Data data=new Data(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num); list.add(data); } } catch (SQLException e) { e.printStackTrace(); } return list; }
servlet：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //response.getWriter().append("Served at: ").append(request.getContextPath()); request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String beginyearString=request.getParameter("beginyear"); String endyearString=request.getParameter("endyear"); List<Data>list=new ArrayList<Data>(); DataDao dataDao=new DataDao(); list=dataDao.search1(beginyearString, endyearString); if (list!=null) { System.out.print("查询成功"); request.setAttribute("list", list); request.getRequestDispatcher("show.jsp").forward(request, response); } }
show.jsp（需要一个search页面按照前后两个时间搜索，在这里不展出)
<%@ page language="java" contentType="text/html; charse=tUTF-8" pageEncoding="UTF-8"%> <%@page import="java.util.List"%> <%@page import="echart.Data"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>信息显示页面</title> </head> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> //在这里引入echars.js的地址，这里写的是网络地址，也可以下载后写入此文件在整个工程中的地址 <script type="text/javascript"> </script> </head> <body> <% request.setCharacterEncoding("utf-8"); List <Data> provinces =(List<Data>) request.getAttribute("list"); //接收后台传过来的数据集合 int i=0;%> <div align="center"> <div id="main" align="center" style="width: 750px;height:430px;" >//首先为统计图规定一个容器 <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { dataset: { source: [ [ '省份','确诊人数'], <% //获取request域中的数据 if(provinces!=null){ for(Data province:provinces){i++; %> ['<%=province.getProvince()%>','<%=province.getConfirmed_num()%>'],//将list中的数据拼接成json格式作为要显示在统计图中的数据 <% if(i>33)break; } } %> ] }, grid: {containLabel: true}, xAxis: {type: 'category'}, yAxis: {}, series: [ { type: 'bar',//此处决定了统计图类型，bar：柱状图，line：折线图 encode: { // 将 "amount" 列映射到 X 轴。 x: '省份', // 将 "product" 列映射到 Y 轴。 y: '确诊人数' } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </div> </div> <table> <tr> <td>省份</td> <td>确诊人数</td> <td>时间</td> </tr> <c:forEach items="${list }" var="list"> <tr> <td>${list.province }</td> <td>${list.confirmed_num }</td> <td>${list.date }</td> </tr> </c:forEach> </table> </body> </html>
第二阶段代码：
Dao：
public static List search2(String data) { int num=0; List<Data>list=new ArrayList<Data>(); Connection con=null; java.sql.Statement psts=null; ResultSet rs=null; try { con=DataDB.getCon(); String sql="select * from info1 where Date ='"+data+"'"; System.out.print(sql); psts=con.createStatement(); rs=psts.executeQuery(sql); while(rs.next()){ String id=rs.getString("Id"); String date=rs.getString("Date"); String province=rs.getString("Province"); String city=rs.getString("City"); String confirmed_num=rs.getString("Confirmed_num"); String yisi_num=rs.getString("Yisi_num"); String cured_num=rs.getString("Cured_num"); String dead_num=rs.getString("Dead_num"); Data data1=new Data(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num); list.add(data1); } } catch (SQLException e) { e.printStackTrace(); } return list; }
servlet：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String dataString=request.getParameter("time"); List<Data>list=new ArrayList<Data>(); DataDao dataDao=new DataDao(); list=dataDao.search2(dataString); if(list!=null) { Gson gson = new Gson(); String json = gson.toJson(list); System.out.println(json); response.getWriter().write(json);//阶段一是将list传回给前台，在前台进行拼接，阶段二直接将json格式的数据传回给前台 } }
map.<!DOCTYPE html><html style="height: 100%">
<head> <meta charset="UTF-8"> <base> <title>地图阶段二</title> <script src="js/jquery-1.12.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/china.js"></script> </head> <body style="height: 100%; margin: 0"> <div class="row" style="background-color: silver; height: 50px"> 日期 <input type="text" name="time" id="time" placeholder="yyyy-MM-dd hh:mm:ss"> <input type="button" value="查询" onclick="tu()">//为查询按钮绑定了一个函数，实现了利用ajax异步读取交换数据 </div> <div id="main" style="height: 100%"></div> </body> <script type="text/javascript"> function randomData() { return Math.round(Math.random() * 500); } var dt; var mydata1 = new Array(0); function tu() { time = $("#time").val(); //alert(time.substring(0, 2)); $.ajax({ url : "InfoServlet",//要传送的servlet地址，此处即为传给InfoServlet async : true, type : "POST", data : { "time" : time//要穿送的数据，为jason格式 }, success : function(data) {//执行成功的回调函数，此处即为显示地图 dt = data; for (var i = 0; i < 33; i++) { var d = { }; d["name"] = dt[i].province;//.substring(0, 2); d["value"] = dt[i].confirmed_num; d["yisi_num"] = dt[i].yisi_num; d["cured_num"] = dt[i].cured_num; d["dead_num"] = dt[i].dead_num; mydata1.push(d); }//接收后台的数据 //var mdata = JSON.stringify(mydata1); var optionMap = { backgroundColor : '#FFFFFF', title : { text : '全国地图大数据', subtext : '', x : 'center' },
//echart提示框内容： tooltip : { formatter : function(params) { return params.name + '<br/>' + '确诊人数 : ' + params.value + '<br/>' + '死亡人数 : ' + params['data'].dead_num + '<br/>' + '治愈人数 : ' + params['data'].cured_num + '<br/>'+ '疑似患者人数 : ' + params['data'].yisi_num; }//数据格式化 }, //左侧小导航图标 visualMap : { min : 0, max : 35000, text : [ '多', '少' ], realtime : false, calculable : true, inRange : { color : [ 'lightskyblue', 'yellow', 'orangered' ] } }, //配置属性 series : [ { type : 'map', mapType : 'china', label : { show : true }, data : mydata1, nameMap : { '南海诸岛' : '南海诸岛', '北京' : '北京市', '天津' : '天津市', '上海' : '上海市', '重庆' : '重庆市', '河北' : '河北省', '河南' : '河南省', '云南' : '云南省', '辽宁' : '辽宁省', '黑龙江' : '黑龙江省', '湖南' : '湖南省', '安徽' : '安徽省', '山东' : '山东省', '新疆' : '新疆维吾尔自治区', '江苏' : '江苏省', '浙江' : '浙江省', '江西' : '江西省', '湖北' : '湖北省', '广西' : '广西壮族自治区', '甘肃' : '甘肃省', '山西' : '山西省', '内蒙古' : "内蒙古自治区", '陕西' : '陕西省', '吉林' : '吉林省', '福建' : '福建省', '贵州' : '贵州省', '广东' : '广东省', '青海' : '青海省', '西藏' : '西藏自治区', '四川' : '四川省', '宁夏' : '宁夏回族自治区', '海南' : '海南省', '台湾' : '台湾', '香港' : '香港', '澳门' : '澳门' } } ] }; //初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //使用制定的配置项和数据显示图表 myChart.setOption(optionMap); },
error : function() { alert("请求失败"); }, dataType : "json" }); } </script> </html>
阶段三代码：
根据题目要求，点击全国省级地图后，要能进行市级地图展示并能够显示市级确诊人数。
实现过程，在阶段二的前端代码中为地图添加点击的监听函数，能够实现点击后利用servlet向下一个页面跳转
跳转后加载市级地图，然后利用ajax实现提示框市级信息的展示。
Dao：
public static List search3(String data,String province) { int num=0; List<Data>list=new ArrayList<Data>(); Connection con=null; java.sql.Statement psts=null; ResultSet rs=null; try { con=DataDB.getCon(); String sql="select * from info1 where Date ='"+data+"' and Province ='"+province+"'"; System.out.print(sql); psts=con.createStatement(); rs=psts.executeQuery(sql); while(rs.next()){ String id=rs.getString("Id"); String date=rs.getString("Date"); String city=rs.getString("City"); String confirmed_num=rs.getString("Confirmed_num"); String yisi_num=rs.getString("Yisi_num"); String cured_num=rs.getString("Cured_num"); String dead_num=rs.getString("Dead_num"); Data city2=new Data(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num); list.add(city2); } } catch (SQLException e) { e.printStackTrace(); } return list; }
servlet1：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //response.getWriter().append("Served at: ").append(request.getContextPath()); request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String time=request.getParameter("time"); String provinceString=request.getParameter("province"); request.setAttribute("province", provinceString); System.out.print("成功"); request.getRequestDispatcher("littlemap.jsp").forward(request, response); }
servlet2：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //response.getWriter().append("Served at: ").append(request.getContextPath()); request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String dataString="2020-02-12 10:14:15"; String province = request.getParameter("province"); List<Data>list=new ArrayList<Data>(); List<Data>listcityCities=new ArrayList<Data>(); DataDao dataDao=new DataDao(); list=dataDao.search3(dataString,province); for(int i=0;i<list.size();i++) { Data data=new Data(); data.setCity(list.get(i).getCity()); data.setConfirmed_num(list.get(i).getConfirmed_num()); listcityCities.add(data); } Gson gson = new Gson(); String json = gson.toJson(listcityCities); System.out.println(json); response.getWriter().write(json); System.out.println(); }
map1.html
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="UTF-8"> <base> <title>地图阶段二</title> <script src="js/jquery-1.12.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/china.js"></script> </head> <body style="height: 100%; margin: 0"> <div class="row" style="background-color: silver; height: 50px"> 日期 <input type="text" name="time" id="time" placeholder="yyyy-MM-dd hh:mm:ss"> <input type="button" value="查询" onclick="tu()"> </div> <div id="main" style="height: 100%"></div> </body> <script type="text/javascript"> function randomData() { return Math.round(Math.random() * 500); } var dt; var mydata1 = new Array(0); function tu() { time = $("#time").val(); //alert(time.substring(0, 2)); $.ajax({ url : "InfoServlet", async : true, type : "POST", data : { "time" : time }, success : function(data) { dt = data; for (var i = 0; i < 33; i++) { var d = { }; d["name"] = dt[i].province;//.substring(0, 2); d["value"] = dt[i].confirmed_num; d["yisi_num"] = dt[i].yisi_num; d["cured_num"] = dt[i].cured_num; d["dead_num"] = dt[i].dead_num; mydata1.push(d); } //var mdata = JSON.stringify(mydata1); var optionMap = { backgroundColor : '#FFFFFF', title : { text : '全国地图大数据', subtext : '', x : 'center' }, tooltip : { formatter : function(params) { return params.name + '<br/>' + '确诊人数 : ' + params.value + '<br/>' + '死亡人数 : ' + params['data'].dead_num + '<br/>' + '治愈人数 : ' + params['data'].cured_num + '<br/>'+ '疑似患者人数 : ' + params['data'].yisi_num; }//数据格式化 }, //左侧小导航图标 visualMap : { min : 0, max : 35000, text : [ '多', '少' ], realtime : false, calculable : true, inRange : { color : [ 'lightskyblue', 'yellow', 'orangered' ] } }, //配置属性 series : [ { type : 'map', mapType : 'china', label : { show : true }, data : mydata1, nameMap : { '南海诸岛' : '南海诸岛', '北京' : '北京市', '天津' : '天津市', '上海' : '上海市', '重庆' : '重庆市', '河北' : '河北省', '河南' : '河南省', '云南' : '云南省', '辽宁' : '辽宁省', '黑龙江' : '黑龙江省', '湖南' : '湖南省', '安徽' : '安徽省', '山东' : '山东省', '新疆' : '新疆维吾尔自治区', '江苏' : '江苏省', '浙江' : '浙江省', '江西' : '江西省', '湖北' : '湖北省', '广西' : '广西壮族自治区', '甘肃' : '甘肃省', '山西' : '山西省', '内蒙古' : "内蒙古自治区", '陕西' : '陕西省', '吉林' : '吉林省', '福建' : '福建省', '贵州' : '贵州省', '广东' : '广东省', '青海' : '青海省', '西藏' : '西藏自治区', '四川' : '四川省', '宁夏' : '宁夏回族自治区', '海南' : '海南省', '台湾' : '台湾', '香港' : '香港', '澳门' : '澳门' } } ] }; //初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); myChart.on('click', function (params) { var url = "servlet1?method=city&province=" + params.name+"&time="+time; window.location.href = url; }); //使用制定的配置项和数据显示图表 myChart.setOption(optionMap); }, error : function() { alert("请求失败"); }, dataType : "json" }); } </script> </html>
littlemap.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="js/jquery-1.12.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/china.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 800px;;height:600px;"></div> <script> var myChart = echarts.init(document.getElementById('main')); //myChart.showLoading(); var province = "${province}"; //var list = "${list}"; $.get("mapjson/"+ province +".json", function (geoJson) { myChart.hideLoading(); echarts.registerMap(province, geoJson); myChart.setOption(option = { title: { text: province + '地区疫情情况', }, tooltip: { trigger: 'item', formatter: '{b}<br/>{c}人确诊' }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, visualMap: { min: 0, max: 50000, text: ['High', 'Low'], inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, series: [ { name: province + '地区疫情情况', type: 'map', mapType: province, // 自定义扩展图表类型 label: { show: true } } ] }); }); $.ajax({ url:"servlet2", async:true, type:"POST", data:{"province":province}, success:function(data){ alert(data.length); alert(data.city); var mydata1 = new Array(0); for(var i=0;i<data.length;i++){ var c = {}; c["name"] = data[i].city+'市'; c["value"] = data[i].confirmed_num; mydata1.push(c); } alert(mydata1.size); myChart.setOption({ //加载数据图表 series: [{ data: mydata1 }] }); }, error:function(){ alert("请求失败"); }, dataType:"json" }); </script> </body> </html>
