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

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

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

看到这个疫情地图，很容易就能想到使用大名鼎鼎的图表库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参数的含义：

• title：显示图标的标题
• tooltip：展现提醒框，当你鼠标点击某个省份时用来展现对应确实诊人数
• legend：图例，设置图例展现的位置
• visualMap：视觉映射，每个颜色代表什么含义
• series：地图数据可视化，增加data数据

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

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

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

假如想研究代码怎样实现疫情图，省市二级联动的中国疫情地图可参考源码：
xiuxiuing/ncov-map

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

在这里插入图片形容