前言
本项目我们采用阿里云的云服务器，配合开课吧提供的疫情数据，完成疫情地图的上线，意在熟悉使用流程。
- 大部分前端代码已经提供，只需部分修改。
- 租用的阿里云服务器总体费用不会超过0.2元，但是需要在阿里云中充值100元才能使用服务，不必担心，项目关闭24小时后即可将保证金退回，三个月内申请退回原路径都是秒到账。
- 前端代码 链接：https://pan.baidu.com/s/1TIXGaFjkC8zb6u6O7MRADA
提取码：2yi5
阿里云服务器的搭建
首先打开浏览器输入https://www.aliyun.com/ 进入阿里云官网，本次购买的是阿里云目前云服务器使用量最高的云服务器ECS，按照下图操作即可。
基础配置
我们只是一个测试，流量很小，采用按量付费即可，地域一般选取离自己近的地方，这里张家口这个有优惠，作为测试，我们选取有优惠的张家口。
接着我们选择2核cpu 和2G的内存，选择价格比较便宜的突发性能实例t6。
这里的价格主要体现在平均基准CPU计算性能，我们选择的突发性能实例t6，一天内只有六个小时的时间可以发挥100%性能，其余时间只用到20%，而且购买之后前6个小时（我们只需要使用一个小时即可完成测试）是发挥100%的性能，也就是说0.082的价格有着0.44的性能。
而且大部分的项目也不需要全天都高效率，比如外卖系统高峰期只有中午和晚上的几个小时，所以这种服务器很合算。
网络和安全组
这里我们先只配置网络，安全组比较麻烦，在后面进行配置。
系统配置
这里的账户是root，密码自己设置，后面会用到。
服务器的配置管理
安全组配置
目的 中的80代表访问80端口,此端口做为疫情地图默认访问端口
源 选择0.0.0.0/0代表发布的项目所有用户都可以访问
目的 中的8888代表访问8888端口,此端口作为疫情地图管理端
源 选择0.0.0.0/0代表发布的项目所有用户都可以访问
至此安全组配置也告一段。
远程连接并配置
接下来返回我们的控制台进行连接及配置
账号为root ,密码为系统配置时自己配置的密码。
命令行中输入
bt default初始化我们的宝塔面板，初始化完成后弹出面板网址及账号密码
复制网址在网页中打开，输入账号密码，登录
登录后出现了软件安装界面，我们不安装这些，关掉即可
我们按照下面步骤安装 tomcat，按章完毕后第三个框中的安装会变成卸载，安装时间一般在两分钟左右
因为tomcat 默认端口是8080 ，而我们刚刚指定的疫情地图的端口为80，所以这里需要修改一下tomcat的端口配置
保存以后还需重启服务器才能生效，一定要重启服务器
此时在浏览器中访问我们的80 端口便可以显示出以下内容
接下来我们修改网页显示的内容
按下图目录进行点击即可找到index.jsp文件，此文件为前端网页显示的内容。
将以下两个前端代码导入即可在网页中查看到静态的(数据是静态的，还未导入动态数据)疫情地图
index.html(前端代码)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>疫情地图</title>
<script type="text/javascript">
var data = {"data":[{"name":"湖北","value":123},{"name":"广东","value":1590},{"name":"河南","value":1276},{"name":"浙江","value":1268},{"name":"香港","value":1055},{"name":"湖南","value":1019},{"name":"安徽","value":991},{"name":"黑龙江","value":945},{"name":"江西","value":937},{"name":"山东","value":788},{"name":"上海","value":667},{"name":"江苏","value":653},{"name":"北京","value":593},{"name":"重庆","value":579},{"name":"四川","value":561},{"name":"台湾","value":440},{"name":"福建","value":356},{"name":"河北","value":328},{"name":"陕西","value":308},{"name":"广西","value":254},{"name":"内蒙古","value":217},{"name":"山西","value":198},{"name":"天津","value":192},{"name":"云南","value":185},{"name":"海南","value":169},{"name":"吉林","value":152},{"name":"辽宁","value":149},{"name":"贵州","value":147},{"name":"甘肃","value":139},{"name":"新疆","value":76},{"name":"宁夏","value":75},{"name":"澳门","value":45},{"name":"青海","value":18},{"name":"西藏","value":1}],"today":[{"name":"湖北","value":0},{"name":"广东","value":0},{"name":"河南","value":0},{"name":"浙江","value":0},{"name":"香港","value":0},{"name":"湖南","value":0},{"name":"安徽","value":0},{"name":"黑龙江","value":0},{"name":"江西","value":0},{"name":"山东","value":0},{"name":"上海","value":1},{"name":"江苏","value":0},{"name":"北京","value":0},{"name":"重庆","value":0},{"name":"四川","value":0},{"name":"台湾","value":0},{"name":"福建","value":0},{"name":"河北","value":0},{"name":"陕西","value":0},{"name":"广西","value":0},{"name":"内蒙古","value":1},{"name":"山西","value":0},{"name":"天津","value":0},{"name":"云南","value":0},{"name":"海南","value":0},{"name":"吉林","value":4},{"name":"辽宁","value":0},{"name":"贵州","value":0},{"name":"甘肃","value":0},{"name":"新疆","value":0},{"name":"宁夏","value":0},{"name":"澳门","value":0},{"name":"青海","value":0},{"name":"西藏","value":0}],"g_today":[{"name":"突尼斯","value":0},{"name":"塞尔维亚","value":34},{"name":"中国","value":6},{"name":"日本","value":0},{"name":"泰国","value":1},{"name":"新加坡","value":570},{"name":"韩国","value":32},{"name":"澳大利亚","value":11},{"name":"德国","value":440},{"name":"美国","value":21243},{"name":"马来西亚","value":37},{"name":"越南","value":0},{"name":"圣巴泰勒米","value":0},{"name":"肯尼亚","value":0},{"name":"伊朗","value":2111},{"name":"以色列","value":16},{"name":"毛利亚尼亚","value":0},{"name":"黎巴嫩","value":26},{"name":"克罗地亚","value":4},{"name":"奥地利","value":52},{"name":"瑞士","value":21},{"name":"希腊","value":6},{"name":"毛里求斯","value":0},{"name":"爱沙尼亚","value":0},{"name":"北马其顿","value":0},{"name":"白俄罗斯","value":936},{"name":"立陶宛","value":15},{"name":"阿塞拜疆","value":131},{"name":"美属维尔京群岛","value":0},{"name":"蒙古","value":0},{"name":"乌克兰","value":354},{"name":"波兰","value":383},{"name":"波斯尼亚","value":0},{"name":"波黑","value":31},{"name":"蒙特塞拉特","value":0},{"name":"南非","value":767},{"name":"布隆迪","value":0},{"name":"南苏丹","value":0},{"name":"马耳他","value":0},{"name":"摩尔多瓦","value":280},{"name":"保加利亚","value":33},{"name":"孟加拉国","value":1251},{"name":"阿尔巴尼亚","value":0},{"name":"巴勒斯坦","value":0},{"name":"科摩罗","value":0},{"name":"阿富汗","value":581},{"name":"沙特阿拉伯","value":2509},{"name":"新西兰","value":0},{"name":"塔吉克斯坦","value":207},{"name":"泽西岛","value":0},{"name":"叙利亚","value":0},{"name":"巴拿马","value":141},{"name":"古巴","value":0},{"name":"尼日利亚","value":226},{"name":"摩洛哥","value":71},{"name":"塞内加尔","value":73},{"name":"老挝","value":0},{"name":"巴哈马","value":0},{"name":"马约特岛","value":0},{"name":"斯洛文尼亚","value":0},{"name":"卢森堡","value":13},{"name":"爱尔兰","value":51},{"name":"厄瓜多尔","value":569},{"name":"捷克","value":36},{"name":"匈牙利","value":42},{"name":"法属圭亚那","value":0},{"name":"多哥共和国","value":0},{"name":"哥斯达黎加","value":0},{"name":"文莱","value":0},{"name":"法罗群岛","value":0},{"name":"马提尼克岛","value":0},{"name":"荷兰","value":108},{"name":"巴西","value":17665},{"name":"洪都拉斯","value":157},{"name":"乌拉圭","value":0},{"name":"秘鲁","value":4550},{"name":"智利","value":3520},{"name":"格陵兰","value":0},{"name":"圣巴托洛谬岛","value":0},{"name":"马尔代夫","value":0},{"name":"委内瑞拉","value":208},{"name":"毛里塔尼亚","value":50},{"name":"纳米比亚","value":0},{"name":"法属留尼汪岛","value":0},{"name":"波多黎各","value":159},{"name":"加纳","value":361},{"name":"赤道几内亚","value":0},{"name":"几内亚","value":67},{"name":"卢旺达","value":0},{"name":"格林纳达","value":0},{"name":"斯威士兰","value":0},{"name":"坦桑尼亚","value":0},{"name":"贝宁","value":0},{"name":"刚果（金）","value":102},{"name":"中非共和国","value":45},{"name":"利比里亚","value":0},{"name":"索马里","value":0},{"name":"塞拉利昂","value":0},{"name":"乍得","value":0},{"name":"赞比亚","value":0},{"name":"巴巴多斯","value":0},{"name":"马里","value":0},{"name":"阿根廷","value":741},{"name":"法属波利尼西亚","value":0},{"name":"巴林","value":376},{"name":"莫桑比克","value":0},{"name":"喀麦隆","value":0},{"name":"乌干达","value":0},{"name":"厄立特里亚","value":0},{"name":"刚果（布）","value":8},{"name":"津巴布韦","value":0},{"name":"丹麦","value":76},{"name":"阿鲁巴","value":0},{"name":"斐济","value":0},{"name":"伯利兹","value":0},{"name":"缅甸","value":2},{"name":"塞浦路斯","value":0},{"name":"关岛","value":0},{"name":"科索沃","value":0},{"name":"吉尔吉斯斯坦","value":27},{"name":"博茨瓦纳","value":0},{"name":"尼日尔","value":0},{"name":"苏里南","value":0},{"name":"佛得角","value":7},{"name":"萨尔瓦多","value":73},{"name":"圭亚那","value":0},{"name":"尼加拉瓜","value":0},{"name":"冈比亚","value":0},{"name":"东帝汶","value":0},{"name":"巴基斯坦","value":837},{"name":"埃及","value":720},{"name":"科威特","value":1073},{"name":"斯洛伐克","value":0},{"name":"直布罗陀","value":0},{"name":"摩纳哥","value":0},{"name":"巴拉圭","value":0},{"name":"荷属安的列斯","value":0},{"name":"多米尼克","value":0},{"name":"乌兹别克斯坦","value":78},{"name":"黑山","value":0},{"name":"危地马拉","value":132},{"name":"加蓬","value":70},{"name":"苏丹","value":137},{"name":"利比亚","value":0},{"name":"圣马丁岛","value":0},{"name":"土耳其","value":1022},{"name":"巴布亚新几内亚","value":0},{"name":"多米尼加共和国","value":909},{"name":"约旦","value":0},{"name":"亚美尼亚","value":230},{"name":"圣基茨和尼维斯","value":0},{"name":"瓜德罗普","value":0},{"name":"安提瓜和巴布达","value":0},{"name":"玻利维亚","value":218},{"name":"哥伦比亚","value":640},{"name":"圣文森特和格林纳丁斯","value":0},{"name":"圣卢西亚","value":0},{"name":"法国","value":882},{"name":"阿联酋","value":873},{"name":"加拿大","value":1040},{"name":"印度","value":141},{"name":"英国","value":2412},{"name":"意大利","value":813},{"name":"俄罗斯","value":8764},{"name":"菲律宾","value":279},{"name":"芬兰","value":19},{"name":"尼泊尔","value":0},{"name":"葡萄牙","value":223},{"name":"也门","value":0},{"name":"塞舌尔","value":0},{"name":"西班牙","value":615},{"name":"斯里兰卡","value":35},{"name":"阿尔及利亚","value":176},{"name":"柬埔寨","value":0},{"name":"海地","value":63},{"name":"瑞典","value":422},{"name":"特里尼达和多巴哥","value":0},{"name":"吉布提","value":100},{"name":"圣多美与普林西比","value":5},{"name":"布基纳法索","value":0},{"name":"比利时","value":232},{"name":"伊拉克","value":57},{"name":"马拉维","value":0},{"name":"冰岛","value":0},{"name":"几内亚比绍","value":6},{"name":"拉脱维亚","value":4},{"name":"不丹","value":0},{"name":"挪威","value":18},{"name":"印度尼西亚","value":486},{"name":"安哥拉","value":0},{"name":"开曼群岛","value":17},{"name":"埃塞俄比亚","value":0},{"name":"梵蒂冈","value":0},{"name":"科特迪瓦","value":44},{"name":"卡塔尔","value":1637},{"name":"莱索托","value":0},{"name":"格鲁吉亚","value":6},{"name":"墨西哥","value":2713},{"name":"圣马力诺","value":0},{"name":"哈萨克斯坦","value":218},{"name":"安道尔","value":0},{"name":"牙买加","value":0},{"name":"格恩西岛","value":0},{"name":"罗马尼亚","value":155},{"name":"阿曼","value":292},{"name":"列支敦士登","value":0},{"name":"马达加斯加","value":0}],"g_data":[{"name":"突尼斯","value":1044},{"name":"塞尔维亚","value":10733},{"name":"中国","value":84506},{"name":"日本","value":17106},{"name":"泰国","value":3034},{"name":"新加坡","value":29364},{"name":"韩国","value":11110},{"name":"澳大利亚","value":7079},{"name":"德国","value":177827},{"name":"美国","value":1570075},{"name":"马来西亚","value":6978},{"name":"越南","value":324},{"name":"圣巴泰勒米","value":6},{"name":"肯尼亚","value":963},{"name":"伊朗","value":124603},{"name":"以色列","value":16659},{"name":"毛利亚尼亚","value":16},{"name":"黎巴嫩","value":954},{"name":"克罗地亚","value":2232},{"name":"奥地利","value":16321},{"name":"瑞士","value":30618},{"name":"希腊","value":2840},{"name":"毛里求斯","value":332},{"name":"爱沙尼亚","value":1791},{"name":"北马其顿","value":1839},{"name":"白俄罗斯","value":31508},{"name":"立陶宛","value":1562},{"name":"阿塞拜疆","value":3518},{"name":"美属维尔京群岛","value":69},{"name":"蒙古","value":140},{"name":"乌克兰","value":19230},{"name":"波兰","value":19268},{"name":"波斯尼亚","value":1421},{"name":"波黑","value":2321},{"name":"蒙特塞拉特","value":11},{"name":"南非","value":17200},{"name":"布隆迪","value":42},{"name":"南苏丹","value":347},{"name":"马耳他","value":569},{"name":"摩尔多瓦","value":6340},{"name":"保加利亚","value":2292},{"name":"孟加拉国","value":25121},{"name":"阿尔巴尼亚","value":949},{"name":"巴勒斯坦","value":391},{"name":"科摩罗","value":11},{"name":"阿富汗","value":7653},{"name":"沙特阿拉伯","value":59854},{"name":"新西兰","value":1503},{"name":"塔吉克斯坦","value":1936},{"name":"泽西岛","value":293},{"name":"叙利亚","value":58},{"name":"巴拿马","value":9867},{"name":"古巴","value":1887},{"name":"尼日利亚","value":6401},{"name":"摩洛哥","value":7023},{"name":"塞内加尔","value":2617},{"name":"老挝","value":19},{"name":"巴哈马","value":96},{"name":"马约特岛","value":1370},{"name":"斯洛文尼亚","value":1467},{"name":"卢森堡","value":3958},{"name":"爱尔兰","value":24251},{"name":"厄瓜多尔","value":34151},{"name":"捷克","value":8683},{"name":"匈牙利","value":3598},{"name":"法属圭亚那","value":218},{"name":"多哥共和国","value":338},{"name":"哥斯达黎加","value":882},{"name":"文莱","value":141},{"name":"法罗群岛","value":187},{"name":"马提尼克岛","value":192},{"name":"荷兰","value":44249},{"name":"巴西","value":271885},{"name":"洪都拉斯","value":2955},{"name":"乌拉圭","value":738},{"name":"秘鲁","value":99483},{"name":"智利","value":49579},{"name":"格陵兰","value":11},{"name":"圣巴托洛谬岛","value":6},{"name":"马尔代夫","value":1143},{"name":"委内瑞拉","value":749},{"name":"毛里塔尼亚","value":131},{"name":"纳米比亚","value":16},{"name":"法属留尼汪岛","value":446},{"name":"波多黎各","value":2805},{"name":"加纳","value":6096},{"name":"赤道几内亚","value":825},{"name":"几内亚","value":2863},{"name":"卢旺达","value":308},{"name":"格林纳达","value":22},{"name":"斯威士兰","value":208},{"name":"坦桑尼亚","value":509},{"name":"贝宁","value":339},{"name":"刚果（金）","value":1731},{"name":"中非共和国","value":411},{"name":"利比里亚","value":233},{"name":"索马里","value":1502},{"name":"塞拉利昂","value":534},{"name":"乍得","value":545},{"name":"赞比亚","value":772},{"name":"巴巴多斯","value":90},{"name":"马里","value":901},{"name":"阿根廷","value":8809},{"name":"法属波利尼西亚","value":60},{"name":"巴林","value":7532},{"name":"莫桑比克","value":146},{"name":"喀麦隆","value":3529},{"name":"乌干达","value":260},{"name":"厄立特里亚","value":39},{"name":"刚果（布）","value":420},{"name":"津巴布韦","value":46},{"name":"丹麦","value":11044},{"name":"阿鲁巴","value":101},{"name":"斐济","value":18},{"name":"伯利兹","value":18},{"name":"缅甸","value":193},{"name":"塞浦路斯","value":1009},{"name":"关岛","value":154},{"name":"科索沃","value":813},{"name":"吉尔吉斯斯坦","value":1270},{"name":"博茨瓦纳","value":25},{"name":"尼日尔","value":914},{"name":"苏里南","value":11},{"name":"佛得角","value":335},{"name":"萨尔瓦多","value":1571},{"name":"圭亚那","value":125},{"name":"尼加拉瓜","value":254},{"name":"冈比亚","value":24},{"name":"东帝汶","value":24},{"name":"巴基斯坦","value":45898},{"name":"埃及","value":13484},{"name":"科威特","value":16764},{"name":"斯洛伐克","value":1495},{"name":"直布罗陀","value":147},{"name":"摩纳哥","value":97},{"name":"巴拉圭","value":829},{"name":"荷属安的列斯","value":16},{"name":"多米尼克","value":16},{"name":"乌兹别克斯坦","value":2880},{"name":"黑山","value":324},{"name":"危地马拉","value":2133},{"name":"加蓬","value":1502},{"name":"苏丹","value":2728},{"name":"利比亚","value":68},{"name":"圣马丁岛","value":77},{"name":"土耳其","value":151615},{"name":"巴布亚新几内亚","value":8},{"name":"多米尼加共和国","value":13223},{"name":"约旦","value":649},{"name":"亚美尼亚","value":5271},{"name":"圣基茨和尼维斯","value":15},{"name":"瓜德罗普","value":155},{"name":"安提瓜和巴布达","value":25},{"name":"玻利维亚","value":4481},{"name":"哥伦比亚","value":16935},{"name":"圣文森特和格林纳丁斯","value":17},{"name":"圣卢西亚","value":18},{"name":"法国","value":180809},{"name":"阿联酋","value":25063},{"name":"加拿大","value":79112},{"name":"印度","value":106886},{"name":"英国","value":248818},{"name":"意大利","value":226699},{"name":"俄罗斯","value":308705},{"name":"菲律宾","value":13221},{"name":"芬兰","value":6399},{"name":"尼泊尔","value":402},{"name":"葡萄牙","value":29432},{"name":"也门","value":167},{"name":"塞舌尔","value":11},{"name":"西班牙","value":278803},{"name":"斯里兰卡","value":1027},{"name":"阿尔及利亚","value":7377},{"name":"柬埔寨","value":122},{"name":"海地","value":596},{"name":"瑞典","value":30799},{"name":"特里尼达和多巴哥","value":116},{"name":"吉布提","value":1618},{"name":"圣多美与普林西比","value":251},{"name":"布基纳法索","value":796},{"name":"比利时","value":55791},{"name":"伊拉克","value":3611},{"name":"马拉维","value":70},{"name":"冰岛","value":1802},{"name":"几内亚比绍","value":1038},{"name":"拉脱维亚","value":1016},{"name":"不丹","value":21},{"name":"挪威","value":8267},{"name":"印度尼西亚","value":18496},{"name":"安哥拉","value":52},{"name":"开曼群岛","value":111},{"name":"埃塞俄比亚","value":365},{"name":"梵蒂冈","value":12},{"name":"科特迪瓦","value":2153},{"name":"卡塔尔","value":35606},{"name":"莱索托","value":1},{"name":"格鲁吉亚","value":713},{"name":"墨西哥","value":54346},{"name":"圣马力诺","value":655},{"name":"哈萨克斯坦","value":6969},{"name":"安道尔","value":761},{"name":"牙买加","value":520},{"name":"格恩西岛","value":252},{"name":"罗马尼亚","value":17191},{"name":"阿曼","value":5671},{"name":"列支敦士登","value":82},{"name":"马达加斯加","value":326}]};
</script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
<script src="http://cdn.zaixianke.com/china.js"></script>
<script src="http://cdn.zaixianke.com/world.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:600px;"></div> <br>
<div style="text-align:center">
<a style="color:#333" class="control" align="center" href="javascript:updateMap(0)">国内累计</a>
<a style="color:#333" class="control" align="center" href="javascript:updateMap(1)">国内新增</a>
<a style="color:#333" class="control" align="center" href="javascript:updateMap(2)">全球累计</a>
<a style="color:#333" class="control" align="center" href="javascript:updateMap(3)">全球新增</a>
</div>
<script src="control.js"></script>
</body>
</html>control.js(视觉映射)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
function updateMap(num){
$(".control").show();
$(".control:eq("+num+")").hide();
myChart.clear();
var opt = null;
switch(num){
case 0:{
opt = {
// 设置标题和副标题及副标题跳转链接
title: {
text: '新冠疫情-国内累计数据-zl版',
subtext: '数据来源--开课吧'
},
// 数据提示框
tooltip: {
trigger: 'item', // item放到数据区域触发
formatter: function (params, ticket, callback) {
if(params.data)
return params.name+'<br/>'+params.data.value+' (人)';
else
return params.name+'<br/>无疫情信息';
}
},
// 视觉映射方案:
// visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
// 使用透明度来区分疫情严重情况
visualMap: {
type: 'piecewise',
pieces: [
{gt: 2000, color: 'darkred'}, // (1500, Infinity]
{gt: 1300, lte: 2000, color: 'red', colorAlpha: 1}, // (1000, 1500]
{gt: 800, lte: 1300, color: 'red', colorAlpha: 0.8},
{gt: 500, lte: 800, color: 'red', colorAlpha: 0.6},
{gt: 200, lte: 500, color: 'red', colorAlpha: 0.4},
{gt: 50, lte: 200, color: 'red', colorAlpha: 0.3},
{lt: 50, color: 'red', colorAlpha: 0.2} // (-Infinity, 100)
],
},
// 具体数据
series: [
{
name: '国内各省确诊病例', // 系列名称
zoom:1.2,//地图大小
type: 'map', // 系列类型，地图
map: 'china', // 要使用的地图，即上面注册的地图名称
roam: true, // 开启鼠标缩放和平移漫游
label: { // 图形上的文本标签，地图默认显示数据名
show: true,
formatter: '{b}', // b是数据名，c是数据值
fontSize: 8
},
data: data.data,
}
]
};
}
break;
case 1:{
opt = {
// 设置标题和副标题及副标题跳转链接
title: {
text: '新冠疫情-国内新增数据',
subtext: '数据来源--开课吧',
sublink: 'https://www.kaikeba.com'
},
// 数据提示框
tooltip: {
trigger: 'item', // item放到数据区域触发
formatter: function (params, ticket, callback) {
if(params.data)
return params.name+'<br/>'+params.data.value+' (人)';
else
return params.name+'<br/>无疫情信息';
}
},
// 视觉映射方案:
// visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
// 使用透明度来区分疫情严重情况
visualMap: {
type: 'piecewise',
pieces: [
{gt: 50, color: 'darkred'}, // (1500, Infinity]
{gt: 30, lte: 50, color: 'red', colorAlpha: 1}, // (1000, 1500]
{gt: 20, lte: 30, color: 'red', colorAlpha: 0.8},
{gt: 10, lte: 20, color: 'red', colorAlpha: 0.6},
{gt: 5, lte: 10, color: 'red', colorAlpha: 0.4},
{gt: 1, lte: 5, color: 'red', colorAlpha: 0.3},
{lt: 1, color: 'red', colorAlpha: 0.0} // (-Infinity, 100)
],
},
// 具体数据
series: [
{
name: '国内各省确诊病例', // 系列名称
zoom:1.2,//地图大小
type: 'map', // 系列类型，地图
map: 'china', // 要使用的地图，即上面注册的地图名称
roam: true, // 开启鼠标缩放和平移漫游
label: { // 图形上的文本标签，地图默认显示数据名
show: true,
formatter: '{b}', // b是数据名，c是数据值
fontSize: 8
},
data: data.today,
}
]
};
}
break;
case 2:{
opt = {
// 设置标题和副标题及副标题跳转链接
title: {
text: '新冠疫情-全球累计数据',
subtext: '数据来源--开课吧',
sublink: 'https://www.kaikeba.com'
},
// 数据提示框
tooltip: {
trigger: 'item', // item放到数据区域触发
//formatter: '{b}<br/>{c} (人)' // 提示数据格式br表示换行，地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
formatter:function (params, ticket, callback) {
if(params.data)
return params.name+'<br/>'+params.data.value+' (人)';
else
return params.name+'<br/> 未公布感染人数';
}
},
// 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
// 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
/**/
visualMap: {
min: 1, // 颜色映射对应的最小值，即对应下面的lightskyblue
max: 500000, // 颜色映射对应的最大值，即对应下面的orangered
text: ['严重', '轻微'], // 映射图上下标记文本
realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
calculable: true, // 拖拽时，是否实时更新地图
inRange: {
color: ['rgba(222,0,0,0.2)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
}
},
// 具体数据
series: [
{
name: '全球各国确诊病例', // 系列名称
zoom:1.2,//地图大小
type: 'map', // 系列类型，地图
map: 'world', // 要使用的地图，即上面注册的地图名称
roam: true, // 开启鼠标缩放和平移漫游
label: { // 图形上的文本标签，地图默认显示数据名
show: true,
fontSize:8,
//formatter: '{b}', // b是数据名，c是数据值
formatter:function (params, ticket, callback) {
//公布了数据 且 数据累计数据大于5万的显示国家名称
if(params.data && params.data.value>50000) {
return params.name;
}else{
return '';
}
}
},
data: data.g_data,
}
]
};
}
break;
case 3:{
opt = {
// 设置标题和副标题及副标题跳转链接
title: {
text: '新冠疫情-全球新增数据',
subtext: '数据来源--开课吧',
sublink: 'https://www.kaikeba.com'
},
// 数据提示框
tooltip: {
trigger: 'item', // item放到数据区域触发
formatter:function (params, ticket, callback) {
if(params.data)
return params.name+'<br/>'+params.data.value+' (人)';
else
return params.name+'<br/> 未公布感染人数';
}
},
// 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
// 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
/**/
visualMap: {
min: 0, // 颜色映射对应的最小值，
max: 20000, // 颜色映射对应的最大值
text: ['严重', '轻微'], // 映射图上下标记文本
realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
calculable: true, // 拖拽时，是否实时更新地图
inRange: {
color: ['rgba(160,0,0,0)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
}
},
// 具体数据
series: [
{
name: '全球各国新增病例', // 系列名称
zoom:1.2,//地图大小
type: 'map', // 系列类型，地图
map: 'world', // 要使用的地图，即上面注册的地图名称
roam: true, // 开启鼠标缩放和平移漫游
label: { // 图形上的文本标签，地图默认显示数据名
show: true,
fontSize:8,
//formatter: '{b}', // b是数据名，c是数据值
formatter:function (params, ticket, callback) {
//公布了数据 且 数据累计数据大于5万的显示国家名称
if(params.data && params.data.value>1000 || params.name == '中国') {
return params.name;
else{
return '';
}
}
},
data: data.g_today,
}
]
};
}
break;
}
myChart.setOption(opt);
}
updateMap(0);
动态网页JSP
概念
静态网页 -> 动态网页
JSP 全称JavaServer Pages
是由Sun Microsystems公司主导创建的一种动态网页技术标准。
JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成网页，然后供用户浏 览。
原理：根据Java程序获取的数据+前端程序员的界面模板 生成新的网页供用户访问。
三种代码块
Java代码执行区域（脚本标签）：
特点：每次用户访问，代码都会执行。
<%
Java代码编写在这里
%>
Java代码成员区域（声明标签）：
特点：
只能用于定义成员。（以这次任务涉及的知识点来说，定义变量）
这里的代码，只会在第一个用户访问时执行。
第一个用户访问时这里如果定义了变量，那么在服务器关闭之前，后续用户访问时，在 <%%>代码块中都可以重复使用这个变量。
<%!
Java代码编写在这里
%>
将数据输出到页面模板（表达式标签）：
特点：
每次用户访问，代码都会执行。
语句的结尾不加分号
<%=Java中的数据或变量%>
微信公众号的申请
输入微信公众平台的网址 mp.weixin.qq.com 注册订阅号（其他需要企业或者组织才能注册）
按照步骤进行操作即可，后续需要身份认证才能操作。
疫情地图的页面实现
在JSP代码中，嵌入疫情数据读取代码
2
3
4
5
6
7
8
9
10
11
12
13
14
URL url = new URL("https://zaixianke.com/yq/all");
//2. 通过URL类的对象url打开网络连接 , 并得到连接对象conn
URLConnection conn = url.openConnection();
//3. 通过连接对象 , 得到用于读取网页内容的输入流 is
InputStream is = conn.getInputStream();
//4. 将上述的字节流is 装饰为字符流 , 将字符流再装饰为一次能读取一行的字符流br
BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8"));
//5. 通过字符流br,读取一行内容,并将内容存储到变量text中
String text = br.readLine();
//6. 可以将读取到的内容text 输出显示到控制台
System.out.println(text);
//不要忘记导包将读取到的数据输出到前端模板上
不要忘记导包
此时疫情地图的动态实现就完成了
高并发优化
目前并发详情
在浏览器中按下F12，可以看到图中这次请求为296ms，一个用户请求大致会消耗服务器0.3s，我们服务器申请的为两核 的，每秒的并发量大致不会超过10个人。
优化策略
首先我们来了解一下，我们的时间主要消耗在哪里
具体流程如图：北京用户访问==>(10-20ms)访问阿里云（张家口）服务器==>（50-100ms）访问北京开课吧服务器获取数据==>(50-100ms)北京服务器返回数据给张家口服务器==>(10-20ms)返回给用户。整体消耗120ms-240ms。
而开课吧服务器的数据每十分钟更新一次，所以我们可以在阿里云服务器上设置一个疫情数据的缓存，每十分钟更新一次。
代码实现如下：
index.jsp
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>疫情地图</title>
<script type="text/javascript">
<%!
// 记录时间戳 ，0表示1970年1月1日
long time = 0;
String text;
%>
<%
//时间戳:指的是格林威治开始时( 1970-1-1 00:00) 历到月前的毫秒数13位数字
if(System.currentTimeMillis() - time > 600000) { // 600000表示10分钟
// 更新时间
time = System.currentTimeMillis();
//1. 创建一个URL类的对象url
URL url = new URL("https://zaixianke.com/yq/all");
//2. 通过URL类的对象url打开网络连接 , 并得到连接对象conn
URLConnection conn = url.openConnection();
//3. 通过连接对象 , 得到用于读取网页内容的输入流 is
InputStream is = conn.getInputStream();
//4. 将上述的字节流is 装饰为字符流 ,
BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8"));
//5. 通过字符流br,读取一行内容,并将内容存储到变量text中
text = br.readLine();
}
%>
var data = <%=text%>;
</script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
<script src="http://cdn.zaixianke.com/china.js"></script>
<script src="http://cdn.zaixianke.com/world.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:600px;"></div> <br>
<div style="text-align:center">
<a style="color:#333" class="control" align="center" href="javascript:updateMap(0)">国内累计</a>
<a style="color:#333" class="control" align="center" href="javascript:updateMap(1)">国内新增</a>
<a style="color:#333" class="control" align="center" href="javascript:updateMap(2)">全球累计</a>
<a style="color:#333" class="control" align="center" href="javascript:updateMap(3)">全球新增</a>
</div>
<script src="control.js"></script>
</body>
</html>
优化后并发承载变化
代码更改后，我们来刷新看一下时间：
基本稳定在20ms左右。
世界疫情地图部署上线
微信扫码登录注册好的订阅号，点击自动回复，打开自动回复（个人申请的账号，不能进行企业认证无法加入连接，只能通过自动回复的方式实现可跳转的链接）
至此，我们的疫情地图就成功上线订阅号啦。
