最近爆发的武汉新冠病毒疫情严重，大家可能每天都在查询疫情情况，或者在朋友圈看到中国疫情地图。作为技术宅，这个疫情图是怎么实现的呢？
今天就来教大家如何零代码实现中国疫情地图，简单实用，记得收藏哦，先上实现的效果图。
看到这个疫情地图，很容易就能想到使用大名鼎鼎的图表库Echarts来实现。
实现步骤
- 在浏览器中打开以下Echarts的官方示例链接： https://www.echartsjs.com/examples/en/editor.html?c=doc-example/map-visualMap-pieces&edit=1
- 在页面左侧框中输入以下数据：
<code>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
}
]
}
]
};
/<code>至此，页面右侧就会渲染出中国疫情地图了，就是如此的简单。 注意：此数据不是最新疫情数据，只是demo技术交流使用。
实现解析
我们使用的Echarts的Example环境，其实已经默认帮我们加载好了中国省份地图了。我们是需要设置option参数就好了。下面解释下option参数的含义：
- title：显示图标的标题
- tooltip：展示提示框，当你鼠标点击某个省份时用来展示对应的确诊人数
- legend：图例，设置图例展示的位置
- visualMap：视觉映射，每个颜色代表什么含义
- series：地图数据可视化，添加data数据
通过这种方式，只需把上面配置好的数据复制到页面中，就可以生成中国疫情地图了。
如果你以后想展示其他类型的地图区域数据可视化，例如人口密度等，也可以使用这种方式，不需要任何代码就可实现了。
注意： 使用地图要确认好中国领土完整。
私信回复“疫情”，获取 省市二级联动的中国疫情地图JavaScript实现源码。
分享到:
