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

2022年05月13日 阅读数:1
这篇文章主要向大家介绍冠状病毒主题网页制做——疫情地图,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

一.引言

前几周一直在制做疫情主题的网页参加比赛,如今基本上忙完了,近期会写一些相关的总结,但愿对你们有帮助。javascript

二.使用到的库和API

JS:jQuery
绘图相关使用的是Echarts
其中包括:
echarts.js
china.jscss

因为各类缘由Echarts再也不提供地图文件的下载,因此地图文件的下载连接为我上传的CSDN的下载连接html

疫情数据调用的是GitHub上大佬提供的API
https://lab.isaaclin.cn/nCoV/java

三.效果展现

在这里插入图片描述

四.代码详解

1.数据处理jquery

let url = "https://lab.isaaclin.cn/nCoV/api/area";	//api接口地址

在这里插入图片描述
在这里插入图片描述
经过get调用api接口返回的 JSON数据 为(截取部分数据)git

{
   
   "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数据格式和内容写代码github

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部分web

<!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部分apache

*{
   
   
    padding: 0px;
    margin: 0px;
}
#china_chart{
   
   
    background-color: rgba(255,255,255,0);	//将容器设置透明,这样body若设置背景则可见
    height: 700px;		//echarts的容器高度必须设置为具体值
    width: 100%;		//宽度可用百分比表示
}

③JS部分json

//初始化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

但愿对你有帮助,谢谢!