疫情地图和分析结果

近期疫情又严重了，公司又推迟了返工时间。而趁着这个时间，在家学习了jQuery和Ajax，制作了疫情分析地图。

• 效果图
  
  

准备工作

1. 接口
   最开始使用的接口是https://www.tianqiapi.com/api这个网站的免费接口，后来发现限制调用次数，于是就改换了CSDN某大佬的接口：https://www.maomin.club/fy/get。
2. Echart插件
   使用echart直接可以显示一个地图出来，而我们只需要修改参数。

步骤

1. 引入需要文件
   有些需要下载，有些直接联网下载。

   <!-- JS核心文件 -->
   <script src="js/jquery-1.11.3.min.js"></script>
   <!-- 浏览器图标 -->
   <link rel="icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580876528328&di=7b3faa261a22d767b302b0957f32954b&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F42%2F48%2F58138ec5ec33f_610.jpg">
   <!-- Echart图表 -->
   <script src="js/echarts.min.js"></script>
   <!-- 地图 -->
   <script src="js/china.js"></script>
   <!-- require.js -->
   <script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
   

2. 将地图显示在页面上
   先前引入echart，而它有自带样式，我们直接使用即可。

• 有关地图的HTML：

  <!-- 地图 -->
  <div id="container" style="height: 800px;width:1200px;background:white;margin:20px 0 0;"></div>
  

• 有关地图的JS：

  //全国省份列表
  var dataMap = arr;
  console.log(dataMap);
  
  // 需要在页面上直接标记出来的城市
  var specialMap = ['湖北'];
  // 对dataMap进行处理，使其可以直接在页面上展示
  for(var i = 0; i < specialMap.length; i++) {
  	for(var j = 0; j < dataMap.length; j++) {
  		if(specialMap[i] == dataMap[j].name) {
  			dataMap[j].selected = true;
  			break;
  		}
  
  	}
  }
  // 绘制图表，准备数据
  var option = {
  	tooltip: {
  		formatter: function(params) {
  			//console.log(params)
  			var info = '<p style="font-size:14px">省份：' + params.name + '</p><p style="font-size:14px">确诊：' + params.data.num + '</p>'
  			return info;
  		},
  		backgroundColor: 'rgba(0, 0, 0, 0.5)', //提示标签背景颜色
  		textStyle: {
  			color: "#fff"
  		} //提示标签字体颜色
  	},
  	series: [{
  		name: '中国',
  		type: 'map',
  		mapType: 'china',
  		selectedMode: 'multiple',
  		label: {
  			normal: {
  				show: true, //显示省份标签
  				// textStyle:{color:"#c71585"}//省份标签字体颜色
  			},
  			emphasis: {
  				show: true, //对应的鼠标悬浮效果
  				// textStyle:{color:"#800080"}
  			}
  		},
  		itemStyle: {
  			normal: {
  				borderWidth: .5, //区域边框宽度
  				borderColor: '#827a82', //区域边框颜色
  				areaColor: "#ffb87c", //区域颜色
  			},
  			emphasis: {
  				borderWidth: .5,
  				borderColor: '#827a82',
  				areaColor: "#c1ffff",
  			}
  		},
  		data: dataMap
  	}]
  };
  //初始化echarts实例
  var myChart = echarts.init(document.getElementById('container'));
  //使用制定的配置项和数据显示图表
  myChart.setOption(option);
  

• 地图上标签的数据显示

  //地图上显示数据
  $.ajax({
  	type: "get",
  	url: "https://www.maomin.club/fy/get",
  	async: false,
  	dataType: "json",
  	success: function(res) {
  		//处理数据
  		eval(res);
  		var data = V.conf.component[0];
  
  		for(let i = 0; i < data.caseList.length; i++) {
  			//console.log(data.caseList[i].area)
  			var map = {
  				name: data.caseList[i].area,
  				num: Number(data.caseList[i].confirmed)
  			};
  			//console.log(map)
  			//将省份数据存入数组
  			arr.push(map)
  		}
  	}
  })
  

