使用ajax實現疫情視覺化

阿新 • • 發佈：2020-07-26

上學期由於種種原因這個專案完成的不是很好，假期重新做一個，用了一上午時間做出來，雖然還是有點粗糙，但相對於之前，進步還是有的。

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練習四.Util.DBUtil;
import com.ajax練習四.bean.Bean;
import com.sun.javafx.collections.MappingChange.Map;

import net.sf.json.JSONArray;

/**
 * Servlet implementation class Servlet
 */
@WebServlet("/Servlet")
 
public class Servlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        String date  
= request.getParameter("date");
        System.out.println(date);
        ArrayList<Bean> list = 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("cured_num",list.get(i).getCured_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);
    }

}

Servlet

package com.ajax練習四.bean;

public class Bean {
    public String id;
    public String date;
    public String province;
    public String confirmed_num;
    public String cured_num;
    public String dead_num;
    public String getId() {
        return id;
    }
    public void setId(String 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 getConfirmed_num() {
        return confirmed_num;
    }
    public void setConfirmed_num(String confirmed_num) {
        this.confirmed_num = confirmed_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;
    }
    

}

Bean

package com.ajax練習四.Util;

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.Bean;

public class 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;
    }  

    public static ArrayList<Bean> select(String date){
        ArrayList<Bean> list = new ArrayList<>();
        Connection connection = getConnection();
        String sql = "select * from info4 where date like '"+date+"%' ";
        try {
            PreparedStatement ps = connection.prepareStatement(sql);
            ResultSet rSet = ps.executeQuery();
            while(rSet.next())
            {
                Bean bean = new Bean();
                bean.setId(rSet.getString(1));
                bean.setDate(rSet.getString(2));
                bean.setProvince(rSet.getString(3));
                bean.setConfirmed_num(rSet.getString(5));
                bean.setCured_num(rSet.getString(7));
                bean.setDead_num(rSet.getString(8));
                list.add(bean);
            }
            for(Bean list2 :list)
            {
                System.out.println(list2.getId()+" "+list2.getDate()+" "+list2.getProvince()+" "+list2.getConfirmed_num()+" "+list2.getCured_num()+" "+list2.getDead_num());
                
            }
        } catch (SQLException e) {
            // TODO 自動生成的 catch 塊
            e.printStackTrace();
        }
        return list;
    }
    public static void main(String[] args) {
        // TODO 自動生成的方法存根
        String date = scanner.next();
        select(date);
    }

}

DBUtil

<%@ 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/world.js"></script>
<title>世界疫情資料</title>
</head>
<style>
.search{
background:lightyellow;
text-align:center;
width:100%;
height:30px;
}
.left_table{
background:lightgreen;
width:250px;
height:532px;
text-align:center;
}
#world{
width:700px;
height:532px;
position:relative;
left:250px;
bottom:532px;
text-align:center;
}
.right_table{
background:lightblue;
width:300px;
height:532px;
position:relative;
left:950px;
bottom:1064px;
text-align:center;
}
 table,table tr th, table tr td { border:1px solid black;width: 230px; }
 table {min-height: 25px; line-height: 25px; text-align:center; border-collapse: collapse; padding:2px;margin:auto;}   
