全國疫情統計可視化地圖（3）

時間 2020-06-09

標籤全國疫情統計可視化地圖简体版

原文原文鏈接

第三階段是數據下鑽，要求點擊省能夠下鑽到各個地市的數據顯示。javascript

1：首先，要顯示相應的地圖須要導入相應的js 上一篇文章中分享的連接一樣包含各個省份的js 連接: https://pan.baidu.com/s/1MFt-0LqAUQXzpiI1qy-Q0w 提取碼: q7y4。點擊省能夠跳轉到地市，因此須要在 myChart.on中加一個跳轉的語句。語句中加上時間和省份，用於查找。 css

myChart.on('click', function (params) { var url = "HebeiData.jsp?province="+params.name+"&time="+time; window.location.href =url; });

省級地圖的繪製和前一階段繪製過程相同。可是！有一個坑是 series屬性配置中mapType 是漢字如河北地圖應爲 mapType : '河北' 地圖老是顯示不出來的緣由正在這，刪刪改改了很久，看了hebei.js的代碼才發現，坑在這裏。每一個省份點擊均可以進入到相應省份的數據。我以河北爲例顯示。若想全都顯示的話，只需將全部省份的js導入，而後把mapType的值設爲 province便可。html

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="com.bean.Data" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<meta charset="UTF-8">
     <link type="text/css" rel="stylesheet" href="css/style.css">

    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/hebei.js"></script>
<title>顯示</title>
    <style> *{margin:0;padding:0} html,body{ width:100%; height:100%;
        } #main{ width:600px; height:450px; margin: 150px auto; border:1px solid #ddd;
          }
        /*默認長寬比0.75*/
    </style>
</head>

<body >
<br>
<h1>疫情統計表</h1>
<%String Date=request.getParameter("time"); request.setAttribute("time",Date); String province=request.getParameter("province"); request.setAttribute("province",province); %>
<div>


</div>
  <div id="main">
  
  </div>
  <script type="text/javascript">


    function randomValue() { return Math.round(Math.random()*1000); } var dt; var mydata = new Array(0); var time = "${time}"; var province = "${province}"; alert(province); $.ajax({ url : "CityServlet", async : true, type : "POST", data : { "Province" : province, "time" : time, }, dataType : "json", success : function(json) { for (var i = 1; i < json.length; i++) { var d = {}; d["name"] = json[i].City+'市'; d["value"] = json[i].Confirmed_num; d["yisi_num"] = json[i].Yisi_num; d["cured_num"] = json[i].Cured_num; d["dead_num"] = json[i].Dead_num; mydata.push(d); } var myChart = echarts.init(document.getElementById('main')); function randomValue() { return Math.round(Math.random()*1000); } 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: 50, left: 'left', top: 'bottom', text: ['高','低'],//取值範圍的文字
 inRange: { color: ['#e0ffff', '#006edd']//取值範圍的顏色
 }, show:true//圖注
 }, //配置屬性
 series : [ { type : 'map', mapType : '河北', label : { show : true }, data : mydata, } ] }; //使用制定的配置項和數據顯示圖表
 myChart.setOption(optionMap); myChart.on('click', function (params) { alert(params.name); }); alert("成功！"); }, error : function() { alert("請求失敗"); }, }); /* setTimeout(function () { myChart.setOption({ series : [ { name: '信息量', type: 'map', geoIndex: 0, data:dataList } ] }); },1000)*/

    
</script>
    

</body>
</html>

HeBeiData.jsp

2：覺得要點擊相應省份顯示相應的地圖數據，因此dao層查詢的時候。加上按照省份查詢。java

