冠状病毒主题网页制作——疫情地图

一.引言

前几周一直在制作疫情主题的网页参加比赛,现在基本上忙完了,近期会写一些相关的总结,希望对大家有帮助。

二.使用到的库和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接口地址

冠状病毒主题网页制作——疫情地图_第1张图片
冠状病毒主题网页制作——疫情地图_第2张图片
通过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+'
'
+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

希望对你有帮助,谢谢!

你可能感兴趣的