使用Echarts+Javaweb可视化数据库中数据

时间 2020-06-09

标签使用 echarts+javaweb echarts javaweb 可视化数据库数据栏目 Java 繁體版

原文原文链接

这里引用了王正帅同窗的图片地址以下：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("数据库不为空"); } } }

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

四、运行测试

五、第二阶段目标：疫情统计地图可视化：
能够经过地图的形式来直观显示疫情的大体分布状况，还能够查看具体省份的疫情统计状况。
在全国地图上使用不一样的颜色表明大概确诊人数区间，颜色的深浅表示疫情的严重程度，能够直观了解高危区域；
鼠标移到每一个省份会高亮显示、点击鼠标会显示该省具体疫情状况、点击某个省份显示该省疫情的具体状况
显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；

六、遇到的问题

一、自定义，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("数据库不为空"); } } }

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

九、运行测试

十、

第三阶段目标：鼠标移到每一个市会高亮显示，而且显示简单的数据；
数据下钻：单击各个省能够下钻到各个地市的数据显示。

十一、思路

在原有地图基础加上一个带有当前省份的一个跳转，跳转到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("数据库不为空"); } } }

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

1三、运行测试

图片可能比较模糊，个人省级地图运行效果，相似于王正帅同窗的这种：