</style>
<body>
<div class="search">請輸入日期：<input type="text" id="date">&nbsp;&nbsp;&nbsp;<input type="button" value="搜尋" onclick="fn()"></div>
<div class="left_table">疫情數量前15</div>
<div id="world"></div>
<div class="right_table">疫情柱形圖</div>
</body>
</html>
<script>
function fn(){
    var date = $("#date").val();
    $.post(
            "Servlet",
            {date:date},
            function(data){
                console.log(data);
                var num=[];
                var num2=[];
                var num3=[];
                for(var i=0;i<data.length;i++)
                {
                    num[i]={};
                    num[i].name = data[i].province;
                    num[i].value = data[i].confirmed_num;
                }
                
                for(var i=0;i<15;i++)
                {
                    var table="<table><tr><td>"+data[i].province+"</td><td>"+data[i].confirmed_num+"</td></tr></table>";
                    $(".left_table").append(table);
                }
                for(var i=0;i<10;i++)
                {
                    num2[i] = data[i].province;
                    num3[i] = data[i].confirmed_num
                }
                console.log(num2);
                console.log(num3);
               if(data[1].province!=null)
{            
//1.echarts初始化。
var myChart = echarts.init(document.querySelector("#world"));
//2.設定圖表配置項
 let nameMap = {
        Afghanistan: '阿富汗',
        Singapore: '新加坡',
        Angola: '安哥拉',
        Albania: '阿爾巴尼亞',
        'United Arab Emirates': '阿聯酋',
        Argentina: '阿根廷',
        Armenia: '亞美尼亞',
        'French Southern and Antarctic Lands':
            '法屬南半球和南極領地',
        Australia: '澳大利亞',
        Austria: '奧地利',
        Azerbaijan: '亞塞拜然',
        Burundi: '蒲隆地',
        Belgium: '比利時',
        Benin: '貝南',
        'Burkina Faso': '布吉納法索',
        Bangladesh: '孟加拉國',
        Bulgaria: '保加利亞',
        'The Bahamas': '巴哈馬',
        'Bosnia and Herzegovina': '波斯尼亞和黑塞哥維那',
        Belarus: '白俄羅斯',
        Belize: '貝里斯',
        Bermuda: '百慕大',
        Bolivia: '玻利維亞',
        Brazil: '巴西',
        Brunei: '汶萊',
        Bhutan: '不丹',
        Botswana: '波札那',
        'Central African Republic': '中非共和國',
        Canada: '加拿大',
        Switzerland: '瑞士',
        Chile: '智利',
        China: '中國',
        'Ivory Coast': '象牙海岸',
        Cameroon: '喀麥隆',
        'Democratic Republic of the Congo': '剛果民主共和國',
        'Republic of the Congo': '剛果共和國',
        Colombia: '哥倫比亞',
        'Costa Rica': '哥斯大黎加',
        Cuba: '古巴',
        'Northern Cyprus': '北塞普勒斯',
        Cyprus: '塞普勒斯',
        'Czech Republic': '捷克共和國',
        Germany: '德國',
        Djibouti: '吉布提',
        Denmark: '丹麥',
        'Dominican Republic': '多明尼加共和國',
        Algeria: '阿爾及利亞',
        Ecuador: '厄瓜多',
        Egypt: '埃及',
        Eritrea: '厄利垂亞',
        Spain: '西班牙',
        Estonia: '愛沙尼亞',
        Ethiopia: '衣索比亞',
        Finland: '芬蘭',
        Fiji: '斐',
        'Falkland Islands': '福克蘭群島',
        France: '法國',
        Gabon: '加彭',
        'United Kingdom': '英國',
        Georgia: '喬治亞',
        Ghana: '迦納',
        Guinea: '幾內亞',
        Gambia: '甘比亞',
        'Guinea Bissau': '幾內亞比索',
        Greece: '希臘',
        Greenland: '格陵蘭',
        Guatemala: '瓜地馬拉',
        'French Guiana': '法屬蓋亞那',
        Guyana: '蓋亞那',
        Honduras: '宏都拉斯',
        Croatia: '克羅埃西亞',
        Haiti: '海地',
        Hungary: '匈牙利',
        Indonesia: '印度尼西亞',
        India: '印度',
        Ireland: '愛爾蘭',
        Iran: '伊朗',
        Iraq: '伊拉克',
        Iceland: '冰島',
        Israel: '以色列',
        Italy: '義大利',
        Jamaica: '牙買加',
        Jordan: '約旦',
        Japan: '日本',
        Kazakhstan: '哈薩克',
        Kenya: '肯亞',
        Kyrgyzstan: '吉爾吉斯斯坦',
        Cambodia: '柬埔寨',
        Kosovo: '科索沃',
        Kuwait: '科威特',
        Laos: '寮國',
        Lebanon: '黎巴嫩',
        Liberia: '賴比瑞亞',
        Libya: '利比亞',
        'Sri Lanka': '斯里蘭卡',
        Lesotho: '賴索托',
        Lithuania: '立陶宛',
        Luxembourg: '盧森堡',
        Latvia: '拉脫維亞',
        Morocco: '摩洛哥',
        Moldova: '摩爾多瓦',
        Madagascar: '馬達加斯加',
        Mexico: '墨西哥',
        Macedonia: '馬其頓',
        Mali: '馬裡',
        Myanmar: '緬甸',
        Montenegro: '黑山',
        Mongolia: '蒙古',
        Mozambique: '莫三比克',
        Mauritania: '茅利塔尼亞',
        Malawi: '馬拉維',
        Malaysia: '馬來西亞',
        Namibia: '奈米比亞',
        'New Caledonia': '新喀里多尼亞',
        Niger: '尼日',
        Nigeria: '奈及利亞',
        Nicaragua: '尼加拉瓜',
        Netherlands: '荷蘭',
        Norway: '挪威',
        Nepal: '尼泊爾',
        'New Zealand': '紐西蘭',
        Oman: '阿曼',
        Pakistan: '巴基斯坦',
        Panama: '巴拿馬',
        Peru: '祕魯',
        Philippines: '菲律賓',
        'Papua New Guinea': '巴布亞紐幾內亞',
        Poland: '波蘭',
        'Puerto Rico': '波多黎各',
        'North Korea': '北朝鮮',
        Portugal: '葡萄牙',
        Paraguay: '巴拉圭',
        Qatar: '卡達',
        Romania: '羅馬尼亞',
        Russia: '俄羅斯',
        Rwanda: '盧安達',
        'Western Sahara': '西撒哈拉',
        'Saudi Arabia': '沙烏地阿拉伯',
        Sudan: '蘇丹',
        'South Sudan': '南蘇丹',
        Senegal: '塞內加爾',
        'Solomon Islands': '索羅門群島',
        'Sierra Leone': '獅子山',
        'El Salvador': '薩爾瓦多',
        Somaliland: '索馬利亞蘭',
        Somalia: '索馬利亞',
        'Republic of Serbia': '塞爾維亞',
        Suriname: '蘇利南',
        Slovakia: '斯洛伐克',
        Slovenia: '斯洛維尼亞',
        Sweden: '瑞典',
        Swaziland: '史瓦濟蘭',
        Syria: '敘利亞',
        Chad: '查德',
        Togo: '多哥',
        Thailand: '泰國',
        Tajikistan: '塔吉克',
        Turkmenistan: '土庫曼',
        'East Timor': '東帝汶',
        'Trinidad and Tobago': '特里尼達和多巴哥',
        Tunisia: '突尼西亞',
        Turkey: '土耳其',
        'United Republic of Tanzania': '坦尚尼亞',
        Uganda: '烏干達',
        Ukraine: '烏克蘭',
        Uruguay: '烏拉圭',
        'United States': '美國',
        Uzbekistan: '烏茲別克',
        Venezuela: '委內瑞拉',
        Vietnam: '越南',
        Vanuatu: '萬那杜',
        'West Bank': '西岸',
        Yemen: '葉門',
        'South Africa': '南非',
        Zambia: '尚比亞',
        Korea: '韓國',
        Tanzania: '坦尚尼亞',
        Zimbabwe: '辛巴威',
        Congo: '剛果',
        'Central African Rep.': '中非',
        Serbia: '塞爾維亞',
        'Bosnia and Herz.': '波黑',
        'Czech Rep.': '捷克',
        'W. Sahara': '西撒哈拉',
        'Lao PDR': '寮國',
        'Dem.Rep.Korea': '朝鮮',
        'Falkland Is.': '福克蘭群島',
        'Timor-Leste': '東帝汶',
        'Solomon Is.': '索羅門群島',
        Palestine: '巴勒斯坦',
        'N. Cyprus': '北塞普勒斯',
        Aland: '奧蘭群島',
        'Fr. S. Antarctic Lands': '法屬南半球和南極陸地',
        Mauritius: '模里西斯',
        Comoros: '葛摩',
        'Eq. Guinea': '赤道幾內亞',
        'Guinea-Bissau': '幾內亞比索',
        'Dominican Rep.': '多明尼加',
        'Saint Lucia': '聖露西亞',
        Dominica: '多米尼克',
        'Antigua and Barb.': '安地卡及巴布達',
        'U.S. Virgin Is.': '美國原始島嶼',
        Montserrat: '蒙塞拉特',
        Grenada: '格瑞那達',
        Barbados: '巴貝多',
        Samoa: '薩摩亞',
        Bahamas: '巴哈馬',
        'Cayman Is.': '開曼群島',
        'Faeroe Is.': '法羅群島',
        'IsIe of Man': '馬恩島',
        Malta: '馬耳他共和國',
        Jersey: '澤西',
        'Cape Verde': '維德角共和國',
        'Turks and Caicos Is.': '特克斯和凱科斯群島',
        'St. Vin. and Gren.': '聖文森及格瑞那丁'
    },

        option = {
            title: {
                text: '全球疫情圖:現存',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                type: 'piecewise',
                pieces: [
                    { min: 10000, max: 1000000, label: '>=10000', color: '#550101' },
                    { min: 1000, max: 9999, label: '1000-9999', color: '#a92919' },
                    { min: 500, max: 999, label: '500-999', color: '#af4e41' },
                    { min: 100, max: 499, label: '100-499', color: '#ee7263' },
                    { min: 10, max: 99, label: '10-99', color: '#f5bba7' },
                    { min: 1, max: 9, label: '1-9', color: '#fdf2d5' },
                    { min: 0, max: 0, label: '無確證', color: '#fefefe' },
                ],
                color: ['#E0022B', '#E09107', '#A3E00B']
            },
            nameMap: nameMap,
            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: {
                    'world': true
                }
            },
            series: [
                {
                    name: '現存數',
                    type: 'map',
                    mapType: 'world',
                    roam: false,
                    label: {
                        show: false,   // 這裡就不在地圖上顯示名字了，200多個會暈的
                        color: 'rgb(0, 0, 0)'
                    },
                    data:num
                }
            ]
        };
myChart.setOption(option);
}
               
//1.echarts初始化。
var myChart = echarts.init(document.querySelector(".right_table"));    
var dataAxis = num2;
var data = num3;
var yMax = 800000;
var dataShadow = [];

for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}

option = {
    xAxis: {
        data: dataAxis,
        axisLabel: {
            inside: true,
            textStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                color: 'rgba(0,0,0,0.05)'
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: dataShadow,
            animation: false
        },
        {
            type: 'bar',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            data: data
        }
    ]
};

// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function (params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    myChart.dispatchAction({
        type: 'dataZoom',
        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    });
});
           
myChart.setOption(option);    
            },
            "json"
    )
}
</script>