目录
一，阿里云服务器搭建
购买云服务器
1，基础配置
2，网络和安全组
3，系统配置
4，分组设置
5，确认订单
管理服务器
1，安全组配置
2，远程连接并配置
二，动态网页JSP
三种代码块（脚本元素）
Java代码执行区域（脚本标签）：
Java代码成员区域（声明标签）：
将数据输出到页面模板（表达式标签）：
三，微信公众号申请
四，编码实现
前端模板代码移植到jsp中
1，素材代码
2，修改
JSP中嵌入疫情数据读取代码
五，高并发优化
1，目前并发详情
2，优化策略
图示
代码实现
3，优化后并发承载变化
六，世界疫情地图部署上线
由于此文的目的是将疫情地图上线，并在后台简单的搭建环境，所以需要购买云服务器，不过整个流程下来，成本不会超过1元（按量支付，一小时几毛钱，虽然限制条件是需要保证账号中有100以上的余额，但是使用支付宝支付的话，三个月内支付的钱可以秒提现到支付宝中）
一，阿里云服务器搭建
地址栏输入网站：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+' (人)';
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);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>
最终结果如下：
搜索公众号名称，点击关注
