冠状病毒主题网页制作——疫情地图
一.引言前几周一直在制作疫情主题的网页参加比赛，现在基本上忙完了，近期会写一些相关的总结，希望对大家有帮助。二.使用到的库和APIJS：jQuery绘图相关使用的是Echarts其中包括：echarts.jschina.js由于各种原因Echarts不再提供地图文件的下载，所以地图文件的下载链接为我上传的CSDN的下载链接疫情数据调用的是GitHub上大佬提供的APIhttps://lab.isa
·
一.引言
前几周一直在制作疫情主题的网页参加比赛，现在基本上忙完了，近期会写一些相关的总结，希望对大家有帮助。
二.使用到的库和API
JS：jQuery
绘图相关使用的是Echarts
其中包括：
echarts.js
china.js
由于各种原因Echarts不再提供地图文件的下载，所以地图文件的下载链接为我上传的CSDN的下载链接
疫情数据调用的是GitHub上大佬提供的API
https://lab.isaaclin.cn/nCoV/
三.效果展示
四.代码详解
1.数据处理
let url = "https://lab.isaaclin.cn/nCoV/api/area"; //api接口地址
通过get调用api接口返回的 JSON数据 为（截取部分数据）
{"results": //json对象包含叫“results”的key，值为一个数组
[ //数组的每一个值为一个具体的对象
{"locationId":982006, //城市编号
"continentName":"非洲", //大洲名称
"continentEnglishName":"Africa", //大洲英文名
"countryName":"加纳", //国家名称
"countryEnglishName":"Ghana", //国家英文名
"countryFullName":"Ghana", //国家全称
"provinceName":"加纳", //省份名（当省份名等于国家名时，数据表示国家总数据）
"provinceEnglishName":"Ghana", //省份英文名
"provinceShortName":"加纳", //省份简称
"currentConfirmedCount":4653, //现存确诊人数
"confirmedCount":6683, //累计确诊人数
"suspectedCount":0, //疑似确诊人数（现代表境外输入，后期不知道会不会更改变量名）
"curedCount":1998, //累计治愈人数
"deadCount":32, //累计死亡人数
"comment":"", //其他信息
"cities":null, //下属城市情况
"updateTime":1590316721343}, //更新时间（到 1970年1月1日的秒数）
]}
根据返回的json数据格式和内容写代码
var d=[]; //用于存放要展示的数据
$.get(url,function(data,status) { //通过get获取数据
let province = []; //存放 省份名称
let currentConfirmedCount = []; //存放 现存确诊人数
let cured = []; //存放 累计治愈人数
let dead = []; //存放 累计死亡人数
for (let item of data["results"]) { //item为data中“results”对应的值中的对象
let country = item["countryName"];//将对象中key为countryName对应的值赋值给country
if (country == "中国") { //因为要获取中国各省份的信息，所以条件为country为中国时
if(item["provinceShortName"]!="中国") {//由于当省份名为该国家名时，数据为国家总数据，所以要把该数据剔除
province.push(item["provinceShortName"]);//将省份简称添加到数组中
currentConfirmedCount.push(item["currentConfirmedCount"]);//将现存确诊人数添加到数组中
cured.push(item["curedCount"]);//将累计治愈人数添加到数组中
dead.push(item["deadCount"]);//将累计死亡人数添加到数组中
}
}
}
//数据以现存确诊人数展示为例
for(let i=0;i<province.length;i++) {
d.push({
name:province[i], //省份简称
value:currentConfirmedCount[i] //现存确诊人数
})
}
d.push({ //由于api返回的数据中没有该区域数据，咱们手动添加，若不添加，则该区域最终显示提示为 Null
name:"南海诸岛",
value:0
})
})
2.地图绘制
①HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>COVID-19 Map</title>
<script src="echarts.js"></script> //echarts基础文件
<script src="jquery.js"></script>
<script src="china.js"></script> //中国地图文件，已在上面提供下载链接
<link rel="stylesheet" href="map/main.css">//加载css文件
</head>
<body>
<div id="china_chart" ></div> //用于承载地图的容器
<script src="map.js"></script> //加载写好的js文件
</body>
</html>
②CSS部分
*{
padding: 0px;
margin: 0px;
}
#china_chart{
background-color: rgba(255,255,255,0); //将容器设置透明，这样body若设置背景则可见
height: 700px; //echarts的容器高度必须设置为具体值
width: 100%; //宽度可用百分比表示
}
③JS部分
//初始化echarts，指定图表呈现在ID为'china_chart'的容器中
var china_chart = echarts.init(document.getElementById('china_chart'));
//设置图例中的颜色
var COLORS = ["#ffffff", "#fdf368", "#fdad4b", "#fb5173", "#bb3937", "#772526", "#480f10"];
china_chart.setOption({ //建议将该部分直接放入到 get中，否则可能出现数据加载不出来的问题
title:[{ //效果图左边文字
text: "Novel\n",
left: "4%",
y: "10%",
textStyle: {
fontSize: 70
}
}, {
text: "Coronavirus\n",
left: "4%",
y: "22%",
textStyle: {
fontSize: 70
},
},{
text: "2019",
left: "4%",
y: "34%",
textStyle: {
fontSize: 70
},
},{
text:"————",
left: "4%",
y: "42%",
textStyle: {
color: '#99cc33',
fontSize: 70
},
},{
text: "DATA SOURCES:",
left: "4%",
y: "51%",
textStyle: {
fontSize: 36
},
},
{
text: "DXY·DX DOCTOR",
left: "4%",
y: "58%",
textStyle: {
fontSize: 24
},
}, {
text: "CCTV NEWS",
left: "4%",
y: "64%",
textStyle: {
fontSize: 24
},
}, {
text: "CHINA DAILY\n",
left: "4%",
y: "70%",
textStyle: {
fontSize: 24
},
},
{
text: "National Health Commission of the PRC",
left: "4%",
y: "76%",
textStyle: {
fontSize: 24
},
},
],
tooltip: {
formatter:function(params){//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
return params.seriesName+'<br />'+params.name+'：'+params.value
}//数据格式化
},
visualMap: {//visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
type: 'piecewise',//分段型视觉映射组件
pieces: [{//自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。
value: 0, color: COLORS[0] //设置数值为0时展现的颜色
}, {
min: 1, max: 9, color: COLORS[1] //设置数值[1,9]时的颜色
}, {
min: 10, max: 99, color: COLORS[2]
}, {
min: 100, max: 499, color: COLORS[3]
}, {
min: 500, max: 999, color: COLORS[4]
}, {
min: 1000, max: 10000, color: COLORS[5]
}, {
min: 10000, color: COLORS[6]
}],
inRange: {
color:COLORS //取值范围的颜色
},
show:false//设置图注是否显示
},
geo: { //地理坐标系组件用于地图的绘制
map: 'china', //设置地图为中国
roam: false, //不开启缩放和平移
zoom:1.23, //视角缩放比例
label: { //地图上现实的文字标签
normal: {
show: false, //设置为不显示
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal: { // 普通状态下的样式
borderColor: '#333333',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 5
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
}
},
label:{
emphasis: {
show: false
}
},
left:"auto", //组件离容器左侧的距离,百分比字符串或整型数字
top:65, //组件离容器上侧的距离，百分比字符串或整型数字
right:"6%", //组件离容器右侧的距离,百分比字符串或整型数字
bottom:95,
},
series : [//系列列表。（图表）
{
name: '现存确诊人数',
type: 'map',//图表类型
geoIndex: 0,
data:d//图表的数据
}
]
})
其中如果对于echarts的一些具体参数不是很清楚，可以直接查阅官方文档
https://echarts.apache.org/zh/option.html#title
希望对你有帮助，谢谢！
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
13
0- 0
已为社区贡献1条内容
所有评论(0)