使用Echarts+Javaweb可視化數據庫中數據
這裏引用了王正帥同窗的圖片 地址以下：https://www.cnblogs.com/20183544-wangzhengshuai/p/12409216.htmljavascript
1、整體感覺 html
首先，說一些我我的感覺，這是本人第一次接觸圖表可視化插件的使用，java
說實話，剛開始編代碼仍是很懵的，並且剛開始的編代碼的時候，我有點mysql
心浮氣躁了，我直接在網上去找與題目直接相關的代碼，明明本身對Echartsjquery
包括語法、配置什麼也不瞭解，就直接看別人代碼，這也直接致使了我編代ios
碼效率低下，並且錯誤極其的多，因此後來我決定將大問題分解，先學基本sql
語法，再結合一些網上的一些小demo，本身寫了一些小demo，而後再去結數據庫
合實例和代碼去寫這三道題，我學到了分解問題是個很好的解決問題思路。json
2、題目、源代碼、運行測試echarts
1 、第一階段目標：
（1）導入全國疫情數據庫payiqing.sql（MySQL數據庫）
（2）能夠按照時期查詢各個省市的疫情統計表格。
（3）以折線圖或柱狀圖展現某天的全國各省的確診人數。
二、思路
這題能夠經過前臺輸入一個時間參數，而後通過Servlet獲取此參數而且調用Dao
中的方法獲取一個list(裏面數據是對應省份和確診人數)，而後將這個list傳給前臺，
前臺經過<c:forEach items="" var="">獲取數據並按照Echarts製做圖表的語法完成
一個柱狀圖展現
三、源代碼
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("數據庫不爲空"); } } }
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; } }
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; } }
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); } }
前臺代碼：
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=" 查 詢 "> </div> </form> </div> </body> </html>
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>
四、運行測試
五、第二階段目標：疫情統計地圖可視化：
能夠經過地圖的形式來直觀顯示疫情的大體分佈狀況，還能夠查看具體省份的疫情統計狀況。
在全國地圖上使用不一樣的顏色表明大概確診人數區間，顏色的深淺表示疫情的嚴重程度，能夠直觀瞭解高危區域；
鼠標移到每一個省份會高亮顯示、點擊鼠標會顯示該省具體疫情狀況、點擊某個省份顯示該省疫情的具體狀況
顯示該省份對應的感染患者人數、疑似患者人數、治癒人數、死亡人數；
六、遇到的問題
一、自定義，echart 的 tooltip（提示框）時 只能獲取到 name （省的名稱）的值和 value
（確診人數）的值（決定顏色），而獲取不到自定義的鍵值對！ （注：name、value的名字是固定的不能改）！
二、chain.js 工具的地區名稱和本身的數據的名稱不對應
七、思路
首先仍是和上面第一階段思路同樣，經過前臺輸入一個時間參數，
而後通過Servlet獲取此參數而且調用Dao中的方法獲取一個list(裏
面數據是對應省份、感染患者人數、疑似患者人數、治癒人數、死
亡人數)而後將這個list傳給前臺，只不過此次不能只有一個數據類型，
要創建四個數據類型，每一個數據類型名字都同樣，值不一樣，前臺經過
<c:forEach items="" var="">獲取數據並按照Echarts製做地圖的語法
完成一個地圖展現，前臺須要導入china,js和Echarts.min.js。
八、源代碼
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("數據庫不爲空"); } } }
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; } }
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; } }
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); } }
前臺代碼：
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=" 查 詢 "> </div> </form> </div> </body> </html>
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>
九、運行測試
十、
第三階段目標：鼠標移到每一個市會高亮顯示，而且顯示簡單的數據；
數據下鑽：單擊各個省能夠下鑽到各個地市的數據顯示。
十一、思路
在原有地圖基礎加上一個帶有當前省份的一個跳轉，跳轉到Servlet,而後
Serlet調用Dao中的方法獲取數據，而後將數據傳到前臺，前臺調用對應
省份json數據包，按照省級地圖配置和語法，進行各個城市的顯示
十二、源代碼
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("數據庫不爲空"); } } }
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; } }
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; } }
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; } }
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); } }
前臺代碼：
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>
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>
1三、運行測試
圖片可能比較模糊，個人省級地圖運行效果，相似於王正帥同窗的這種：
相關文章
- 1. Sequel 使用 mysql數據庫可視化
- 2. python 數據可視化庫
- 3. pycharm可視化數據庫
- 4. 利用ECharts可視化mysql數據庫中的數據
- 5. pycharm中的數據庫可視化
- 6. 可視化中的數據
- 7. 數據可視化Matplotlib-中
- 8. 用pyecharts數據可視化
- 9. 數據可視化
- 10. 數據可視化--Chart.js使用總結
- 更多相關文章...
- • PHP 數據庫 ODBC - PHP教程
- • 網站 數據庫 - 網站主機教程
- • Flink 數據傳輸及反壓詳解
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Sequel 使用 mysql數據庫可視化
- 2. python 數據可視化庫
- 3. pycharm可視化數據庫
- 4. 利用ECharts可視化mysql數據庫中的數據
- 5. pycharm中的數據庫可視化
- 6. 可視化中的數據
- 7. 數據可視化Matplotlib-中
- 8. 用pyecharts數據可視化
- 9. 數據可視化
- 10. 數據可視化--Chart.js使用總結