- 接下来咱们进行疫情数据的剖析与读取，并通过前后端程序的交互，将其部署到阿里云上。
阿里云服务器搭建流程
1.如果是新用户，能够抉择白嫖的形式，咱们先抉择七天的这个，一个月的留下来不便当前持续白嫖。自行注册登陆后，新用户白嫖请点击这里：https://free.aliyun.com/?spm=...
2.依照须要设置地区、操作系统、带宽等。
3.购买胜利后开始配置平安组。
- 抉择更多→网络和平安组→平安组配置
- 点击配置规定后进入
- 抉择手动增加设置端口范畴和受权对象。在这里咱们要留神0.0.0.0/0示意任何人都能够拜访，因而你能够应用本人的ip地址。
4.在浏览器中输出ecs服务器的公网ip:8888, 依据提醒自定义你的管理员账号和明码。
如果不存在账号密码自定义页面, 能够依照下图流程获取默认账户和明码
输出 bt default获取默认账户明码
5.依据外网面板地址进入进入宝塔控制面板。
6.进入宝塔控制面板后 , 进入软件商店,搜寻tomcat后点击装置。
7.设置端口号。
留神：设置完保留后要重启。
8.将你编写的将你编写的index.jsp,control.js文件上传到webapps/ROOT文件夹中 , 即可通过ip地址来拜访你的JSP。
- index.jsp源代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.net.URL,java.net.URLConnection,java.io.InputStream,java.io.BufferedReader,java.io.InputStreamReader" %> <!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"> <% //1. 创立一个url对象。u1 URL u1 = new URL("https://zaixianke.com/yq/all"); //2、（建设连贯），通过网址u1,关上网络连接，并失去连贯对象conn URLConnection conn = u1.openConnection(); //3、(获取数据传输的流),通过连贯对象conn，获取输出流is InputStream is = conn.getInputStream(); //4、将输出流is，装璜为一次能读取一行的 缓冲字符输出流 BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8")); //5、读取内容 String text1 = br.readLine(); System.out.println(text1); //6、敞开流 br.close(); %> var data = <%=text1 %> </script><script class="lazy" data-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:'新冠疫情-国内累计数据', 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);最终后果