全省疫情地图开发
工具
- Echarts
- jQuery
- HBuilder X
先看效果，没图你说个吉米·巴特勒
效果图
开始动手
-
准备全国地图文件
china.json长按二维码关注公众号
image
回复 祖国加油 获取 china.json
代码结构
image
pmap.html 页面结构，很简单
<div class="pmap" id="pmap" style="height: 80vh;width: 100%">
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js"></script>
<script src="./pmap.js"></script>
重点 pmap.js
先画全省地图
let mapChart = echarts.init(document.getElementById('pmap'));
$.get('map/china.json', function(geoJson) {
// 加载中国地图
echarts.registerMap('china', geoJson);
var mapOption = {
geo: [{
name: '全国',
map: 'china',
zoom: 1.2,
roam: true,
label: {
show: true,
color: '#F7F9FC',
fontSize: 14,
},
//主题
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
areaColor: '#e8e081', //地图底色
opacity: 1
},
emphasis: {
//hover颜色
areaColor: '#FFA300',
borderWidth: 0,
borderType: 'dotted',
shadowColor: 'rgba(255,233,0, 1)',
shadowOffsetX: -1,
shadowOffsetY: 1,
shadowBlur: 10,
label: {
color: 'red',
fontSize: 36
}
},
},
}],
}
mapChart.setOption(mapOption);
获取疫情地图数据
var feiyan = {
feiyanData: [], // 全国肺炎数据
getData: function(){
$.ajax({
// 如果出现跨域，请联系老师，获取快速解决方案。
url: "http://116.85.20.124:99/v1/p1",
method:'GET',
async: false,
success: function(data){
data.forEach((item,index,arr)=>{
var pro = {};
// 接口说明，此处重组说明一下各个字段。
pro['province'] = item.province; // 省份
pro['xinzeng'] = item.xinzeng; // 新增
pro['siwang'] = item.siwang; // 死亡
pro['quezhen'] = item.quezhen; // 确诊
pro['zhiyu'] = item.zhiyu; // 治愈
pro['yisi'] = item.yisi; // 疑似
pro['name'] = item.pShortName;
pro['value'] = item.quezhen-GOOD;
// item['name'] ...
feiyan.provinceData.push(pro);
})
feiyan.convertData(feiyan.provinceData);
}
})
},
}
绑定全国坐标位置
convertData: function(data) {
var res = []; //new Array()
for (var i = 0; i < data.length; i++) {
console.log(`data[${i}].name`, data[i].name)
var geoCoord = geoCoordMap[data[i].name];//name:万宁 value:100
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
feiyan.feiyanData = res;
}
geoCoordMap
const geoCoordMap = { //省份对应坐标
'新疆': [86.61 , 40.79],
'西藏':[89.13 , 30.66],
'黑龙江':[128.34 , 47.05],
'吉林':[126.32 , 43.38],
'辽宁':[123.42 , 41.29],
'内蒙古':[112.17 , 42.81],
'北京':[116.40 , 40.40 ],
'宁夏':[106.27 , 36.76],
'山西':[111.95,37.65],
'河北':[115.21 , 38.44],
'天津':[117.04 , 39.52],
'青海':[97.07 , 35.62],
'甘肃':[103.82 , 36.05],
'山东':[118.01 , 36.37],
'陕西':[108.94 , 34.46],
'河南':[113.46 , 34.25],
'安徽':[117.28 , 31.86],
'江苏':[120.26 , 32.54],
'上海':[121.46 , 31.28],
'四川':[103.36 , 30.65],
'湖北':[112.29 , 30.98],
'浙江':[120.15 , 29.28],
'重庆':[107.51 , 29.63],
'湖南':[112.08 , 27.79],
'江西':[115.89 , 27.97],
'贵州':[106.91 , 26.67],
'福建':[118.31 , 26.07],
'云南':[101.71 , 24.84],
'台湾':[121.01 , 23.54],
'广西':[108.67 , 23.68],
'广东':[113.98 , 22.82],
'海南':[110.03 , 19.33],
'澳门':[113.54 , 22.19],
'香港':[114.17 , 22.32],
};
执行接口
$(function(){
feiyan.getData();
})
给地图绑定数据
//配置属性
在上述mapOption中添加属性：
series: [{
name: '数据',
type: 'map',
mapType: 'china',
zoom: 1.2,
roam: true,
label: {
normal: {
show: true //省份名称
},
emphasis: {
show: false
}
},
data:feiyan.provinceData //数据
}]
后面会给出完整mapOption配置
这里分步解析
地图标题
title: {
text: '新型冠状病毒感染的肺炎疫情',
subtext: "截至: 2020-02-12 ",
sublink: 'http://www.baidu.com',
left: 'center',
textStyle: {
color: '#fff'
}
},
鼠标悬停地图方块显示
tooltip: {
trigger: 'item',
formatter: "{b}",
formatter: function(params,ticket, callback){
console.log(params,ticket)
return params.name + '<br />' +
"确诊数："+params.data.quezhen + '<br />' +
"新增："+params.data.xinzeng + '<br />' +
"死亡："+params.data.siwang + '<br />' +
"疑似："+params.data.yisi + '<br />'
},
backgroundColor: 'rgba(0,0,0,0.5)',
padding: 10,
// 悬停
textStyle: {
color: 'orange',
fontSize: 12
},
},
左侧小导航
visualMap: {
show : true,
type: 'piecewise',
left: '20%',
//left: "left",
top: "bottom",
//bottom: '0',
textStyle: {
color: '#fff',
fontSize: 12
},
pieces: [{
min: 1,
max: 9,
label: "<10",
color: "#FFD7BB"
}, {
min: 10,
max: 99,
label: "10-99",
color: "#FFAD83"
}, {
min: 100,
max: 499,
label: "100-499",
color: "#F2684F"
}, {
min: 500,
max: 999,
label: "500-999",
color: "#D02327"
}, {
min: 1e3,
max: 1e15,
label: "≥1000",
color: "#6F151C"
}, {
max: -1e15,
label: "疑似",
color: "#FFF0D2"
}],
},
PS:
文章尚未发布，今早官方数据机构大变化，湖北一下子新增上万确诊，猝不及防！
文章也是猝不及防，以上数据截止2020-02-12
`1
网友评论