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

一、要求

二、思路

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

五、运行截图

posted @ 2020-03-08 23:52 xppp11 阅读(198) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Noor9

夯实基础，提高阅读能力

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

公告