共计 6246 个字符，预计需要花费 16 分钟才能阅读完成。
- 接下来咱们进行疫情数据的剖析与读取，并通过前后端程序的交互，将其部署到阿里云上。
阿里云服务器搭建流程
1. 如果是新用户，能够抉择白嫖的形式，咱们先抉择七天的这个，一个月的留下来不便当前持续白嫖。新用户白嫖请点击这里：https://free.aliyun.com/?spm=…
抉择这个收费试用七天的。
2. 依照须要设置地区、操作系统、带宽等。
3. 购买胜利后开始配置平安组。
抉择更多→网络和平安组→平安组配置
抉择手动增加设置端口范畴和受权对象。在这里咱们要留神 0.0.0.0/ 0 示意任何人都能够拜访，因而你能够应用本人的 ip 地址。
4. 获取默认账户和明码
并依据外网面板地址进入宝塔控制面板。
5.tomcat 装置
6. 装置后设置端口号
7. 进入 tomcat 装置的文件夹
8. 将你编写的将你编写的 index.jsp,control.js 文件上传到 webapps/ROOT 文件夹中 , 即可通过 ip 地址来拜访你的 JSP。
- 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);- 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 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>最终后果展现
正文完