全国疫情可视化阶段2-3

xp-thebest

一、要求

二、思路

1.绝大部分就是Echarts的应用，echart.js和china.js

2.调试出地图，再去调换传递的参数

3.请求数据，ajax

4.准备数据，按照用户输入的日期将数据库的数据封装的一个list中。

5.格式转换，使用 Gson 工具将 list 转换成 json 格式的数据，返回给界面。

6.数据处理，将自己的数据转换成 echart 的标准数据形式（数组）

三、遇到的问题

1.数据格式不能正确显示

    方法：params[\'data\'][\'要展示的数据字段名称\']

2.chain.js 工具的地区名称和自己的数据的名称不对应

   自己创建了一个地名信息的映射

四、源代码

1.页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script src="${pageContext.request.contextPath }/js/echarts.js"></script>
<script src="${pageContext.request.contextPath }/js/china.js"></script>
<title>Insert title here</title>

</head>
<body>
           请输入要查询的时间<input type="text" id="time1" name="time1" style="width:20%" placeholder="格式: yyyy-MM-dd hh:mm:ss" />
         <button  type="submit" onclick="tu()">查询</button>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 800px;;height:600px;"></div>    
        
<script>
//初始化echarts实例
var chart = echarts.init(document.getElementById(\'main\'));
chart.on(\'click\', function (params) {
    var url = "${pageContext.request.contextPath }/ShiMap?area=" + params.name+"&time="+time;
    window.location.href = url;
       
});
    
chart.setOption({
    backgroundColor : \'#FFFFFF\',
    title: {
        text: \'全国疫情地图\',
        subtext: \'\',
        x : \'center\'
    },
    tooltip: {
        formatter:function(params){
            return params.name+\'<br />\'+\'确诊人数：\'+params[\'data\'][\'value\']+\'<br />\'+\'死亡人数：\'
            +params[\'data\'][\'dead\']+\'<br />\'+\'治愈人数：\'+params[\'data\'][\'cure\'];
        }//数据格式化
    },
    toolbox: {
        show: true,
        orient: \'vertical\',
        left: \'right\',
        top: \'center\',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    //左侧小导航图标
    visualMap: {
        min: 0,
        max: 40000,
        left: \'left\',
        top: \'bottom\',
        text: [\'多\',\'少\'],
        inRange: {
            color: [\'lightskyblue\', \'yellow\', \'orangered\']
        },
        show:true
    },
    //配置属性
    series: [{
        type: \'map\',
        map: \'china\',
        label:{
            show: true
        },
        nameMap:{
            "南海诸岛" : "南海诸岛",
             \'北京\'   :\'北京市\',
             \'天津\'   :\'天津市\',
             \'上海\'   :\'上海市\',
             \'重庆\'   :\'重庆市\',
             \'河北\'   :\'河北省\',
             \'河南\'   :\'河南省\',
             \'云南\'   :\'云南省\',
             \'辽宁\'   :\'辽宁省\',
             \'黑龙江\'  :  \'黑龙江省\',
             \'湖南\'   :\'湖南省\',
             \'安徽\'   :\'安徽省\',
             \'山东\'   :\'山东省\',
             \'新疆\' :\'新疆维吾尔自治区\',
             \'江苏\' :\'江苏省\',
             \'浙江\' :\'浙江省\',
             \'江西\' :\'江西省\',
             \'湖北\' :\'湖北省\',
             \'广西\' : \'广西壮族自治区\',
             \'甘肃\' :\'甘肃省\',
             \'山西\' :\'山西省\',
             \'内蒙古\' : "内蒙古自治区",
             \'陕西\'  :\'陕西省\',
             \'吉林\'  :\'吉林省\',
             \'福建\'  :\'福建省\',
             \'贵州\'  :\'贵州省\',
             \'广东\'  :\'广东省\',
             \'青海\'  :\'青海省\',
             \'西藏\'  :\'西藏自治区\',
             \'四川\'  :\'四川省\',
             \'宁夏\' :\'宁夏回族自治区\',
             \'海南\' :\'海南省\',
             \'台湾\' :\'台湾\',
             \'香港\' :\'香港\',
             \'澳门\' :\'澳门\'
        }
    }
    ]
});

//异步加载数据
function tu() {
   time = $("#time1").val();
   $.ajax({
      type : "post",
      async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
      url : "${pageContext.request.contextPath }/getMapData",    //请求发送到TestServlet处
      data : {
          "time" : time
      },
      success : function(resultJson) {
          var result= jQuery.parseJSON(resultJson);
          //请求成功时执行该函数内容，result即为服务器返回的json对象
          if (result) {
               chart.setOption({        //加载数据图表
                  series: [{
                      data: result
                  }]
              });
              
       }
  },
   error : function(errorMsg) {
       //请求失败时执行该函数
   alert("图表请求数据失败!");
   }
  });

}
</script>


</body>
</html>
NewFile.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">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script src="${pageContext.request.contextPath }/js/echarts.js"></script>
<script src="${pageContext.request.contextPath }/js/china.js"></script>
<title>Insert title here</title>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 800px;;height:600px;"></div>    
  
<script>

var myChart = echarts.init(document.getElementById(\'main\'));
//myChart.showLoading();
var area = "${area}";
var time = "${time}";
//var list = "${list}";


$.get("js/mapjson/"+ area +".json", function (geoJson) {

    myChart.hideLoading();
    echarts.registerMap(area, geoJson);

    myChart.setOption(option = {
        title: {
            text: area + \'地区疫情情况\',
            x : \'center\'
        },
        tooltip: {
            trigger: \'item\',
            formatter: \'{b}<br/>确诊{c}人\'
        },
        toolbox: {
            show: true,
            orient: \'vertical\',
            left: \'right\',
            top: \'center\',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 0,
            max: 50000,
            text: [\'多\', \'少\'],
            inRange: {
                color: [\'lightskyblue\', \'yellow\', \'orangered\']
            }
        },
        series: [
            {
                name: area + \'地区疫情情况\',
                type: \'map\',
                mapType: area, // 自定义扩展图表类型
                label: {
                    show: true
                }
            }
        ]
    });
});



$.ajax({
    url : "${pageContext.request.contextPath }/ShiMap2",    //请求发送到TestServlet处
    async:true,
    type:"POST",
    data : {
        "time" : time,
        "area" : area
    },
    success:function(data){
        var mydata1 = new Array(0);
        for(var i=0;i<data.length;i++){
            var c = {};
            c["name"] = data[i].name+\'市\';
            c["value"] = data[i].value;
            mydata1.push(c);
        }
        myChart.setOption({        //加载数据图表
            series: [{
                data: mydata1
            }]
        });
    },
    error:function(){
        alert("请求失败");
    },
    dataType:"json"
});
</script>
</body>
</html>
shi.jsp

2.Bean

package Bean;

public class City {
    String name;
    int value;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getValue() {
        return value;
    }
    public void setValue(int value) {
        this.value = value;
    }
}
City.java 
package Bean;

public class mapData {
    String name;
    String value;
    String dead;
    String cure;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getValue() {
        return value;
    }
    public void setValue(String value) {
        this.value = value;
    }
    public String getDead() {
        return dead;
    }
    public void setDead(String dead) {
        this.dead = dead;
    }
    public String getCure() {
        return cure;
    }
    public void setCure(String cure) {
        this.cure = cure;
    }
}
mapData

3.Service

package Service;

import java.util.ArrayList;
import java.util.List;
import Bean.Data;
import Dao.DataDao;

public class DataService {
    public static List<Data> getAll() {
        // TODO Auto-generated method stub
        List<Data> list = new ArrayList<>();
        list = DataDao.getAll();
        return list;
    }
    public static List<Data> getAllinfo1() {
        // TODO Auto-generated method stub
        List<Data> list = new ArrayList<>();
        list = DataDao.getAllinfo1();
        return list;
    }
    public static List<Data> getAllinfo2(String time,String province) {
        // TODO Auto-generated method stub
        List<Data> list = new ArrayList<>();
        list = DataDao.getAllinfo2(time,province);
        return list;
    }
    public static List<Data> getAllinfo3(String time) {
        // TODO Auto-generated method stub
        List<Data> list = new ArrayList<>();
        list = DataDao.getAllinfo3(time);
        return list;
    }

    public static List<Data> getdataByDate(String timeStamp1, String timeStamp2) {
        // TODO Auto-generated method stub
        List<Data> list = new ArrayList<>();
        list = DataDao.getdataByDate(timeStamp1, timeStamp2);
        //System.out.println(timestamp1);
        return list;
    }
}
DataService.java

4.Dao

package Dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
import Bean.Data;
import Util.DBUtil;

public class DataDao {

    public static List<Data> getAll() {
        // TODO Auto-generated method stub
            String sql = "select * from info";
            List<Data> list = new ArrayList<>();
            Connection con = DBUtil.getConnection();
            Statement state = null;
            ResultSet rs = null;
            try {
                state = con.createStatement();
                rs = state.executeQuery(sql);
                Data data = null;
                while(rs.next())
                {
                    
                    Timestamp date = rs.getTimestamp("Date");
                    String province = rs.getString("Province");
                    String city = rs.getString("City");
                    String Confirmed_num = rs.getString("Confirmed_num");
                    String Yisi_num = rs.getString("Yisi_num");
                    String Cured_num = rs.getString("Cured_num");
                    String Dead_num = rs.getString("Dead_num");
                    String Code = rs.getString("Code");
                    
                    //String time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(rs.getTimestamp("date"));
                    
                    data = new Data(date,province,city,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                    list.add(data);
                }         
            }catch(SQLException e){
                e.printStackTrace();
            }finally {
                DBUtil.closePart(con, state);
            }
            return list;
    }

    public static List<Data> getdataByDate(String timeStamp1, String timeStamp2) {
        // TODO Auto-generated method stub
            //System.out.println(timeStamp1);
            Connection con = null;
            PreparedStatement pstmt = null;
            ResultSet rs = null; 
            List<Data> list = new ArrayList<>();
            try {
                con = DBUtil.getConnection();
                String sql = "select * from info where Date between ? and ? ";
                pstmt=con.prepareStatement(sql);
                pstmt.setString(1,timeStamp1);
                pstmt.setString(2,timeStamp2);
                rs = pstmt.executeQuery();
                Data data = null;
                while(rs.next())
                {
                    Timestamp date = rs.getTimestamp("Date");
                    String province = rs.getString("Province");
                    String city = rs.getString("City");
                    String Confirmed_num = rs.getString("Confirmed_num");
                    String Yisi_num = rs.getString("Yisi_num");
                    String Cured_num = rs.getString("Cured_num");
                    String Dead_num = rs.getString("Dead_num");
                    String Code = rs.getString("Code");
                    //String time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(rs.getTimestamp("date"));
                    data = new Data(date,province,city,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                    list.add(data);
                }         
            }catch(SQLException e){
                e.printStackTrace();
            }finally {
                DBUtil.closeAll(con, pstmt, rs);
            }
            return list;
       }

    public static List<Data> getAllinfo1() {
        // TODO Auto-generated method stub
        String sql = "select * from info1 where id < 34";
        List<Data> list = new ArrayList<>();
        Connection con = DBUtil.getConnection();
        Statement state = null;
        ResultSet rs = null;
        try {
            state = con.createStatement();
            rs = state.executeQuery(sql);
            Data data = null;
            while(rs.next())
            {
                
                Timestamp date = rs.getTimestamp("Date");
                String province = rs.getString("Province");
                String city = rs.getString("City");
                String Confirmed_num = rs.getString("Confirmed_num");
                String Yisi_num = rs.getString("Yisi_num");
                String Cured_num = rs.getString("Cured_num");
                String Dead_num = rs.getString("Dead_num");
                String Code = rs.getString("Code");
                
                //String time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(rs.getTimestamp("date"));
                
                data = new Data(date,province,city,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                list.add(data);
            }         
        }catch(SQLException e){
            e.printStackTrace();
        }finally {
            DBUtil.closePart(con, state);
        }
        return list;
    }
    public static List<Data> getAllinfo3(String time) {
        // TODO Auto-generated method stub
        String sql = "select * from info1 where Date = \'"+ time + "\'";
        List<Data> list = new ArrayList<>();
        Connection con = DBUtil.getConnection();
        Statement state = null;
        ResultSet rs = null;
        try {
            state = con.createStatement();
            rs = state.executeQuery(sql);
            Data data = null;
            while(rs.next())
            {
                
                Timestamp date = rs.getTimestamp("Date");
                String province = rs.getString("Province");
                String city = rs.getString("City");
                String Confirmed_num = rs.getString("Confirmed_num");
                String Yisi_num = rs.getString("Yisi_num");
                String Cured_num = rs.getString("Cured_num");
                String Dead_num = rs.getString("Dead_num");
                String Code = rs.getString("Code");
                
                //String time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(rs.getTimestamp("date"));
                
                data = new Data(date,province,city,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                list.add(data);
            }         
        }catch(SQLException e){
            e.printStackTrace();
        }finally {
            DBUtil.closePart(con, state);
        }
        return list;
    }
    public static List<Data> getAllinfo2(String time, String province1) {
        // TODO Auto-generated method stub
        System.out.println(time);
        String sql = "select * from info1 where Date = \'"+ time + "\' and Province = \'"+province1+"\'";
        List<Data> list = new ArrayList<>();
        Connection con = DBUtil.getConnection();
        Statement state = null;
        ResultSet rs = null;
        try {
            state = con.createStatement();
            rs = state.executeQuery(sql);
            Data data = null;
            while(rs.next())
            {
                
                Timestamp date = rs.getTimestamp("Date");
                String province = rs.getString("Province");
                String city = rs.getString("City");
                String Confirmed_num = rs.getString("Confirmed_num");
                String Yisi_num = rs.getString("Yisi_num");
                String Cured_num = rs.getString("Cured_num");
                String Dead_num = rs.getString("Dead_num");
                String Code = rs.getString("Code");
                
                //String time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(rs.getTimestamp("date"));
                
                data = new Data(date,province,city,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                list.add(data);
            }         
        }catch(SQLException e){
            e.printStackTrace();
        }finally {
            DBUtil.closePart(con, state);
        }
        return list;
    }
    
}
DataDao.java

5.Servlet

package Servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import Bean.Data;
import Bean.mapData;
import Dao.DataDao;
import Service.DataService;

/**
 * Servlet implementation class getMapData
 */
@WebServlet("/getMapData")
public class getMapData extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public getMapData() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        String time = request.getParameter("time");
        
        List<Data> infoList = null;
        infoList = DataService.getAllinfo3(time);
        List<mapData> myInfoList = new ArrayList<mapData>();
        for (Data province : infoList) {
            mapData info = new mapData();
            info.setName(province.getProvince());
            info.setValue(province.getConfirmed_num());
            info.setDead(province.getDead_num());
            info.setCure(province.getCured_num());
            myInfoList.add(info);
        }
        Gson gson = new Gson();
        String json = gson.toJson(myInfoList);
        response.getWriter().write(json);
        
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
getMapData.java 
package Servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import Bean.Data;
import Bean.Mydata;
import Service.DataService;

/**
 * Servlet implementation class map
 */
@WebServlet("/map")
public class map extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public map() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        System.out.println("1515");
        List<Data> Data = null;
        Data = DataService.getAllinfo1();
        List<Mydata> mydata = new ArrayList<Mydata>();
        for (Data data : Data) {
            Mydata info = new Mydata();
            info.setValue(data.getConfirmed_num());
            mydata.add(info);
            
        }
        Gson gson = new Gson();
        String json = gson.toJson(mydata);
        System.out.println(json);
        response.getWriter().write(json);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
map.java 
package Servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import Bean.City;
import Bean.Data;
import Bean.Mydata;
import Service.DataService;

/**
 * ShiMap implementation class ShiMap
 */
@WebServlet("/ShiMap")
public class ShiMap extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println(1);
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        String area = request.getParameter("area");
        String time = request.getParameter("time");
        String time1= "2020-02-12 10:14:15";
        System.out.println(time);
        
        List<Data> list = DataService.getAllinfo2(time,area);
        List<City> data = new ArrayList<City>();
        for(int i=1; i<list.size();i++) {
            City city = new City();
            city.setName(list.get(i).getCity());
            city.setValue(Integer.parseInt(list.get(i).getConfirmed_num()));
            data.add(city);
        }
        Gson gson = new Gson();
        String json = gson.toJson(data);
        System.out.println(json);
        request.setAttribute("list", json);
        request.setAttribute("area", area);
        request.setAttribute("time", time);
        request.getRequestDispatcher("shi.jsp").forward(request, response);
    }
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
ShiMap.java 
package Servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import Bean.City;
import Bean.Data;
import Bean.Mydata;
import Service.DataService;

/**
 * ShiMap2 implementation class ShiMap2
 */
@WebServlet("/ShiMap2")
public class ShiMap2 extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println(1);
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        String area = request.getParameter("area");
        String time = request.getParameter("time");
        String time1= "2020-02-12 10:14:15";
        System.out.println(time);
        
        List<Data> list = DataService.getAllinfo2(time,area);
        List<City> data = new ArrayList<City>();
        for(int i=1; i<list.size();i++) {
            City city = new City();
            city.setName(list.get(i).getCity());
            city.setValue(Integer.parseInt(list.get(i).getConfirmed_num()));
            data.add(city);
        }
        Gson gson = new Gson();
        String json = gson.toJson(data);
        response.getWriter().write(json);
    }
    
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
ShiMap2.java

五、运行截图

 

 

 

 

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode