使用Echarts+Javaweb可視化數據庫中數據

本文轉載自查看原文 2020-03-08 13:38 5994

這里引用了王正帥同學的圖片地址如下：https://www.cnblogs.com/20183544-wangzhengshuai/p/12409216.html

一、總體感受

首先，說一些我個人感受，這是本人第一次接觸圖表可視化插件的使用，

說實話，剛開始編代碼還是很懵的，而且剛開始的編代碼的時候，我有點

心浮氣躁了，我直接在網上去找與題目直接相關的代碼，明明自己對Echarts

包括語法、配置什么也不了解，就直接看別人代碼，這也直接導致了我編代

碼效率低下，而且錯誤極其的多，所以后來我決定將大問題分解，先學基本

語法，再結合一些網上的一些小demo，自己寫了一些小demo，然后再去結

合實例和代碼去寫這三道題，我學到了分解問題是個很好的解決問題思路。

二、題目、源代碼、運行測試

1 、第一階段目標：
（1）導入全國疫情數據庫payiqing.sql（MySQL數據庫）
（2）可以按照時期查詢各個省市的疫情統計表格。
（3）以折線圖或柱狀圖展示某天的全國各省的確診人數。

2、思路

這題可以通過前台輸入一個時間參數，然后經過Servlet獲取此參數並且調用Dao

中的方法獲取一個list(里面數據是對應省份和確診人數)，然后將這個list傳給前台，

前台通過<c:forEach items="" var="">獲取數據並按照Echarts制作圖表的語法完成
一個柱狀圖展示

3、源代碼

DBUtil.java（連接數據庫代碼）

