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

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

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{
  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{
   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>

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=" 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>

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("数据库不为空");
        }
    }
}

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{
  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{
   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>

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{
            100%;
            height:100%;
        }
        #main{
              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>

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("数据库不为空");
        }
    }
}

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

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{
            100%;
            height:100%;
        }
        #main{
              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{
            100%;
            height:100%;
        }
        #main{
              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>

 

13、运行测试

 

 

 

 

 

 

 图片可能比较模糊，我的省级地图运行效果，类似于王正帅同学的这种：