package com.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import com.bean.*; import com.jdbc.Util; public class Dao { public List<Data> dlist(String sDate,String eDate) { // 查詢全部信息
 String begin=""; String []s=sDate.split("-"); for(int i=0;i<s.length;i++) begin+=s[i].toString(); String end=""; String []e=eDate.split("-"); for(int i=0;i<e.length;i++) end+=e[i].toString(); int bg=Integer.valueOf(begin); int ed=Integer.valueOf(end); List<Data> list = new ArrayList<Data>(); // 建立集合
        Connection conn = Util.getConn(); String sql = "select * from info "; // SQL查詢語句

        try { PreparedStatement pst = conn.prepareStatement(sql); ResultSet rs = pst.executeQuery(); Data data = null; while (rs.next()) { int id= rs.getInt("id");; String Province = rs.getString("Province"); 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"); String Code = rs.getString("Code"); String City = rs.getString("City"); String Date=rs.getString("Date"); String num=""; String date=Date.substring(0, 10); String []d=date.split("-"); for(int i=0;i<d.length;i++) { num+=d[i].toString(); } int k=Integer.valueOf(num); if(k>=bg&&k<=ed) { data = new Data(id,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code); } list.add(data); } rs.close(); // 關閉
 pst.close(); // 關閉
 } catch (SQLException e1) { e1.printStackTrace(); // 拋出異常
 } return list; // 返回一個集合
 } public List<Data> list(String Date) { // 查詢全部信息
 String begin=""; String []s=Date.split("-"); for(int i=0;i<s.length;i++) begin+=s[i].toString(); int bg=Integer.valueOf(begin); List<Data> list = new ArrayList<Data>(); // 建立集合
        Connection conn = Util.getConn(); String sql = "select * from info"; // SQL查詢語句

        try { PreparedStatement pst = conn.prepareStatement(sql); ResultSet rs = pst.executeQuery(); Data data = null; int index=1; while (rs.next()) { int id= rs.getInt("id");; String Province = rs.getString("Province"); 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"); String Code = rs.getString("Code"); String City = rs.getString("City"); String num=""; String date=Date.substring(0, 10); String []d=date.split("-"); for(int i=0;i<d.length;i++) { num+=d[i].toString(); } int k=Integer.valueOf(num); if(k==bg&&index<=32) { index++; data = new Data(id,Date,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code); list.add(data); } } rs.close(); // 關閉
 pst.close(); // 關閉
 } catch (SQLException e1) { e1.printStackTrace(); // 拋出異常
 } return list; // 返回一個集合
 } public List<Data> list(String Date,String Province) { // 查詢全部信息
 String begin=""; String []s=Date.split("-"); for(int i=0;i<s.length;i++) begin+=s[i].toString(); int bg=Integer.valueOf(begin); List<Data> list = new ArrayList<Data>(); // 建立集合
        Connection conn = Util.getConn(); String sql = "select * from info1 where Province =?"; try { PreparedStatement pst = conn.prepareStatement(sql); pst.setString(1,Province); ResultSet rs = pst.executeQuery(); Data data = null; int index=1; while (rs.next()) { int id= rs.getInt("id");; 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"); String Code = rs.getString("Code"); String City = rs.getString("City"); String num=""; String date=Date.substring(0, 10); String []d=date.split("-"); for(int i=0;i<d.length;i++) { num+=d[i].toString(); } int k=Integer.valueOf(num); if(k==bg&&index<=32&&City!=null) { index++; data = new Data(id,Date,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code); list.add(data); } } rs.close(); // 關閉
 pst.close(); // 關閉
 } catch (SQLException e1) { e1.printStackTrace(); // 拋出異常
 } return list; // 返回一個集合
 } public Data SelectAll() { // 根據ID進行查詢
        String sql = "select * from info "; Connection conn = Util.getConn(); Statement state = null; ResultSet rs = null; Data data = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); while (rs.next()) { int id= rs.getInt("id");; String Province = rs.getString("Province"); 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"); String Code = rs.getString("Code"); String City = rs.getString("City"); String Date=rs.getString("Date"); data = new Data(id,Date,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code); } } catch (Exception e) { e.printStackTrace(); } finally { Util.close(rs, state, conn); } return data; } }

com.dao

3：Servlet傳值和前篇相似，將list轉換爲json。jquery

package com.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 com.dao.Dao; import com.google.gson.Gson; import com.bean.*; @WebServlet("/CityServlet") public class CityServlet extends HttpServlet { // 顯示所有數據



    private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); String Province=req.getParameter("Province"); String Date=req.getParameter("time"); Dao dao = new Dao(); List<Data> list=null; System.out.println(Date); list=dao.list(Date,Province); Gson gson = new Gson(); String json = gson.toJson(list); System.out.println(json); resp.getWriter().write(json); } }