样式可以自己修改，做到这些，就会出现这样的效果：

2. 疫情数据分析

• 相关HTML：

  <!-- 疫情分析 -->
  <div class="main">
  	<p class="tit"></p>
  	<p class="updata-time"></p>
  	<table class="inlist">
  		<thead class="inlist-t ovf">
  			<th>
  				<div>省</div>
  			</th>
  			<th>
  				<div>确诊</div>
  			</th>
  			<th>
  				<div>治愈</div>
  			</th>
  			<th>
  				<div>死亡</div>
  			</th>
  		</thead>
  		<tbody id="inbody"></tbody>
  	</table>
  </div>
  

• 相关JS：

  //人数分析
  $.ajax({
  	type: "get",
  	url: "https://www.maomin.club/fy/get",
  	dataType: "json",
  	success: function(res) {
  		//处理数据
  		eval(res);
  		var data = V.conf.component[0];
  		//console.log(data);
  
  		$('.tit').text(data.title); //标题
  		$('.updata-time').text('更新时间：' + data.mapLastUpdatedTime); //更新时间
  		//遍历省份数据
  		data.caseList.forEach((item, index) => {
  			$('#inbody').append("<tr id='" + index + "'>" +
  				"<td><div class='area' οnclick='insertCity(" + JSON.stringify(item) + ")'>" + item.area + "</div></td>" +
  				"<td><div class='table-item'>" + item.confirmed + "</div></td>" +
  				"<td><div class='table-item'>" + item.crued + "</div></td>" +
  				"<td><div class='table-item'>" + item.died + "</div></td>" +
  				"</tr>");
  			//fetchDate(index);
  		});
  
  	}
  })
  

• 加上CSS样式。

  .main {
  width: 93%;
  margin: 0 auto;
  }
  
  .ovf {
  	overflow: hidden;
  }
  
  .tit {
  	text-align: center;
  	font-size: 2rem;
  	font-weight: bold;
  	padding-top: 0.6rem;
  }
  
  .updata-time {
  	text-align: right;
  	color: #999;
  	padding: 0.4rem 0;
  	font-size: 1rem;
  }
  
  .inlist-t div {
  	font-size: 1.5rem;
  }
  
  .inlist,.inlist-x {
  	table-layout: fixed;
  	width: 80%;
  	margin-top: .5rem;
  	padding-bottom: .5rem;
  	text-align: center;
  	border-spacing: 2px 6px;
  	font-size: .938rem;
  	color: #4d5054;
  	margin: 0 auto;
  }
  
  .area {
  	background: #00bec9;
  	color: #fff;
  	height: 2rem;
  	line-height: 2rem;
  	font-weight: bold;
  	font-size: 1.2rem;
  }
  
  .city {
  	background: #fff;
  	color: #00bec9;
  	height: 2rem;
  	line-height: 2rem;
  	font-weight: bold;
  	font-size: 1.2rem;
  }
  
  .table-item {
  	width: 100%;
  	background: #f5f6f7;
  	height: 2rem;
  	line-height: 2rem;
  	font-weight: bold;
  	font-size: 1.2rem;
  }
  
  .show {
  	display: none;
  	position: fixed;
  	top: 0;
  	padding-top: 10vh;
  	z-index: 100;
  	width: 100%;
  	height: 100vh;
  	background: rgba(1, 1, 1, 0.2);
  }
  
  .box {
  	width: 80%;
  	margin: 0 auto;
  	height: 70vh;
  	border-radius: 0.4rem;
  	overflow: auto;
  	background: #fff;
  }
  
  .list-i {
  	background: #f5f6f7;
  	margin: 0.4rem 0;
  	padding: 0.4rem;
  }
  
  .list-i a {
  	color: #333;
  }
  

完成之后，效果就会展现。

总结

本想学官网的折叠效果显示市级数据，奈何本人学艺不精，最后还只能向他人学习，仅做出一个弹窗。
本人已将源码上传至资源，方便有需要的同学下载学习。
源码传送门。
疫情期间千万注意安全，最好不要出门。