java----统计疫情可视化展示--echarts（三）
这次要求数据的下钻，点击某个省，进去该省，并显示疫情信息。如下图。看代码。因为会用到一些js文件和json文件，下面链接下载。
链接：https://pan.baidu.com/s/1MJQI9UjLKZ2AZPHw-S77OA
提取码：yis3
提一下json文件，从国家到省份，需要这个json文件，
。最后根据你的${city_name}返回的字符串来修改json文件。因为我最后返回的都是中文名字（数据可里的名字），所以我改成了中文（有很多没改的）如下
因为涉及到两个页面的跳转，所以一定要搞清楚逻辑关系和数据的传输。ajax在这里面起很大作用。
这是我国家页面的代码，通过点击某个省来进入该省。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echarts.js中国地图省份悬浮提示</title> <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script> <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min(1).js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/china.js"></script> </head> <body> <div class="container"> <div class="row" style="padding-top: 20px"> <div class="col-xs-4"> <h4>请输入起始时间：</h4> <input type="text" class="form-control" name="date1" id="date1"> </div> <div class="col-xs-4"> <h4>请输入终止时间：</h4> <input type="text" class="form-control" name="date2" id="date2"> </div> <div class="col-xs-2"> <input type="submit" class="btn btn-default" value="查询" style="margin-top:39px;width:100px" onclick="getConfirmed()"> </div> </div> </div> <hr/> <div class="container" id="container" style="height: 800px;width:1200px;background:white;"></div> </body> <script type="text/javascript"> function randomData() { return Math.round(Math.random()*500); } function getConfirmed(){ var date1=$("#date1").val(); alert(date1); var date2=$("#date2").val(); $.ajax({ url:"SearchConfirmedServlet?method=getAllConfirmed", async:true, type:"POST", data:{"date1":date1, "date2":date2 }, success:function(data){ /* var mydata = [ {name: '北京',value: '100' },{name: '天津',value: randomData() }, {name: '上海',value: randomData() },{name: '重庆',value: randomData() }, {name: '河北',value: randomData() },{name: '河南',value: randomData() }, {name: '云南',value: randomData() },{name: '辽宁',value: randomData() }, {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() }, {name: '安徽',value: randomData() },{name: '山东',value: randomData() }, {name: '新疆',value: randomData() },{name: '江苏',value: randomData() }, {name: '浙江',value: randomData() },{name: '江西',value: randomData() }, {name: '湖北',value: randomData() },{name: '广西',value: randomData() }, {name: '甘肃',value: randomData() },{name: '山西',value: randomData() }, {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() }, {name: '吉林',value: randomData() },{name: '福建',value: randomData() }, {name: '贵州',value: randomData() },{name: '广东',value: randomData() }, {name: '青海',value: randomData() },{name: '西藏',value: randomData() }, {name: '四川',value: randomData() },{name: '宁夏',value: randomData() }, {name: '海南',value: randomData() },{name: '台湾',value: randomData() }, {name: '香港',value: randomData() },{name: '澳门',value: randomData() } ]; */ var mydata = new Array(0); /* for(var i=0;i<33;i++){ mydata.push({name:data.province,value:data.confirmed_num}); } */ for(var i=0;i<32;i++){ var d = { }; d["name"] = data[i].province;//.substring(0, 2); d["value"] = data[i].confirmed_num; d["yisi_num"] = data[i].yisi_num; d["cured_num"] = data[i].cured_num; d["dead_num"] = data[i].dead_num; mydata.push(d); } var optionMap = { backgroundColor: '#FFFFFF', title: { text: '全国地图大数据', subtext: '', x:'center' }, tooltip : { trigger: 'item', 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: { show : true, x: 'left', y: 'center', splitList: [ {start: 500, end:100000},{start: 400, end: 500}, {start: 300, end: 400},{start: 200, end: 300}, {start: 100, end: 200},{start: 0, end: 100}, ], color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea'] }, //配置属性 series: [{ name: '数据', type: 'map', mapType: 'china', roam: true, label: { normal: { show: true //省份名称 }, emphasis: { show: false } }, data:mydata, //数据 nameMap : { '南海诸岛' : '南海诸岛', '北京' : '北京市', '天津' : '天津市', '上海' : '上海市', '重庆' : '重庆市', '河北' : '河北省', '河南' : '河南省', '云南' : '云南省', '辽宁' : '辽宁省', '黑龙江' : '黑龙江省', '湖南' : '湖南省', '安徽' : '安徽省', '山东' : '山东省', '新疆' : '新疆维吾尔自治区', '江苏' : '江苏省', '浙江' : '浙江省', '江西' : '江西省', '湖北' : '湖北省', '广西' : '广西壮族自治区', '甘肃' : '甘肃省', '山西' : '山西省', '内蒙古' : "内蒙古自治区", '陕西' : '陕西省', '吉林' : '吉林省', '福建' : '福建省', '贵州' : '贵州省', '广东' : '广东省', '青海' : '青海省', '西藏' : '西藏自治区', '四川' : '四川省', '宁夏' : '宁夏回族自治区', '海南' : '海南省', '台湾' : '台湾', '香港' : '香港', '澳门' : '澳门' } }] }; //初始化echarts实例 var myChart = echarts.init(document.getElementById('container')); myChart.on('click', function (params) { var url = "toSonCityServlet?method=goSonCity&city_name="+ params.name +"&date1=" + $("#date1").val() + "&date2=" + $("#date2").val(); window.location.href = url; }); //使用制定的配置项和数据显示图表 myChart.setOption(optionMap); }, error:function(){ alert("请求失败"); }, dataType:"json" }); } </script> </html>
这是我各个省页面的代码，同样是通过ajax访问Servlet获取数据库内容：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script> <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min(1).js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/china.js"></script> <script src="${pageContext.request.contextPath }/js/china.js"></script> <title>Insert title here</title> </head> <body> <div id="box" style="width: 700px;height: 700px;margin: 0 auto;"></div> </body> <script type="text/javascript"> $(function() { }); $.ajax({ url:"toSonCityServlet?method=getCityConfirmed", async:true, type:"POST", data:{"city_name":"${city_name}", "date1":"${date1}", "date2":"${date2}", }, success:function(data){ alert(data.length); var mydata1 = data; /* var mydata1 = new Array(0); for(var i=1;i<data.length;i++){ var c = {}; c["name"] = data[i].name+'市'; c['value'] = data[i].value; c['dead_num'] = data[i].dead_num; console.log(data[i].value); mydata1.push(c); } */ var chart = echarts.init(document.getElementById("box")); $.getJSON('json/province/${city_name}.json', function(data) { echarts.registerMap('${city_name}', data); chart.setOption(option = { tooltip: { trigger: 'item', formatter: function(params) { console.log(params); return params.name + '<br/>' + '确诊人数 : ' + params.value + '<br/>' + '死亡人数 : ' + params['data'].dead_num; }//数据格式化 * }, series : { type : 'map', map : '${city_name}', roam: true, layoutCenter : [ '50%', '50%' ], layoutSize : '100%', label : { normal : { show : true, textStyle : { color : '#fff' } }, emphasis : { show : false, textStyle : { color : '#fff' } } }, itemStyle : { normal : { areaColor : 'rgba(24,65,91,0.3)', borderColor : '#9DDCEB', borderWidth : 3, shadowColor : '#9DDCEB', shadowBlur : 20 }, emphasis : { areaColor : 'rgba(24,65,91,0.3)' } }, data:mydata1 } }) }); }, error:function(){ alert("请求失败"); }, dataType:"json" }); </script> </html>
Servlet：
package Servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import com.google.gson.Gson; import Dao.Dao; import bin.City; import bin.Info; /** * Servlet implementation class toSonCityServlet */ @WebServlet("/toSonCityServlet") public class toSonCityServlet extends HttpServlet { private static final long serialVersionUID = 1L; Dao dao = new Dao(); /** * @see HttpServlet#HttpServlet() */ public toSonCityServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String method = request.getParameter("method"); if(method.equals("goSonCity")) { goSonCity(request, response); }else if(method.equals("getCityConfirmed")) { getCityConfirmed(request, response); } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } protected void goSonCity(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String city_name = request.getParameter("city_name"); String date1 = request.getParameter("date1"); String date2 = request.getParameter("date2"); request.setAttribute("city_name",city_name); request.setAttribute("date1",date1); request.setAttribute("date2",date2); request.getRequestDispatcher("ceshi3.jsp").forward(request, response); } protected void getCityConfirmed(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String date1 = request.getParameter("date1"); String date2 = request.getParameter("date2"); String city_name = request.getParameter("city_name"); List<Info> list = dao.getConfiremd(date1,date2,city_name); List<City> data = new ArrayList<City>(); for(int i=1; i<list.size();i++) { City city = new City(); city.setName(list.get(i).getCity()+"市"); city.setValue(list.get(i).getConfirmed_num()); city.setDead_num(Integer.valueOf(list.get(i).getDead_num())); data.add(city); } Gson gson = new Gson(); String json = gson.toJson(data); System.out.println(json); response.getWriter().write(json); } }
dao(和第二篇的一样，需要去第二篇Copy，我再这就不列了)，链接数据库的代码也不放了
这里新增加了一个实体类，用来放某个省的城市信息：
package bin; public class City { private String name; private String value; private int dead_num; public City(){}; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } public int getDead_num() { return dead_num; } public void setDead_num(int yisi_num) { this.dead_num = yisi_num; } }
运行结果：点击黑龙江省，进入黑龙江省。
