冠状病毒主题网页制作 |
您所在的位置：网站首页 › giteepages审核 › 冠状病毒主题网页制作 |
冠状病毒主题网页制作
|
一.引言
前几周一直在制作疫情主题的网页参加比赛，现在基本上忙完了，近期会写一些相关的总结，希望对大家有帮助。 二.使用到的库和APIJS：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接口地址
根据返回的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对应的值赋值给countryif (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;iname:province[i], //省份简称value:currentConfirmedCount[i] //现存确诊人数})}d.push({ //由于api返回的数据中没有该区域数据，咱们手动添加，若不添加，则该区域最终显示提示为 Nullname:"南海诸岛",value:0}) })2.地图绘制 ①HTML部分 COVID-19 Map //echarts基础文件 //中国地图文件，已在上面提供下载链接//加载css文件 //用于承载地图的容器 //加载写好的js文件②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 希望对你有帮助，谢谢！ |
通过get调用api接口返回的 JSON数据 为（截取部分数据）【本文地址】