H5W3
当前位置:H5W3 > java > 正文

【Java】疫情地图公众号项目(二)

  • 接下来我们进行疫情数据的分析与读取,并通过前后端程序的交互,将其部署到阿里云上。

阿里云服务器搭建流程
1.如果是新用户,可以选择白嫖的方式,我们先选择七天的这个,一个月的留下来方便以后继续白嫖。自行注册登陆后,新用户白嫖请点击这里:https://free.aliyun.com/?spm=…
【Java】疫情地图公众号项目(二)
2.按照需要设置地域、操作系统、带宽等。
【Java】疫情地图公众号项目(二)
3.购买成功后开始配置安全组。

  • 选择更多→网络和安全组→安全组配置

【Java】疫情地图公众号项目(二)

  • 点击配置规则后进入

【Java】疫情地图公众号项目(二)

  • 选择手动添加设置端口范围和授权对象。在这里我们要注意0.0.0.0/0表示任何人都可以访问,因此你可以使用自己的ip地址。

【Java】疫情地图公众号项目(二)
4.在浏览器中输入ecs服务器的公网ip:8888, 根据提示自定义你的管理员账号和密码。
如果不存在账号密码自定义页面, 可以按照下图流程获取默认账户和密码
【Java】疫情地图公众号项目(二)
【Java】疫情地图公众号项目(二)
【Java】疫情地图公众号项目(二)
输入 bt default获取默认账户密码
【Java】疫情地图公众号项目(二)
5.根据外网面板地址进入进入宝塔控制面板。
6.进入宝塔控制面板后 , 进入软件商店,搜索tomcat后点击安装。
7.设置端口号。
【Java】疫情地图公众号项目(二)
注意:设置完保存后要重启。
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" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script></script>
<script></script>
<script></script>
</head>
<body>
<div id="main"></div> <br>
<div>
<a class="control" align="center" href="javascript:updateMap(0)">国内累计</a>
<a class="control" align="center" href="javascript:updateMap(1)">国内新增</a>
<a class="control" align="center" href="javascript:updateMap(2)">全球累计</a>
<a class="control" align="center" href="javascript:updateMap(3)">全球新增</a>
</div>
<script></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);

最终结果
【Java】疫情地图公众号项目(二)

本文地址:H5W3 » 【Java】疫情地图公众号项目(二)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址