基于服务器搭建部署的疫情动态地图

最新推荐文章于 2021-05-01 16:30:30 发布

α2022

最新推荐文章于 2021-05-01 16:30:30 发布

阅读量2.9k

点赞数 3

分类专栏：服务器文章标签： jquery html

本文链接：https://blog.csdn.net/weixin_43781113/article/details/112439316

版权

服务器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、购买云服务器（以下以阿里云为例）

作为新用户的我可以白嫖一下

在上个页面拉到最下方，免费试用

然后先完成个人认证

在上图的页面稍微往下一点有两个试用

建议初学者选第一个，好像只能二选一，我也不知道能不能都有，我选了第一个后悔了

试用的时候，地区还有操作系统随便选（地区不影响，操作系统下面需要改）

已购买的服务器如下

二、配置云服务器

配置之前先把服务器停止

更换操作系统

采用宝塔控制面板

自定义密码确认订单

配置安全组

添加端口

重启服务器

三、连接宝塔控制面板

其他默认，密码是刚才自己设置的密码

打开宝塔控制面板

在新的页面打开外网面板地址

输入上图中的账号密码

（因为刚才咱们设置8888端口的时候，授权对象是咱们自己的IP地址，所以即使别人拿到了这个账号和密码也无法访问，但是如果设置成0.0.0.0所以人都以访问）

在软件商店安装tomcat

版本按照自己需求来

打开tomcat文件

改为80，和前面的80端口对应

保存退出

重启tomcat

三、部署项目

四、外网访问

五、相关资源

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--导入资源 js-->
		<script src="./js/jquery.min.js" ></script>
		<script src="./js/echarts.js" ></script>
		<script src="./js/china.js" ></script>
	</head>
	<body>
		<h2>全国确诊:<span id='num1'></span></h2>
		<h2>死亡:<span id='num2'></span></h2>
		<h2>累计治愈:<span id='num3'></span></h2>
		<h4>-------Creat By ZhaoMu<span id='num3'></span></h4>

		<div id="main" style="width: 800px;height:600px;"></div>

    <script type="text/javascript">
		let data1=[]
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        title: {    //标题信息
            text: '全国疫情实时数据统计',
            subtext: 'data from iqiyi',
            sublink: 'http://static.iqiyi.com/gzbd/index.html',
            left: 'center'
        },
        tooltip: {
            trigger: 'item' //当鼠标选中某一个时 显示的提示内容 item表示提示data中的数据
        },

        visualMap: {
            min: 0,
            max: 2000,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true,
            show: true
        },
        toolbox: {//是否显示右侧工具栏 数据视图/保存图片/刷新数据
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '确诊',
                type: 'map', //图标类型 bar line pie map
                mapType: 'china',
                roam: true, //地图能不能跟随滚轮滚动 伸缩
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[] ,
            }
        ]
    };

		$.post("http://toutiao.iqiyi.com/api/route/haoduo/nCoV/detail",//请求接口的地址
				"",//发出请求时需要携带的参数
				msg=>{
				
				$("#num1").text(msg.data.totalConfirmedCount);
				$("#num2").text(msg.data.totalDeadCount);
				$("#num3").text(msg.data.totalCuredCount)
				
				//遍历msg中的data中detail 给data1赋值
				msg.data.detail.forEach( x =>{
					let str={}
					//x表示每一个省的数据
					str.name=x.provinceName
					str.value=x.confirmedCount
					//把当前组装好的json添加到数据中
					data1.push(str);
				})
				//[{name:xx,value:xx},{},{},{},]
				
				//option中的series第一个{}
				option.series[0].data = data1
				 // 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);


				},//服务器返回数据 之后自动执行的方法
				//给上边的三个span 赋值
			
				"json")
       
    </script>
		<script>
			//当整个页面加载完毕 执行以下代码
			$(function(){ //相当于 window.onload=function(){}
				//发出异步请求，请求 爱奇艺的疫情接口
				//$.post表示发出异步请求
				$.post("http://toutiao.iqiyi.com/api/route/haoduo/nCoV/detail",//请求接口的地址
				"",//发出请求时需要携带的参数
				msg=>{
				
				$("#num1").text(msg.data.totalConfirmedCount);
				$("#num2").text(msg.data.totalDeadCount);
				$("#num3").text(msg.data.totalCuredCount)
				
				},//服务器返回数据 之后自动执行的方法
				//给上边的三个span 赋值
			
				"json")//我这个客户端能够接收的响应的类型
				
			})
		</script>
	</body>
</html>

α2022

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
10
评论
基于服务器搭建部署的疫情动态地图

一、购买云服务器（以下以阿里云为例）作为新用户的我可以白嫖一下在上个页面拉到最下方，免费试用然后先完成个人认证在上图的页面稍微往下一点有两个试用建议初学者选第一个，好像只能二选一，我也不知道能不能都有，我选了第一个后悔了试用的时候，地区还有操作系统随便选（地区不影响，操作系统下面需要改）已购买的服务器如下二、配置云服务器配置之前先把服务器停止更换操作系统采用宝塔控制面板自定义密码确认订单配置安全组添加端口
复制链接

扫一扫

专栏目录