package DBUtil; import java.sql.*; /** * 數據庫連接工具 * @author Hu * */
public class DBUtil { public static String url =  "jdbc:mysql://localhost:3306/testr?serverTimezone=UTC"; public static String user = "root"; public static String password = "123"; public static Connection getConn () { Connection conn = null; try { Class.forName("com.mysql.cj.jdbc.Driver");//加載驅動
            conn = DriverManager.getConnection(url, user, password); } catch (Exception e) { e.printStackTrace(); } return conn; } /** * 關閉連接 * @param state * @param conn */
    public static void close (PreparedStatement preparedState, Connection conn) { if (preparedState != null) { try { preparedState.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void close (ResultSet rs, PreparedStatement preparedState, Connection conn) { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (preparedState != null) { try { preparedState.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } /** * 關閉連接 * @param state * @param conn */
    public static void close (Statement state, Connection conn) { if (state != null) { try { state.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void close (ResultSet rs, Statement state, Connection conn) { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (state != null) { try { state.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void main(String[] args) throws SQLException { Connection conn = getConn(); PreparedStatement preparedStatement = null; ResultSet rs = null; String sql ="select * from testr"; preparedStatement = conn.prepareStatement(sql); rs = preparedStatement.executeQuery(); if(rs.next()){ System.out.println("數據庫為空"); } else{ System.out.println("數據庫不為空"); } } }

View Code

Dao.java

package 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 DBUtil.DBUtil; import Javabean.Yi; public class Dao { public List<Yi> search(String Date) { String sql = "select * from info where Date= '"+Date+"'"; List<Yi> list = new ArrayList<>(); Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); Yi bean = null; int i=0; while (rs.next()) { if(i<32) { String province = rs.getString("Province"); int confirmed_num =  Integer.parseInt(rs.getString("Confirmed_num")); System.out.println(province); System.out.println(confirmed_num); bean = new Yi(province,confirmed_num); list.add(bean); i++; } } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, state, conn); } return list; } }

View Code

Yi.java

package Javabean; public class Yi { private int confirmed_num; private String Date; private String province; public int getConfirmed_num() { return confirmed_num; } public void setConfirmed_num(int confirmed_num) { this.confirmed_num = confirmed_num; } public String getDate() { return Date; } public void setDate(String date) { Date = date; } public String getProvince() { return province; } public void setProvince(String province) { this.province = province; } public Yi() {} public Yi(String Date, String province,int confirmed_num) { this.Date=Date; this.province=province; this.confirmed_num=confirmed_num; } public Yi( String Province,int Confirmed_num) { this.province=Province; this.confirmed_num=Confirmed_num; } }

View Code

Servlet

package tongServlet; import java.io.IOException; 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 Dao.Dao; import Javabean.Yi; @WebServlet("/tongServlet") public class tongServlet extends HttpServlet { /** * 特有id號 */
    private static final long serialVersionUID = 1L; Dao dao = new Dao(); /** * 方法選擇 * @return * @throws IOException * @throws ServletException */
    protected void service(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); String method = req.getParameter("method"); if("search".equals(method)) { search(req,resp); } } private void search(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub
        req.setCharacterEncoding("utf-8"); String Date = req.getParameter("Date"); List<Yi> yis = dao.search(Date); req.setAttribute("yis", yis); req.getRequestDispatcher("liulan.jsp").forward(req, resp); } }

View Code

前台代碼：

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日期查詢人數</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.code.js"></script>
<style> .a{ margin-bottom: 20px; } .b{ margin-top:45px; margin-bottom: 20px; } .c{ width:300px; height:240px; background:rgb(195,195,195); position:absolute; top:30%; left:50%; transform:translaet(-50%,-50%); } .d{ font-size:5px; color:black; font-family:"宋體"; } .e{ width:240px; height:30px; margin-left:30px; background-color:blue; } .f{ margin-left:30px; margin-top:45px; margin-bottom: 20px; } .g{ margin-left:30px; margin-bottom: 20px; } </style>
</head>
<body>
<div class="c">
 <form action="tongServlet?method=search"  method="post"  onsubmit="return check()">
  <div class="f">
  <label for="Date">日期:</label>
  <input type="text" autofocus="autofocus" placeholder="請輸入查詢日期" id="Date" name="Date">
  </div>
  
  <div>
  <input type="submit" class="e" value="&nbsp;查&nbsp;詢&nbsp;">
  </div>
  </form>
</div>


</body>
</html>

View Code

liulan.jsp

<%@ 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">
<title>疫情分布圖</title>
<!-- 使用單文件引入的方式使用ECharts.JS -->
<script src="echarts.js"></script>
</head>
<body>
<% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %>
         <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script>
    <%} %>
     <div align="center">
        <h1 style="color: black;">疫情分布列表</h1>
        <table class="tb">
            <tr>
                <td>省份</td>
                <td>確診人數</td>
            </tr>
            <c:forEach items="${yis}" var="item">
                <tr>
                    <td>${item.province}</td>
                    <td>${item.confirmed_num}</td>
                </tr>
            </c:forEach>
        </table>
    </div>
<div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
      // 基於准備好的dom，初始化echarts實例
      var myChart = echarts.init(document.getElementById('main')); var arr = new Array(); var index = 0; <c:forEach items="${yis}" var="yi"> arr[index++] = ${yi.confirmed_num}; </c:forEach>

      // 指定圖表的配置項和數據
      var option = { title: { text: '疫情分布圖' }, tooltip: { show: true }, legend: { data:['各省確診人數'] }, xAxis : [ { type : 'category', data : [ <c:forEach items="${yis}" var="y"> ["${y.province}"], </c:forEach> ] } ], yAxis : [ { type : 'value' } ], series : [ { name:'Confirmed_num', type:'bar', data: arr } ] }; // 使用剛指定的配置項和數據顯示圖表。
 myChart.setOption(option); </script>

</body>
</html>

View Code

4、運行測試

5、第二階段目標：疫情統計地圖可視化：
可以通過地圖的形式來直觀顯示疫情的大致分布情況，還可以查看具體省份的疫情統計情況。
在全國地圖上使用不同的顏色代表大概確診人數區間，顏色的深淺表示疫情的嚴重程度，可以直觀了解高危區域；
鼠標移到每個省份會高亮顯示、點擊鼠標會顯示該省具體疫情情況、點擊某個省份顯示該省疫情的具體情況
顯示該省份對應的感染患者人數、疑似患者人數、治愈人數、死亡人數；

6、遇到的問題

1、自定義，echart 的 tooltip（提示框）時只能獲取到 name （省的名稱）的值和 value

（確診人數）的值（決定顏色），而獲取不到自定義的鍵值對！（注：name、value的名字是固定的不能改）！

2、chain.js 工具的地區名稱和自己的數據的名稱不對應

7、思路

首先還是和上面第一階段思路一樣，通過前台輸入一個時間參數，

然后經過Servlet獲取此參數並且調用Dao中的方法獲取一個list(里

面數據是對應省份、感染患者人數、疑似患者人數、治愈人數、死

亡人數)然后將這個list傳給前台，只不過這次不能只有一個數據類型，

要建立四個數據類型，每個數據類型名字都一樣，值不同，前台通過

<c:forEach items="" var="">獲取數據並按照Echarts制作地圖的語法

完成一個地圖展示，前台需要導入china,js和Echarts.min.js。

8、源代碼

DBUtil.java（連接數據庫代碼）

package DBUtil; import java.sql.*; /** * 數據庫連接工具 * @author Hu * */
public class DBUtil { public static String url =  "jdbc:mysql://localhost:3306/testr?serverTimezone=UTC"; public static String user = "root"; public static String password = "123"; public static Connection getConn () { Connection conn = null; try { Class.forName("com.mysql.cj.jdbc.Driver");//加載驅動
            conn = DriverManager.getConnection(url, user, password); } catch (Exception e) { e.printStackTrace(); } return conn; } /** * 關閉連接 * @param state * @param conn */
    public static void close (PreparedStatement preparedState, Connection conn) { if (preparedState != null) { try { preparedState.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void close (ResultSet rs, PreparedStatement preparedState, Connection conn) { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (preparedState != null) { try { preparedState.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } /** * 關閉連接 * @param state * @param conn */
    public static void close (Statement state, Connection conn) { if (state != null) { try { state.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void close (ResultSet rs, Statement state, Connection conn) { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (state != null) { try { state.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void main(String[] args) throws SQLException { Connection conn = getConn(); PreparedStatement preparedStatement = null; ResultSet rs = null; String sql ="select * from testr"; preparedStatement = conn.prepareStatement(sql); rs = preparedStatement.executeQuery(); if(rs.next()){ System.out.println("數據庫為空"); } else{ System.out.println("數據庫不為空"); } } }

View Code

Dao.java

package Dao; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import DBUtil.DBUtil; import Javabean.Yi; import Javabean.Yio; public class Dao { public List<Yi> search(String Date) { String sql = "select * from info1 where Date= '"+Date+"'"; List<Yi> list = new ArrayList<>(); Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); Yi bean = null; while (rs.next()) { String city = rs.getString("City"); if(city.length()!=0) { }else { String province = rs.getString("Province"); int confirmed_num =  Integer.parseInt(rs.getString("Confirmed_num")); int yisi_num =0; int cured_num=Integer.parseInt(rs.getString("Cured_num")); int dead_num=Integer.parseInt(rs.getString("Dead_num")); System.out.println(province); System.out.println(confirmed_num); System.out.println(yisi_num); System.out.println(cured_num); System.out.println(dead_num); bean = new Yi(province,confirmed_num,yisi_num,cured_num,dead_num); list.add(bean); } } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, state, conn); } return list; } public List<Yio> searchcity(String time, String province) { String sql = "select * from info1 where Date= '"+time+"' and Province= '"+province+"'"; List<Yio> list = new ArrayList<>(); Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); Yio bean = null; while (rs.next()) { String city = rs.getString("City"); if(city.length()!=0) { String city1 = city; int confirmed_num =Integer.parseInt(rs.getString("Confirmed_num")); int yisi_num =0; int cured_num=Integer.parseInt(rs.getString("Cured_num")); int dead_num=Integer.parseInt(rs.getString("Dead_num")); System.out.println(city1); System.out.println(confirmed_num); System.out.println(yisi_num); System.out.println(cured_num); System.out.println(dead_num); bean = new Yio(city1,confirmed_num,yisi_num,cured_num,dead_num); list.add(bean); } } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, state, conn); } return list; } }

View Code

Yi.java

package Javabean; public class Yi { private String date; private String province; private int confirmed_num; private int yisi_num; private int cured_num; private int dead_num; public String getDate() { return date; } public void setDate(String date) { this.date = date; } public String getProvince() { return province; } public void setProvince(String province) { this.province = province; } public int getConfirmed_num() { return confirmed_num; } public void setConfirmed_num(int confirmed_num) { this.confirmed_num = confirmed_num; } public int getYisi_num() { return yisi_num; } public void setYisi_num(int yisi_num) { this.yisi_num = yisi_num; } public int getCured_num() { return cured_num; } public void setCured_num(int cured_num) { this.cured_num = cured_num; } public int getDead_num() { return dead_num; } public void setDead_num(int dead_num) { this.dead_num = dead_num; } public Yi() {} public Yi(String province,int confirmed_num,int yisi_num, int cured_num,int dead_num) { this.province=province; this.confirmed_num=confirmed_num; this.yisi_num=yisi_num; this.cured_num=cured_num; this.dead_num=dead_num; } }

View Code

Servlet

package tongServlet; import java.io.IOException; 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 Dao.Dao; import Javabean.Yi; import Javabean.Yio; @WebServlet("/tongServlet") public class tongServlet extends HttpServlet { /** * 特有id號 */
    private static final long serialVersionUID = 1L; Dao dao = new Dao(); /** * 方法選擇 * @return * @throws IOException * @throws ServletException */
    protected void service(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); String method = req.getParameter("method"); if("search".equals(method)) { search(req,resp); }else if("city".equals(method)) { city(req,resp); } } private void search(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub
        req.setCharacterEncoding("utf-8"); String Date = req.getParameter("Date"); List<Yi> yis = dao.search(Date); req.setAttribute("Date",Date); req.setAttribute("yis", yis); req.getRequestDispatcher("ditu.jsp").forward(req, resp); } }

View Code

前台代碼：

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查詢</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.code.js"></script>
<style> .a{ margin-bottom: 20px; } .b{ margin-top:45px; margin-bottom: 20px; } .c{ width:300px; height:240px; background:rgb(195,195,195); position:absolute; top:30%; left:50%; transform:translaet(-50%,-50%); } .d{ font-size:5px; color:black; font-family:"宋體"; } .e{ width:240px; height:30px; margin-left:30px; background-color:blue; } .f{ margin-left:30px; margin-top:45px; margin-bottom: 20px; } .g{ margin-left:30px; margin-bottom: 20px; } </style>
</head>
<body>
<div class="c">
 <form action="tongServlet?method=search"  method="post"  onsubmit="return check()">
  <div class="f">
  <label for="Date">日期:</label>
  <input type="text" autofocus="autofocus" placeholder="請輸入查詢日期" id="Date" name="Date">
  </div>
  
  <div>
  <input type="submit" class="e" value="&nbsp;查&nbsp;詢&nbsp;">
  </div>
  </form>
</div>


</body>
</html>

View Code

ditu.jsp

<%@ 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">
    <title>疫情分布圖</title>
    <script src="jquery.min.js"></script>
    <script src="echarts.js"></script>
    <script src="china.js"></script>
    <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>
<% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %>
         <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script>
    <%} %>
    <div id="main">
 
    </div>
    <script type="text/javascript"> var dataList=[ <c:forEach items="${yis}" var="y"> {name:"${y.province}",value:"${y.confirmed_num}"}, </c:forEach> ] var data2=[ <c:forEach items="${yis}" var="a"> {name:"${a.province}",value:"${a.dead_num}"}, </c:forEach> ] var data3=[ <c:forEach items="${yis}" var="b"> {name:"${b.province}",value:"${b.cured_num}"}, </c:forEach> ] var data4=[ <c:forEach items="${yis}" var="c"> {name:"${c.province}",value:"${c.yisi_num}"}, </c:forEach> ] var myChart = echarts.init(document.getElementById('main')); function randomValue() { return Math.round(Math.random()*1000); } option = { tooltip: { trigger: 'item', formatter: function(params) { var res = params.name+'<br/>'; var myseries = option.series; for (var i = 0; i < myseries.length; i++) { for(var j=0;j<myseries[i].data.length;j++){ if(myseries[i].data[j].name==params.name){ res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>'; } } } return res; } }, visualMap: { min: 0, max: 35000, left: 'left', top: 'bottom', text: ['多','少'],//取值范圍的文字
 inRange: { color: ['#e0ffff', '#006edd']//取值范圍的顏色
 }, show:true//圖注
 }, geo: { map: 'china', roam: false,//不開啟縮放和平移
                zoom:1.23,//視角縮放比例
 label: { normal: { show: true, fontSize:'10', color: 'rgba(0,0,0,0.7)' } }, itemStyle: { normal:{ borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis:{ areaColor: '#F3B329',//鼠標選擇區域顏色
                        shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, series : [ { name: '感染患者人數', type: 'map', geoIndex: 0, data:dataList }, { name:'死亡人數', type:'map', data:data2 }, { name:'治愈人數', type:'map', data:data3 }, { name:'疑似患者人數', type:'map', data:data4 } ] }; myChart.setOption(option); myChart.on('click', function (params) { var url = "tongServlet?method=city&province=" + params.name; window.location.href = url; }); /* setTimeout(function () { myChart.setOption({ series : [ { name: '信息量', type: 'map', geoIndex: 0, data:dataList } ] }); },1000)*/
    </script>
</body>
</html>

View Code

9、運行測試

10、

第三階段目標：鼠標移到每個市會高亮顯示，並且顯示簡單的數據；
數據下鑽：單擊各個省可以下鑽到各個地市的數據顯示。

11、思路

在原有地圖基礎加上一個帶有當前省份的一個跳轉，跳轉到Servlet,然后

Serlet調用Dao中的方法獲取數據，然后將數據傳到前台，前台調用對應

省份json數據包，按照省級地圖配置和語法，進行各個城市的顯示

12、源代碼

DBUtil.java(連接數據庫代碼)

package DBUtil; import java.sql.*; /** * 數據庫連接工具 * @author Hu * */
public class DBUtil { public static String url =  "jdbc:mysql://localhost:3306/testr?serverTimezone=UTC"; public static String user = "root"; public static String password = "123"; public static Connection getConn () { Connection conn = null; try { Class.forName("com.mysql.cj.jdbc.Driver");//加載驅動
            conn = DriverManager.getConnection(url, user, password); } catch (Exception e) { e.printStackTrace(); } return conn; } /** * 關閉連接 * @param state * @param conn */
    public static void close (PreparedStatement preparedState, Connection conn) { if (preparedState != null) { try { preparedState.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void close (ResultSet rs, PreparedStatement preparedState, Connection conn) { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (preparedState != null) { try { preparedState.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } /** * 關閉連接 * @param state * @param conn */
    public static void close (Statement state, Connection conn) { if (state != null) { try { state.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void close (ResultSet rs, Statement state, Connection conn) { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (state != null) { try { state.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void main(String[] args) throws SQLException { Connection conn = getConn(); PreparedStatement preparedStatement = null; ResultSet rs = null; String sql ="select * from testr"; preparedStatement = conn.prepareStatement(sql); rs = preparedStatement.executeQuery(); if(rs.next()){ System.out.println("數據庫為空"); } else{ System.out.println("數據庫不為空"); } } }

View Code

Dao.java

package Dao; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import DBUtil.DBUtil; import Javabean.Yi; import Javabean.Yio; public class Dao { public List<Yi> search(String Date) { String sql = "select * from info1 where Date= '"+Date+"'"; List<Yi> list = new ArrayList<>(); Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); Yi bean = null; while (rs.next()) { String city = rs.getString("City"); if(city.length()!=0) { }else { String province = rs.getString("Province"); int confirmed_num =  Integer.parseInt(rs.getString("Confirmed_num")); int yisi_num =0; int cured_num=Integer.parseInt(rs.getString("Cured_num")); int dead_num=Integer.parseInt(rs.getString("Dead_num")); System.out.println(province); System.out.println(confirmed_num); System.out.println(yisi_num); System.out.println(cured_num); System.out.println(dead_num); bean = new Yi(province,confirmed_num,yisi_num,cured_num,dead_num); list.add(bean); } } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, state, conn); } return list; } public List<Yio> searchcity(String time, String province) { String sql = "select * from info1 where Date= '"+time+"' and Province= '"+province+"'"; List<Yio> list = new ArrayList<>(); Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); Yio bean = null; while (rs.next()) { String city = rs.getString("City"); if(city.length()!=0) { String city1 = city; int confirmed_num =Integer.parseInt(rs.getString("Confirmed_num")); int yisi_num =0; int cured_num=Integer.parseInt(rs.getString("Cured_num")); int dead_num=Integer.parseInt(rs.getString("Dead_num")); System.out.println(city1); System.out.println(confirmed_num); System.out.println(yisi_num); System.out.println(cured_num); System.out.println(dead_num); bean = new Yio(city1,confirmed_num,yisi_num,cured_num,dead_num); list.add(bean); } } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, state, conn); } return list; } }

View Code

Javabean:

Yi.java

package Javabean; public class Yi { private String date; private String province; private int confirmed_num; private int yisi_num; private int cured_num; private int dead_num; public String getDate() { return date; } public void setDate(String date) { this.date = date; } public String getProvince() { return province; } public void setProvince(String province) { this.province = province; } public int getConfirmed_num() { return confirmed_num; } public void setConfirmed_num(int confirmed_num) { this.confirmed_num = confirmed_num; } public int getYisi_num() { return yisi_num; } public void setYisi_num(int yisi_num) { this.yisi_num = yisi_num; } public int getCured_num() { return cured_num; } public void setCured_num(int cured_num) { this.cured_num = cured_num; } public int getDead_num() { return dead_num; } public void setDead_num(int dead_num) { this.dead_num = dead_num; } public Yi() {} public Yi(String province,int confirmed_num,int yisi_num, int cured_num,int dead_num) { this.province=province; this.confirmed_num=confirmed_num; this.yisi_num=yisi_num; this.cured_num=cured_num; this.dead_num=dead_num; } }

View Code

Yio.java

package Javabean; public class Yio { private String date; private String city; private int confirmed_num; private int yisi_num; private int cured_num; private int dead_num; public String getDate() { return date; } public void setDate(String date) { this.date = date; } public int getConfirmed_num() { return confirmed_num; } public void setConfirmed_num(int confirmed_num) { this.confirmed_num = confirmed_num; } public int getYisi_num() { return yisi_num; } public void setYisi_num(int yisi_num) { this.yisi_num = yisi_num; } public int getCured_num() { return cured_num; } public void setCured_num(int cured_num) { this.cured_num = cured_num; } public int getDead_num() { return dead_num; } public void setDead_num(int dead_num) { this.dead_num = dead_num; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } public Yio() {} public Yio(String city,int confirmed_num,int yisi_num, int cured_num,int dead_num) { this.city=city; this.confirmed_num=confirmed_num; this.yisi_num=yisi_num; this.cured_num=cured_num; this.dead_num=dead_num; } }

View Code

Servlet

package tongServlet; import java.io.IOException; 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 Dao.Dao; import Javabean.Yi; import Javabean.Yio; @WebServlet("/tongServlet") public class tongServlet extends HttpServlet { /** * 特有id號 */
    private static final long serialVersionUID = 1L; Dao dao = new Dao(); /** * 方法選擇 * @return * @throws IOException * @throws ServletException */
    protected void service(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); String method = req.getParameter("method"); if("search".equals(method)) { search(req,resp); }else if("city".equals(method)) { city(req,resp); } } private void search(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub
        req.setCharacterEncoding("utf-8"); String Date = req.getParameter("Date"); List<Yi> yis = dao.search(Date); req.setAttribute("Date",Date); req.setAttribute("yis", yis); req.getRequestDispatcher("ditu.jsp").forward(req, resp); } private void city(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); String province = req.getParameter("province"); String time = "2020-02-12 10:14:15"; List<Yio> yios = dao.searchcity(time,province); req.setAttribute("province",province); req.setAttribute("yios", yios); req.getRequestDispatcher("test.jsp").forward(req, resp); } }

View Code

前台代碼：

search.jsp

View Code

ditu.jsp

<%@ 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">
    <title>疫情分布圖</title>
    <script src="jquery.min.js"></script>
    <script src="echarts.js"></script>
    <script src="china.js"></script>
    <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>
<% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %>
         <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script>
    <%} %>
    <div id="main">
 
    </div>
    <script type="text/javascript"> var dataList=[ <c:forEach items="${yis}" var="y"> {name:"${y.province}",value:"${y.confirmed_num}"}, </c:forEach> ] var data2=[ <c:forEach items="${yis}" var="a"> {name:"${a.province}",value:"${a.dead_num}"}, </c:forEach> ] var data3=[ <c:forEach items="${yis}" var="b"> {name:"${b.province}",value:"${b.cured_num}"}, </c:forEach> ] var data4=[ <c:forEach items="${yis}" var="c"> {name:"${c.province}",value:"${c.yisi_num}"}, </c:forEach> ] var myChart = echarts.init(document.getElementById('main')); function randomValue() { return Math.round(Math.random()*1000); } option = { tooltip: { trigger: 'item', formatter: function(params) { var res = params.name+'<br/>'; var myseries = option.series; for (var i = 0; i < myseries.length; i++) { for(var j=0;j<myseries[i].data.length;j++){ if(myseries[i].data[j].name==params.name){ res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>'; } } } return res; } }, visualMap: { min: 0, max: 35000, left: 'left', top: 'bottom', text: ['多','少'],//取值范圍的文字
 inRange: { color: ['#e0ffff', '#006edd']//取值范圍的顏色
 }, show:true//圖注
 }, geo: { map: 'china', roam: false,//不開啟縮放和平移
                zoom:1.23,//視角縮放比例
 label: { normal: { show: true, fontSize:'10', color: 'rgba(0,0,0,0.7)' } }, itemStyle: { normal:{ borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis:{ areaColor: '#F3B329',//鼠標選擇區域顏色
                        shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, series : [ { name: '感染患者人數', type: 'map', geoIndex: 0, data:dataList }, { name:'死亡人數', type:'map', data:data2 }, { name:'治愈人數', type:'map', data:data3 }, { name:'疑似患者人數', type:'map', data:data4 } ] }; myChart.setOption(option); myChart.on('click', function (params) { var url = "tongServlet?method=city&province=" + params.name; window.location.href = url; }); /* setTimeout(function () { myChart.setOption({ series : [ { name: '信息量', type: 'map', geoIndex: 0, data:dataList } ] }); },1000)*/
    </script>
</body>
</html>

View Code

ditu2.jsp

<%@ 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">
    <title>地區疫情情況</title>
    <script src="jquery.min.js"></script>
    <script src="echarts.min.js"></script>
    <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>
<% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %>
         <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script>
    <%} %>
    <div id="main">
 
    </div>
    <script type="text/javascript"> var province = "${province}"; var myChart = echarts.init(document.getElementById('main')); $.get("mapjson/"+ province +".json", function (geoJson) { myChart.hideLoading(); echarts.registerMap(province, geoJson); var dataList=[ <c:forEach items="${yios}" var="y"> {name:"${y.city}",value:"${y.confirmed_num}"}, </c:forEach> ] function randomValue() { return Math.round(Math.random()*1000); } option = { title: { text: province + '地區疫情情況', }, tooltip: { formatter: function(params) { return +params.name+'感染患者人數：'+params.value } }, visualMap: { min: 0, max: 35000, left: 'left', top: 'bottom', text: ['多','少'],//取值范圍的文字
 inRange: { color: ['#e0ffff', '#006edd']//取值范圍的顏色
 }, show:true//圖注
 }, geo: { map:'', roam: false,//不開啟縮放和平移
                zoom:1.23,//視角縮放比例
 label: { normal: { show: true, fontSize:'10', color: 'rgba(0,0,0,0.7)' } }, itemStyle: { normal:{ borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis:{ areaColor: '#F3B329',//鼠標選擇區域顏色
                        shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, series : [ { name: '感染患者人數', type: 'map', mapType: province, // 自定義擴展圖表類型
                    geoIndex: 0, data:dataList } ] } }; myChart.setOption(option); /* setTimeout(function () { myChart.setOption({ series : [ { name: '信息量', type: 'map', geoIndex: 0, data:dataList } ] }); },1000)*/
    </script>
</body>
</html>

View Code

13、運行測試

圖片可能比較模糊，我的省級地圖運行效果，類似於王正帥同學的這種：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 全國省市區數據庫數據，以及可視化echarts相關geoJson數據疫情數據庫可視化 Echarts對數據庫數據進行可視化+圖表聯動（一） Android中怎樣使用Navicat可視化查看sqllite的數據庫(查看db文件) 使用Echarts實現前台可視化數據展示使用ECharts完成數據可視化可視化數據庫——model(數據)/view(視圖) 數據可視化：canvas與ECharts入門使用使用echarts+ajax實現數據可視化統計前端可視化數據--echarts