全球疫情可视化实时更新
全球疫情可视化实时更新
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
后续会更新其他的可视化图