全球疫情可视化实时更新

全球疫情可视化实时更新

1. 配置

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

2. 思路

1. 前端框架搭好，这里不细说
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配置三个步骤

1. 初始化

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

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

2. 配置

var option = {
    //配置选项
}

3. 生成地图

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

 myChart.setOption(option);

Option配置

也分为四大块

1. 标题部分

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"); 

2. 设置地图及数据

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

参数说明

1. type: 'map’说明是地图，如果type: 'bar’说明是柱状图

2. map: ‘world’, // 指定是世界地图，如果map: 'china’说明是中国地图

3. label show ，显不显示国家名

4. showLegendSymbol，如果你有多个图例的话，在地图上会有小圆点，很丑，所以去掉

5. 鼠标悬浮提示

tooltip: { // 鼠标悬浮提示
                    formatter: function (params) { // 允许我们自定义悬浮提示的内容
                        // return 你需要提示的内容
                        return `国家：${params.data.CName}

                        累计确诊：${params.data.value}

                        当前确诊：${params.data.nowconfirm}

                        治愈：${params.data.heal}

                        死亡：${params.data.dead}

                        `;
                    }
                },

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

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

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

4. 可视化配置

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

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