全球疫情可视化实时更新

1. 配置

boostrap为前端框架，echarts可视化，jQuery获取、处理数据

2. 思路

前端框架搭好，这里不细说
后端用JQuery从API中获取数据

3. 如何用echarts做全球疫情地图

以累计确诊病例分布图为例

数据源为https://lab.isaaclin.cn/nCoV/api/area?latest=1

获取数据的框架

 $.get("https://lab.isaaclin.cn/nCoV/api/area?latest=1",function (data, status) {//处理数据});

处理Json数据

var arr = [];// 处理数据，成地图需要的数据结构
data.results.forEach(item => {// 循环的过程中，向空数组中加入所需的内容if(item.countryName==item.provinceName){  //这个判断是因为，这个数据还统计了中国省份和城市的数据，所以这个条件用于判断这个元组是否为国家的数据                  arr.push({name: item.countryEnglishName, // name固定value: item.confirmedCount, // value固定nowconfirm: item.currentConfirmedCount, // 当前确诊heal: item.curedCount,//治愈数dead: item.deadCount,//死亡数CName:item.countryName//国家的中文名字});
}
});

因为echarts的world.js对应的国家名是英文的，但是从丁香园获取的国家的英文名与echarts地图里存储的英文名之间可能出现不匹配的问题，因此，我自己一个个筛选了那些名字不匹配的国家，进行名字替换，可能还有没有考虑到的国家。

//统一替换名称不匹配的问题
arr.forEach(item => {if(item.name=='United States of America'){item.name='United States'
}
else if(item.name=='The Islamic Republic of Mauritania'){item.name='Mauritania'
}
else if(item.name=='Kazakstan'){item.name='Kazakhstan'
}
else if(item.name=='Somali'){item.name='Somalia'
}
else if(item.name=='Central African Republic'){item.name='Central African Rep.'
}
else if(item.name=='Papua New Cuinea'){item.name='Papua New Guinea'
}
else if(item.name=='Burma'){item.name='Myanmar'
}
else if(item.name=='Kampuchea (Cambodia )'){item.name='Cambodia'
}
else if(item.name=='Laos'){item.name='Lao PDR'
}
else if(item.name=='SriLanka'){item.name='Sri Lanka'
}
else if(item.name=='Kingdom of Bhutan'){item.name='Bhutan'
}
else if(item.name=='Republic of Serbia'){item.name='Serbia'
}
else if(item.name=='Bosnia and Herzegovina'){item.name='Bosnia and Herz.'
}
else if(item.name=='Democratic Republic of the Congo'){item.name='Dem. Rep. Congo'
}
else if(item.name=='North Macedonia'){item.name='Macedonia'
}
else if(item.name=='Ivory Coast'){item.name='Côte d\'Ivoire'
}
else if(item.CName=='赞比亚共和国'){item.name='Zambia'
}
else if(item.CName=='几内亚比绍'){item.name='Guinea-Bissau'
}
else if(item.CName=='刚果（布）'){item.name='Congo'
}
else if(item.CName=='厄立特里亚'){item.name='Eritrea'
}
else if(item.CName=='黑山'){item.name='Montenegro'
}
else if(item.CName=='吉尔吉斯斯坦'){item.name='Kyrgyzstan'
}
});

echarts配置三个步骤

初始化

注意，这里的id要与前端设置的div的id一致，这样才能匹配

 var myChart = echarts.init(document.getElementById('confirm'));

配置

var option = {//配置选项
}

生成地图

这里的mychart与第一步的mychart相对应

 myChart.setOption(option);

Option配置

也分为四大块

标题部分

title: {textStyle: {fontSize: 28},subtext: '数据更新于'+time2,subtextStyle: {fontSize: 14,top: '10px'}
},

这里没啥好讲的，我这里用了一个日期格式化的函数，感觉还挺常用的，在这里分享一下。这里面用到了正则表达式，但是我还不是很清楚。

Date.prototype.Format = function (fmt) { //author: meizz   var o = {  "M+": this.getMonth() + 1, //月份   "d+": this.getDate(), //日   "H+": this.getHours(), //小时   "m+": this.getMinutes(), //分   "s+": this.getSeconds(), //秒   "q+": Math.floor((this.getMonth() + 3) / 3), //季度   "S": this.getMilliseconds() //毫秒   };  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  for (var k in o)  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  return fmt;  }
var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

设置地图及数据

series: [{type: 'map',map: 'world', // 指定是世界地图data: arr, // 设置地图中的数据label: { // 不显示国家的名字了，很丑show: false},showLegendSymbol: false},
],

参数说明

type: 'map’说明是地图，如果type: 'bar’说明是柱状图
map: ‘world’, // 指定是世界地图，如果map: 'china’说明是中国地图
label show ，显不显示国家名
showLegendSymbol，如果你有多个图例的话，在地图上会有小圆点，很丑，所以去掉
鼠标悬浮提示

tooltip: { // 鼠标悬浮提示formatter: function (params) { // 允许我们自定义悬浮提示的内容// return 你需要提示的内容return `国家：${params.data.CName}<br/>累计确诊：${params.data.value}<br/>当前确诊：${params.data.nowconfirm}<br/>治愈：${params.data.heal}<br/>死亡：${params.data.dead}<br/>`;}},

这里是可以不用我们写的，echarts会自动返回name 和value数据作为鼠标悬浮提示，但是会出现每行前面都有一个小圆圈，也很丑，所以还是用formatter自定义悬浮提示的内容。

在算死亡率的时候，我想显示小数后两位，且显示为百分比的形式

var deadpercent=(params.data.value*100).toFixed(2)+'%';

可视化配置

visualMap:[ {type: 'piecewise',seriesIndex:0,pieces: [{ gt: 10000 }, // 大于10000{ gt: 5000, lte: 10000 },{ gt: 1000, lte: 5000 },{ gt: 500, lte: 1000 },  { gt: 100, lte: 500 },  { gt: 10, lte: 100 },   // (200, 300]{ gt: 0, lte: 10 },       ],inRange: {color: ['#ffcfc3', '#eda595', '#d27b64', '#d5462a', '#a8352e', '#6a211d', '#562a2a']},left:10,bottom:20,textStyle:{color:'white'}}]};

参数说明

type： 'piecewise’说明定义的范围是一段一段的，如果是continuous表明是连续映射

pieces：定义的范围，注意如果有小数点的话，是默认四舍五入把小数点去掉的

这里我们需要再设置一个参数precision:2，就可以了

inRange设置的映射的颜色

left、bottom设置图例的位置，相对于原来向右移10，向上移20

textStyle图例文字的一些属性设置

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOlwda14-1585455053852)(assets/20200329120852426.png)]

最后，一定要多看echarts官网的配置手册https://www.echartsjs.com/zh/option.html#title

是连续映射

pieces：定义的范围，注意如果有小数点的话，是默认四舍五入把小数点去掉的

这里我们需要再设置一个参数precision:2，就可以了

inRange设置的映射的颜色

left、bottom设置图例的位置，相对于原来向右移10，向上移20

textStyle图例文字的一些属性设置

效果图

最后，一定要多看echarts官网的配置手册https://www.echartsjs.com/zh/option.html#title
代码链接https://download.csdn.net/download/Hui_R_Q_XIONGDA/12279887

后续会更新其他的可视化图