使用mvc架构利用Ajax绘制中国疫情地图

 

 

package com.Ajax练习.bean;

public class word_bean {
    public int id;
    public String date;
    public String province;
    public String city;
    public String confirmed_num;
    public String yisi_num;
    public String cured_num;
    public String dead_num;
    public String code;
    
    

    public int getId() {
        return id;
    }



    public void setId(int id) {
        this.id = id;
    }



    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 String getCity() {
        return city;
    }



    public void setCity(String city) {
        this.city = city;
    }



    public String getConfirmed_num() {
        return confirmed_num;
    }



    public void setConfirmed_num(String confirmed_num) {
        this.confirmed_num = confirmed_num;
    }



    public String getYisi_num() {
        return yisi_num;
    }



    public void setYisi_num(String yisi_num) {
        this.yisi_num = yisi_num;
    }



    public String getCured_num() {
        return cured_num;
    }



    public void setCured_num(String cured_num) {
        this.cured_num = cured_num;
    }



    public String getDead_num() {
        return dead_num;
    }



    public void setDead_num(String dead_num) {
        this.dead_num = dead_num;
    }



    public String getCode() {
        return code;
    }



    public void setCode(String code) {
        this.code = code;
    }



    public static void main(String[] args) {
        // TODO 自动生成的方法存根

    }

}

package com.Ajax练习.DBUtil;

import java.awt.List;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import com.Ajax练习.bean.word_bean;
import com.mysql.cj.xdevapi.JsonArray;
import com.mysql.cj.xdevapi.JsonValue;

import net.sf.json.JSONObject;
import net.sf.json.JSONArray;

public class world_DBUtil {
    public static String URL="jdbc:mysql://localhost:3306/payiqing?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true";
    public static String username="root";
    public static String password="123456";
    static java.util.Scanner scanner =  new java.util.Scanner(System.in);
    //数据库连接
    public static Connection getConnection()
    {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            //Class.forName("com.mysql.cj.jdbc.Driver");
            return DriverManager.getConnection(URL, username, password);
        } catch (Exception e) {
            // TODO: handle exception
            System.out.println("数据库连接失败");
            e.printStackTrace();
        }
        return null;
    }  static public ArrayList<word_bean> select(String date)
    {
        Connection connection = getConnection();
        String sql = "select * from info1 where date like '"+date+"%'";
        ArrayList<word_bean> list = new ArrayList<>();
        try {
            PreparedStatement ps = connection.prepareStatement(sql);
            
            ResultSet rSet = ps.executeQuery();
            while(rSet.next())
            {
                word_bean bean = new word_bean();
                bean.setId(rSet.getInt(1));
                bean.setDate(rSet.getString(2));
                bean.setProvince(rSet.getString(3));
                bean.setConfirmed_num(rSet.getString(5));
                bean.setYisi_num(rSet.getString(6));
                bean.setCured_num(rSet.getString(7));
                bean.setDead_num(rSet.getString(8));
                bean.setCode(rSet.getString(9));
                list.add(bean);
            }
            for(int i=0;i<list.size();i++)
            {
                int id = list.get(i).getId();
                String province = list.get(i).getProvince();
                String confirmed_num = list.get(i).getConfirmed_num();
                String yisi_num = list.get(i).getYisi_num();
                String cured_num = list.get(i).getCured_num();
                String dead_num = list.get(i).getDead_num();
                String code = list.get(i).getCode();
                System.out.println(id+" "+province+" "+confirmed_num+" "+yisi_num+" "+cured_num+" "+dead_num+" "+code);
            }
            
        } catch (SQLException e) {
            // TODO 自动生成的 catch 块
            e.printStackTrace();
        }
        return list;
    }

    public static void main(String[] args) {
        // TODO 自动生成的方法存根
       String date = scanner.next();
       select(date);
    }

}

package com.Ajax练习.servlet;

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

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.Ajax练习.DBUtil.world_DBUtil;
import com.Ajax练习.bean.word_bean;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
 * Servlet implementation class world_servlet
 */
@WebServlet("/world_servlet")
public class world_servlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    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 date = request.getParameter("date");
        System.out.println(date);
        ArrayList<word_bean> list = world_DBUtil.select(date);
        JSONArray jsonArray = new JSONArray();
        for(int i = 0;i<list.size(); i++) {
            java.util.Map<String,Object> map = new HashMap<String, Object>();
            map.put("province", list.get(i).getProvince());
            map.put("confirmed_num", list.get(i).getConfirmed_num());
            map.put("yisi_num", list.get(i).getYisi_num());
            map.put("dead_num", list.get(i).getDead_num());
            jsonArray.add(map);
        }
        response.getWriter().write(jsonArray.toString());
        
    }

    /**
     * @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);
    }

}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src = "js/echarts.min.js"></script>
<script src="js/china.js"></script>
 <script type="text/javascript" src="js/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<style>
   .search{
   width:800px;
   height:60px;
   position:absolute;
   left:280px;
   text-align:center;
   padding-top:10px;
   }
   .box{
   width:800px;
   height:560px;
   position:absolute;
   left:280px;
   top:60px;
   }
</style>
 <body >
 <div class="search">请输入日期:<input type="text" id="date">&nbsp;&nbsp;<input type="button" value="搜索" onclick="fn()"></div>
 <div class="box"></div>
 </body>
<script>
function fn(){
    var date = $("#date").val()
    $.post(
        "world_servlet",
        {date:date},
        function (data){
            if(data[1]!=null)
            {
                var num = [];
                for(var i=0;i<data.length;i++)
                {
                    num[i]={};
                    num[i].name = data[i].province;
                    num[i].value = data[i].confirmed_num;
                }
               //1.echarts初始化。
                var myChart = echarts.init(document.querySelector(".box"));
                //2.设置图表配置项
            var option = {
             title: {
                text: '中国疫情地图',
                subtext: '作者：杨青',
                left: 'center'
             },
              tooltip: {
                trigger: 'item'
            },
             legend: {
                orient: 'vertical',
                left: 'left',
                data: ['中国疫情数据']
            },
            visualMap: {
                type: 'piecewise',
                pieces: [
                    {min: 10000},
                    {min: 5000, max: 10000},
                    {min: 1000, max: 5000},
                    {min: 100, max: 1000},
                    {min: 0,max: 100}
                ],
                color: ['#E0022B', '#E09107', '#A3E00B']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            roamController: {
                show: true,
                left: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series: [
                {
                    name: '中国疫情数据',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        show: true,
                        color: 'black'
                    },
                    data:num
                }
            ]
};
myChart.setOption(option);
            }
        },
        "json"
    )
}    
</script>