全球疫情可视化实时更新
全球疫情可视化实时更新
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图例文字的一些属性设置
效果图
外部链接中的图片无法正常上传
最后阶段，请确保深入研究echarts官网的配置手册https://www.echartsjs.com/zh/option.html#title
是连续映射
请注意，在涉及数值的小数表示时，默认情况下会自动按四舍五入的方式去除小数部分
这里我们需要再设置一个参数precision:2，就可以了
inRange设置的映射的颜色
left、bottom设置图例的位置，相对于原来向右移10，向上移20
textStyle图例文字的一些属性设置
效果图
最后建议详细阅读官方文档https://www.echartsjs.com/zh/option.html#title [代码链接]
后续会更新其他的可视化图