一，阿里云服务器搭建

购买云服务器

1，基础配置

2，网络和安全组

3，系统配置

4，分组设置

5，确认订单

管理服务器

1，安全组配置

2，远程连接并配置

二，动态网页JSP

三种代码块（脚本元素）

Java代码执行区域（脚本标签）：

Java代码成员区域（声明标签）：

将数据输出到页面模板（表达式标签）：

三，微信公众号申请

四，编码实现

前端模板代码移植到jsp中

1，素材代码

2，修改

JSP中嵌入疫情数据读取代码

五，高并发优化

1，目前并发详情

2，优化策略

图示

代码实现

3，优化后并发承载变化

六，世界疫情地图部署上线

文章主要内容来自《开课吧-Java大学生就业特训营》

由于此文的目的是将疫情地图上线，并在后台简单的搭建环境，所以需要购买云服务器，不过整个流程下来，成本不会超过1元（按量支付，一小时几毛钱，虽然限制条件是需要保证账号中有100以上的余额，但是使用支付宝支付的话，三个月内支付的钱可以秒提现到支付宝中）

有兴趣的同学欢迎加入QQ学习交流群：1126298731

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

一，阿里云服务器搭建

地址栏输入网站：www.aliyun.com

登录并点击弹性计算 / 云服务器ECS

购买云服务器

1，基础配置

注：价格差异主要体现在平均基准CPU计算性能，以突发性能实例t6为例，一天内只有部分时间发挥100%性能，其余时间只用到20%，而且购买之后前6个小时是发挥100%的性能，也就是说0.082的价格有着0.22的性能

注：宝塔控制面板可以方便Linux系统中软件的安装卸载，观察服务器性能与状态；

2，网络和安全组

注：安全组：类似于防火墙，若干个服务器用于同一个项目，他们的安全设置通常是一样的

安全组在后面进行配置，此处配置比较麻烦；

3，系统配置

4，分组设置

直接跳过

5，确认订单

设置自动释放服务时间，避免不停扣费；

管理服务器

1，安全组配置

2，远程连接并配置

看到命令行，输入命令，初始化宝塔面板
bt default
此时输入公网IP，即可看到如下界面（若没有重新配置端口号，则会出现无法加载的界面）

前面显示的网页，实际上就是index.jsp，右侧有选项可以在线编辑，

接下来在index.jsp文件中加入疫情数据的获取，以及显示疫情地图的前端代码后，就可以通过网址来访问自制的疫情地图了

二，动态网页JSP

动/静态指的是数据是否会自动更新；

JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成网页，然后供用户浏览。

原理：根据Java程序获取的数据+前端程序员的界面模板生成新的网页供用户访问。

三种代码块（脚本元素）

Java代码执行区域（脚本标签）：

特点：每次用户访问，代码都会执行。

<%

Java代码编写在这里

%>

Java代码成员区域（声明标签）：

特点：

1. 只能用于定义成员。（以这次任务涉及的知识点来说，定义变量）

2. 这里的代码，只会在第一个用户访问时执行。第一个用户访问时这里如果定义了变量，那么在服务器关闭之前，后续用户访问时，在 <%%>代码块中都可以重复使用这个变量。

<%!

Java代码编写在这里

%>

将数据输出到页面模板（表达式标签）：

特点：

1. 每次用户访问，代码都会执行。

2. 语句的结尾不加分号

<%=Java中的数据或变量%>

三，微信公众号申请

输入网址mp.weixin.qq.com

按照要求申请即可；

四，编码实现

前端模板代码移植到jsp中

1，素材代码

index.html（页面代码）

<!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">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（视觉映射）

