产品 | 运营

零代码做成中国疫情地图,简单实用,已收藏

2020-02-13  本文已影响0人  咻咻ing

最近爆发的武汉新冠病毒疫情严重,大家可能每天都在查询疫情情况,或者在朋友圈看到中国疫情地图。作为技术宅,这个疫情图是怎么实现的呢?

今天就来教大家如何零代码实现中国疫情地图,简单实用,记得收藏哦,先上实现的效果图。 疫情图.png

看到这个疫情地图,很容易就能想到使用大名鼎鼎的图表库Echarts来实现。

实现步骤

  1. 在浏览器中打开以下Echarts的官方示例链接:
    https://www.echartsjs.com/examples/en/editor.html?c=doc-example/map-visualMap-pieces&edit=1
  2. 在页面左侧框中输入以下数据:
option = {
    title: {
        text: '中国疫情图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['中国疫情图']
    },
    visualMap: {
        type: 'piecewise',
        pieces: [
            {min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28'},
            {min: 500, max: 999, label: '确诊500-999人', color: '#4e160f'},
            {min: 100, max: 499, label: '确诊100-499人', color: '#974236'},
            {min: 10, max: 99, label: '确诊10-99人', color: '#ee7263'},
            {min: 1, max: 9, label: '确诊1-9人', color: '#f5bba7'},
        ],
        color: ['#E0022B', '#E09107', '#A3E00B']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    roamController: {
        show: true,
        left: 'right',
        mapTypeControl: {
            'china': true
        }
    },
    series: [
        {
            name: '确诊数',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true,
                color: 'rgb(249, 249, 249)'
            },
            data: [
               {
                  name: '北京',
                  value: 212
                }, {
                  name: '天津',
                  value: 60
                }, {
                  name: '上海',
                  value: 208
                }, {
                  name: '重庆',
                  value: 337
                }, {
                  name: '河北',
                  value: 126
                }, {
                  name: '河南',
                  value: 675
                }, {
                  name: '云南',
                  value: 117
                }, {
                  name: '辽宁',
                  value: 74
                }, {
                  name: '黑龙江',
                  value: 155
                }, {
                  name: '湖南',
                  value: 593
                }, {
                  name: '安徽',
                  value: 480
                }, {
                  name: '山东',
                  value: 270
                }, {
                  name: '新疆',
                  value: 29
                }, {
                  name: '江苏',
                  value: 308
                }, {
                  name: '浙江',
                  value: 829
                }, {
                  name: '江西',
                  value: 476
                }, {
                  name: '湖北',
                  value: 13522
                }, {
                  name: '广西',
                  value: 139
                }, {
                  name: '甘肃',
                  value: 55
                }, {
                  name: '山西',
                  value: 74
                }, {
                  name: '内蒙古',
                  value: 34
                }, {
                  name: '陕西',
                  value: 142
                }, {
                  name: '吉林',
                  value: 42
                }, {
                  name: '福建',
                  value: 179
                }, {
                  name: '贵州',
                  value: 56
                }, {
                  name: '广东',
                  value: 797
                }, {
                  name: '青海',
                  value: 15
                }, {
                  name: '西藏',
                  value: 1
                }, {
                  name: '四川',
                  value: 282
                }, {
                  name: '宁夏',
                  value: 34
                }, {
                  name: '海南',
                  value: 79
                }, {
                  name: '台湾',
                  value: 10
                }, {
                  name: '香港',
                  value: 15
                }, {
                  name: '澳门',
                  value: 9
                }
            ]
        }
    ]
};

至此,页面右侧就会渲染出中国疫情地图了,就是如此的简单。
注意:此数据不是最新疫情数据,只是demo技术交流使用。

实现解析

我们使用的Echarts的Example环境,其实已经默认帮我们加载好了中国省份地图了。我们是需要设置option参数就好了。下面解释下option参数的含义:

通过这种方式,只需把上面配置好的数据复制到页面中,就可以生成中国疫情地图了。

如果你以后想展示其他类型的地图区域数据可视化,例如人口密度等,也可以使用这种方式,不需要任何代码就可实现了。

注意: 使用地图要确认好中国领土完整。

如果想研究代码怎么实现疫情图,省市二级联动的中国疫情地图可参考源码:
https://github.com/xiuxiuing/ncov-map

预览地址:https://xiuxiuing.github.io/ncov-map/

在这里插入图片描述
上一篇下一篇

猜你喜欢

热点阅读