近期疫情又严重了，实习公司又推迟了返工时间。而趁着这个时间，在家学习了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("" +" + JSON.stringify(item) + ")'>" + 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基础上地图添加图例、修改市数据为折叠显示）。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！