var myChart = echarts.init(document.getElementById('main'));
function updateMap(num){$(".control").show();$(".control:eq("+num+")").hide();myChart.clear();var opt = null;switch(num){case 0:{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+' (人)';elsereturn 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+' (人)';elsereturn 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+' (人)';elsereturn params.name+'<br/> 未公布感染人数';}},// 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色// 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大/**/visualMap: {min: 1, // 颜色映射对应的最小值，即对应下面的lightskybluemax: 500000, // 颜色映射对应的最大值，即对应下面的orangeredtext: ['严重', '轻微'], // 映射图上下标记文本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+' (人)';elsereturn 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);

2，修改

首先上传视觉映射文件

可以看出，原先的index.html文件中为静态网页（数据是固定的）

故将图示区域代码删掉

JSP中嵌入疫情数据读取代码

在index.jsp中第8行后面添加如下代码：

<%//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 装饰为字符流 , 将字符流再装饰为一次能读取一行的字符流br BufferedReader br = new BufferedReader(new InputStreamReader(is, "UTF-8")); //5. 通过字符流br,读取一行内容,并将内容存储到变量text中 String text = br.readLine(); //6. 可以将读取到的内容text 输出显示前端模板中 %>

修改data的值为text：

导包

代码如下：

<%@ page session="false" import="java.net.URL, java.net.URLConnection, java.io.InputStream, java.io.BufferedReader, java.io.InputStreamReader" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>

再次输入服务器公网IP，浏览到的界面如下：

五，高并发优化

1，目前并发详情

按F12，可以看到每个请求占用296ms将近0.3s。因为是两核，所以一秒内并发量不超过10个

2，优化策略

图示

代码实现

最新index.jsp如下：

<%@ page session="false" import="java.net.URL, java.net.URLConnection, java.io.InputStream, java.io.BufferedReader, java.io.InputStreamReader" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<!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 装饰为字符流 , 将字符流再装饰为一次能读取一行的字符流br BufferedReader br = new BufferedReader(new InputStreamReader(is, "UTF-8")); //5. 通过字符流br,读取一行内容,并将内容存储到变量text中 text = br.readLine();     // 由于之前在成员区域已经声明过 这里要取消原先的声明 否则页面加载不出来}//6. 可以将读取到的内容text 输出显示到前端模板中
%>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>

3，优化后并发承载变化

多次刷新后（除去第一次加载耗时较长），时间稳定在20ms左右，也就是说通过缓存策略减少数据更新的频率，将每秒并发量提高了10倍不止

六，世界疫情地图部署上线

由于公众号是个人身份，无法通过菜单栏来实现超链接，这里使用自动回复的功能来展示

内容如下：

点击查看<a href="http://39.101.192.53"">疫情地图</a>

最终结果如下：

搜索公众号名称，点击关注

点击链接

Java大学生就业特训营_疫情地图公众号相关推荐

11.1 常用的包（熟悉） | 拉勾Java就业急训营
学习资源来源:拉勾教育_Java就业急训营 11.1 常用的包(熟悉) 11.1.1 包的名称和功能 java.lang包--该包是Java语言的核心包,并且该包中的所有内容由Java虚拟机自动导入. ...
基于java大学生就业招聘系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
基于java大学生就业招聘系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署基于java大学生就业招聘系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署本源码技术栈 ...
python判断题题库大数据技术_智慧树_大数据分析的python基础_搜题公众号
智慧树_大数据分析的python基础_搜题公众号更多相关问题社会公众可以查阅烟草专卖行政主管部门的监督检查记录.() 公民.法人或者其他组织不得利用自动售货机销售烟草制品.() 烟草广告中不得有下 ...
MySQL数据库搜题_智慧树知到_MySQL数据库设计与应用_搜题公众号
智慧树知到_MySQL数据库设计与应用_搜题公众号更多相关问题阅读理解. This is the twin's(双胞胎的) room. It's a nice room. The two beds ...
pycharm appiunm 公众号测试_知道答案公众号_知到APP笔尖上的艺术——书法基础与赏析单元测试答案_知道答...
知道答案公众号_知到APP笔尖上的艺术--书法基础与赏析单元测试答案_知道答案公众号更多相关问题按下图装置,持续通入X气体,可以看到a处有红色物质生成,b处变蓝,c处得到液体,则X气体可能是[ ] ...
多账号批量登录微信公众号工具_微众公众号助手
多账号批量登录微信公众号工具_微众公众号助手账号登录工具微信公众号多账号批量登录微信公众号工具微众公众号助手点退出会自动退出登录的账号左表选中下一个账号
阿伏法机器人_智慧树_森工机器人技术_搜题公众号
智慧树_森工机器人技术_搜题公众号更多相关问题设NA为阿伏伽德罗常数的值,下列说法中错误的是[ ]A.46gNO2和N2O4的混合物所含的原子数为3NA B.7.1gCl2与足 (9分)下表列出了 ...
基于java大学生就业信息管理系统
随着高校教育体制的改革大学生人数的不断增加,毕业生就业制度发生了根本的变化.单位和学生走向人才市场,双向选择,择优录用.因此在这样的情况下,在INTERNET上开发并运行信息管理系统就能够极大地提高工 ...
java坦克大战实训报告_坦克大战系统《Java程序开发实训》综合实训报告.doc
坦克大战系统<Java程序开发实训>综合实训报告 <Java程序开发实训>综合实训报告题目: 坦克大战系统姓名: 方庆学号: 2010203206 班级: 10软件(2) ...

Java大学生就业特训营_疫情地图公众号

一，阿里云服务器搭建

购买云服务器

1，基础配置

2，网络和安全组

3，系统配置

4，分组设置

5，确认订单

管理服务器

1，安全组配置

2，远程连接并配置

二，动态网页JSP

三种代码块（脚本元素）

Java代码执行区域（脚本标签）：

Java代码成员区域（声明标签）：

将数据输出到页面模板（表达式标签）：

三，微信公众号申请

四，编码实现

前端模板代码移植到jsp中

1，素材代码

2，修改

JSP中嵌入疫情数据读取代码

五，高并发优化

1，目前并发详情

2，优化策略

图示

代码实现

3，优化后并发承载变化

六，世界疫情地图部署上线

Java大学生就业特训营_疫情地图公众号相关推荐

最新文章

热门文章