每天盯着地图看？不如学习制作疫情分析地图

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

疫情地图和分析结果

• 效果图

1. 地图
   

2. 折线图
   

3. 数据分析报告
   

准备工作

1. 接口
   最开始使用的接口是https://www.tianqiapi.com/api这个网站的免费接口，后来发现限制调用次数，于是就改换了CSDN某大佬的接口：https://www.maomin.club/fy/get。
2. Echart插件
   使用echart直接可以显示一个地图和折线图出来，而我们只需要定义一个装它的容器，并修改参数。
3. HTML引入需要文件
   有些需要下载，有些直接联网下载。

   
   <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">
   
   <script src="js/echarts.min.js">script>
   
   <script src="js/china.js">script>
   
   <script src="https://requirejs.org/docs/release/2.3.5/minified/require.js">script>
   

开发步骤

一、地图

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

• 地图显示所需要的数据，使用的是大佬的接口，也就是上面发的第二个接口。它取到的数据需要通过eval(res); var data = V.conf.component[0];进行处理，具体如下。

  //定义空数组赋值省份信息
  var arr = [];
  //地图上显示数据
  $.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)
  		}
  	}
  })
  

这样我们就可以得到一个格式为{name:xxx,numxxx}的数组arr。
接下来使用echar将地图显示在页面。

• 有关地图的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 = '
  省份：' + params.name + '
  确诊：' + params.data.num + '
  '
  			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);
  

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

• 加上图例，显示每个地区数值对应颜色。

  //图例 控制范围内显示颜色
  visualMap: {
  	show: true,
  	x: 'left',
  	y: 'center',
  	//数据范围 和下面的颜色相对应
  	splitList: [{
  			start: 10000
  		},
  		{
  			start: 1000,
  			end: 9999
  		}, {
  			start: 100,
  			end: 999
  		},
  		{
  			start: 10,
  			end: 99
  		}, {
  			start: 1,
  			end: 9
  		},
  	],
  	color: ['#660208', '#890d0d', '#cb2929', '#c92929', '#fc7b69', '#fda984']
  }
  

二、折线图

折线图也通过EChart实现。原理和地图相同，只是在series中将图表类型（type）改为了line。

• 折线图显示的数据处理。

由于大佬的接口信息量太大，所以改换了第一个接口，非常形象得将数据展示出来了，有历史数据，虽然限制次数吧，但是对于新手来说，使用起来很方便。

接口注册有个appid，放到url后面拼接参数使用。下面我把我的appid用xxxxxx表示。

	//定义空数组赋值折线图横坐标
	var arrx = [];
	var confirmedNum = [];//确诊人数
	var curesNum = [];//治愈人数
	var suspectedNum = [];//疑似人数
	//获取折线图数据
	$.ajax({
		type: 'get',
		url: 'https://www.tianqiapi.com/api?version=epidemic&appid=xxxxxxx&appsecret=xxxxxxx',
		async: false,
		success: function(data) {
			console.log(data);
			for(let i = 0; i < data.data.history.length; i++) {
				//console.log(data.data.history[i].date)
				var linex = data.data.history[i].date;
				var lineConfirmed = data.data.history[i].confirmedNum;
				var lineCuresNum = data.data.history[i].curesNum;
				var lineSuspectedNum = data.data.history[i].suspectedNum;
				//console.log(lineConfirmed);
				arrx.push(linex);
				confirmedNum.push(lineConfirmed);
				curesNum.push(lineCuresNum);
				suspectedNum.push(lineSuspectedNum);
			}
		}
	});

• 折线图的HTML：

  
  <div id="chart" style="height: 500px;width:1200px;margin: 0 auto;">div>
  

• 折线图相关JS：和上面地图一样的用法。

  //指定图标的配置和数据
  var optionLine = {
  	title: {
  		text: '全国疫情大数据分析'
  	},
  	tooltip: {},
  	legend: {
  		data: ['确诊人数','治愈人数','疑似人数']
  	},
  	xAxis: {
  		data: arrx
  	},
  	yAxis: {},
  	series: [{
  			name: '确诊人数',
  			type: 'line',
  			data: confirmedNum
  		},
  		{
  			name: '治愈人数',
  			type: 'line',
  			color: ['#90EC7D'],
  			data: curesNum
  		},
  		{
  			name: '疑似人数',
  			type: 'line',
  			color: ['#66AEDE'],
  			data: suspectedNum
  		}
  	]
  };
  //初始化echarts实例
  var myEChart = echarts.init(document.getElementById('chart'));
  //使用制定的配置项和数据显示图表
  myEChart.setOption(optionLine);
  

完成这些，我们就可以得到一个像这样的图表。

三、数据分析

疫情数据分析

• 相关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("" +
  				"
  " + item.area + "
  " +
  				"
  " + item.confirmed + "
  " +
  				"
  " + item.crued + "
  " +
  				"
  " + item.died + "
  " +
  				"");
  			//fetchDate(index);
  		});
  
  	}
  })
  

• 点击省出现市。添加了一个id能检索到省的行，然后使用after()函数将市数据添加到省后面。

  //设置开关实现折叠效果
  var onOff = 1;
  // 市
  function insertCity(i, id) {
  	if(onOff == 1) {
  		i.subList.forEach((item, index, arr) => {
  			$('#' + id).after("" +
  				"
  " + item.city + "
  " +
  				"
  " + item.confirmed + "
  " +
  				"
  " + item.crued + "
  " +
  				"
  " + item.died + "
  " +
  				""
  			)
  		});
  		onOff = 0;
  	} else {
  		i.subList.forEach((item, index, arr) => {
  			$('#city' + index).remove();
  		});
  		onOff = 1;
  	}
  }
  

• 加上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;
  }
  
  .table-city {
  	width: 100%;
  	background: #f5f6f7;
  	height: 2rem;
  	line-height: 2rem;
  	font-size: 1.2rem;
  }
  

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

点击省

总结

本想学官网的折叠效果显示市级数据，奈何本人学艺不精，最后还只能向他人学习，仅做出一个弹窗。
此外，不得不说EChart真的具有强大的功能，动画什么的根本不用自己动手，对于像我这样前端知识不扎实的新手就是非常nice的一个插件。
本人已将源码上传至资源，方便有需要的同学下载学习。
2020/2/6:源码传送门1.0（原始地图和数据分析、市数据弹窗）。
2020/2/7:源码传送门2.0（1.0基础上添加折线图）。
此后还会完善，并学习制作热力图之类的效果。
疫情期间千万注意安全，最好不要出门。
2020/2/10:源码传送门3.0（2.0基础上地图添加图例、修改市数据为折叠显示）。