如何绘制全球新冠病毒疫情动态分布图

目前新型冠状病毒疫情已经蔓延到全球，截止北京时间8日上午9时，全球确诊140万人，其中美国确诊人数超40万人，正如局座所说这次疫情不亚于第三次世界大战。大家除了注意全球疫情动态，更要注重个人防护，避免给国家添乱。

利用数据的时序性分析对于疫情分布和控制具有指导意义，也可以使大家直观的看到疫情的发展趋势。下面是从2020年1月22日起到2020年4月8日的世界各国疫情数据绘制的确诊，治愈，死亡人数动态分布图。链接：http://map.ziptop.top/

全球确诊人数动态分布图

全球治愈人数动态分布图

全球死亡人数动态分布图

一、数据获取

数据来自约翰斯·霍普金斯大学统计数据Johns Hopkins University Center for Systems Science and Engineering (CSSE) 。

也可以使用https://github.com/datasets/covid-19 上提供的更全面的数据

约翰斯·霍普金斯大学（Johns Hopkins University），简称Hopkins或JHU，成立于1876年，是一所世界顶级的著名私立大学，美国第一所研究型大学。世界大学排名世界第12，美国第9 。该校医学院的教学研究单位约翰斯·霍普金斯医院（JHH）连续21年被评为全美最佳医院。学校共有37人获得过诺贝尔奖。其尼采高级国际研究学院（SAIS）培养出美国国务卿奥尔布赖特、财政部长盖特纳、世界银行行长埃因霍、中国驻美大使崔天凯等

二、数据处理

在绘图前需要将数据整理为下面这种 json 格式

三、数据可视化

可视化用到的是 Echarts，框架为bootstrap

var map_chart = echarts.init(document.getElementById('main'));
map_chart.showLoading();
$.get("./data/case/"+type_name+".json",function(data,status){
    let input_data = data;
    $.get('./data/map/world.json', function (mapJson) {
        map_chart.hideLoading();

        echarts.registerMap('world', mapJson, {

        });
        option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    loop: false,
                    autoPlay: true,
                    playInterval: 100,
                    controlStyle: {
                        position: 'left'
                    },
                    data: input_data.time_line,
                    currentIndex:0

                },
                visualMap: {
                    left: 'right',
                    show: false,
                    pieces: [
                        {min: 50000, color: colors[7]},
                        {min: 10000, max: 50000, color: colors[6]},
                        {min: 5000, max: 10000, color: colors[5]},
                        {min: 1000, max: 5000, color: colors[4]},
                        {min: 500, max: 1000, color: colors[3]},
                        {min: 50, max: 500, color: colors[2]},
                        {min: 10, max: 50, color: colors[1]},
                        {min: 1, max: 10, color: colors[0]},
                        {max: 0, color: colors[0]},
                    ],
                },
                series:[
                    {
                        type: 'map',
                        roam: true,
                        map: 'world',
                    },
                ],

                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2,
                    formatter: function (params) {
                        var value = (params.value + '').split('.');
                        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                        return type_name + '<br/>' + params.name + ': ' + value;
                    }
                },
                title:{
                    x:'center',
                    y:'top',
                    textAlign:'left',
                    textStyle: {
                        color: "#333",
                        fontSize: 14
                    }
                }
            },
            options:input_data.data
            ,

        };

        map_chart.var map_chart = echarts.init(document.getElementById('main'));
map_chart.showLoading();
$.get("./data/case/"+type_name+".json",function(data,status){
    let input_data = data;
    $.get('./data/map/world.json', function (mapJson) {
        map_chart.hideLoading();

        echarts.registerMap('world', mapJson, {

        });
        option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    loop: false,
                    autoPlay: true,
                    playInterval: 100,
                    controlStyle: {
                        position: 'left'
                    },
                    data: input_data.time_line,
                    currentIndex:0

                },
                visualMap: {
                    left: 'right',
                    show: false,
                    pieces: [
                        {min: 50000, color: colors[7]},
                        {min: 10000, max: 50000, color: colors[6]},
                        {min: 5000, max: 10000, color: colors[5]},
                        {min: 1000, max: 5000, color: colors[4]},
                        {min: 500, max: 1000, color: colors[3]},
                        {min: 50, max: 500, color: colors[2]},
                        {min: 10, max: 50, color: colors[1]},
                        {min: 1, max: 10, color: colors[0]},
                        {max: 0, color: colors[0]},
                    ],
                },
                series:[
                    {
                        type: 'map',
                        roam: true,
                        map: 'world',
                    },
                ],

                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2,
                    formatter: function (params) {
                        var value = (params.value + '').split('.');
                        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                        return type_name + '<br/>' + params.name + ': ' + value;
                    }
                },
                title:{
                    x:'center',
                    y:'top',
                    textAlign:'left',
                    textStyle: {
                        color: "#333",
                        fontSize: 14
                    }
                }
            },
            options:input_data.data
            ,

        };

        map_chart.setOption(option);
    });
});