疫情数据分析平台（四）：世界疫情地图绘制

我同时兼任前端开发以及数据可视化中的疫情地图绘制，这部分内容属于我们项目中放在首页最醒目位置的内容，也是我们比较核心的功能之一。疫情地图绘制我将利用echarts的地图控件实现世界地图的绘制，功能包括世界地图国家板块、视觉映射效果（疫情严重与否体现在颜色深浅）、疫情数据的展示等。

在开发疫情地图过程中，数据取自后端，但并不像一般页面中获取——渲染——展示这一简单流程即可实现。由于地图绘制和数据获取在同一生命周期且数据获取（axios请求数据）的时间不确定，取决于接口大小、网络速度等问题，因此需要引入大量异步和同步函数来完成数据渲染。

首先从网络获取一个namemap，国家中英文名对照表，由于echarts内部世界地图的板块是英文标识的，因此需要其与中文名对应（部分对照）：

    "Azerbaijan": "阿塞拜疆","Bahamas": "巴哈马","Bangladesh": "孟加拉国","Belgium": "比利时","Benin": "贝宁","Burkina Faso": "布基纳法索","Burundi": "布隆迪","Bulgaria": "保加利亚","Bosnia and Herz.": "波斯尼亚和黑塞哥维那","Belarus": "白俄罗斯","Belize": "伯利兹","Bermuda": "百慕大群岛","Bolivia": "玻利维亚","Brazil": "巴西","Brunei": "文莱","Bhutan": "不丹","Botswana": "博茨瓦纳","Cambodia": "柬埔寨","Cameroon": "喀麦隆","Canada": "加拿大","Central African Rep.": "中非共和国","Chad": "乍得",

之后在页面编写地图绘制函数：

drawChart(name,data){//基于准备好的dom，初始化echarts实例let chart=echarts.init(document.getElementById('chart1'))//监听屏幕变化自动缩放图表window.addEventListener('resize',function() {chart.resize()})var _this=this//绘制图表chart.setOption({grid:{width:'100%',height:'100%',left:'0%',right:'0%',bottom:'0%',containLabel:true},//提示框组件tooltip:{trigger:'item',//触发类型，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用//提示框浮层内容格式器，支持字符串模板和回调函数两种形式//使用函数模板 传入的数据值-》value：number | Arrayformatter:function(val){if(val.data == null) return;return val.name+': '+val.value}},// 视觉映射组件visualMap:{min:0,max:10000,text:['max','min'],realtime:false,calcuable:true,color:['#ff4500','#fffafa'],},series:[{type:'map',//类型//系列名称。用于tooltip的显示，legend的图例筛选 在setOption更新数据和配置项时用于指定对应的系列name:'世界地图',mapType:'world',//地图类型//是否开启鼠标缩放和平移漫游 默认不开启，若只想开启缩放或者平移，可以设置成‘scale’或者‘move’设置成true为都开启roam:true,//图形上的文本标签label:{show:false//是否显示对应地名},zoom:1.2,//地图区域的多边形图形样式itemStyle:{//areaColor:'#7b68ee', //地图区域的颜色，如果设置了visualMap，areaColor属性将不起作用borderWidth:0.5,//描边线宽为0 时无描边borderColor:'#000',//图形的描边颜色 支持的颜色格式同color，不支持回调函数borderType:'solid'//描边类型， 默认为实线，支持'solid‘，’dashed‘，‘dotted’},//高亮状态下的多边形和标签样式emphasis:{label:{show:true,//是否显示标签color:'#fff'//文字的颜色，如果设置为auto，则为视觉映射得到的颜色，如系列色},itemStyle:{areaColor:'#0064d0'//地图区域的颜色}},//自定义地区的名称映射nameMap:name,// 地图系列的数据内容数组，数组项可以为单个数值data:data}]})chart.on('click',function (param) {console.log(param.data.name)//控制逻辑})}

其原理很简单，首先在页面保留一个div，设置其id为‘chart1’，在JavaScript函数里利用document.getElementById()获取对应dom元素，对图表设置若干设置，大体情况如注释。在visualMap设置里进行视觉映射效果的配置，我将疫情严重与否映射到白色到棕红色。tooltip设置中可以配置鼠标悬浮时的提示框显示，我将其设置为国家名：现存确诊的格式。

在

chart.on('click',function (param) {

})

代码中，匿名函数体触发点击事件，现在预想是对应后期的可视化图表页面跳转。

绘制图表函数写好后，编写一个传入数据的函数：

 getWorld(data){let namemap=world.namemaplet dataArr=this.worldChartdatathis.drawChart(namemap,dataArr)},

编写axios请求，获取后端数据：

loadWorldData(){/* var _this=thisthis.$axios.get('/user/2').then(resp=>{if(resp&&resp.status===200){_this.worlddata=resp.data.newslist}}).then(()=>{for(var i=0;i<this.worlddata.length;i++){var obj={name:this.worlddata[i].provinceName,value:this.worlddata[i].currentConfirmedCount}this.worldChartdata.push(obj)}console.log(this.worldChartdata)}).then(()=>{this.getWorld(this.msg)})*/var _this=thisthis.$axios.get('/user/world_data').then(resp=>{if(resp&&resp.status===200){_this.worldChartdata=resp.data}}).then(()=>{this.getWorld(this.msg)})},

可以看到，axios请求会返回一个promise对象，promise对象中的数据处理需要在then函数中进行处理。同时利用then函数必须等待前面的方法执行完的同步特点，进行顺序处理，先获取数据后渲染数据到地图。在mounted周期调用loadWorldData（）函数即可。最后我们可以看到效果：

可以看到地图的效果

疫情数据分析平台（四）：世界疫情地图绘制相关推荐

疫情数据分析平台（三）：前端开发
针对上一期的ui设计稿,我们继续将其实现为具体的前端界面,依然是比较前期的ui代码实现,不涉及具体数据的引入和渲染. 首先开发头部导航栏,命名为header_nav(实际上由于尝试了两种设计,实际命名 ...
疫情数据分析平台（五）：中国疫情地图绘制
中国疫情地图相比世界疫情地图承载更多功能,因此其技术实现的难度也更高,相比世界地图echarts的绘制,中国疫情地图包含大量同步异步函数的使用,同时包含下钻(点击省份进入各省地图)和返回(回到中国地图 ...
疫情数据分析平台工作报告【2】接口API
接口api申请请求接口:/nCoV/api/overall 请求方式:GET 返回自爬虫运行开始(2020年1月24日下午4:00)至今,病毒研究情况以及全国疫情概览,可指定返回数据为最新发布数据或 ...
springboot vue mybatis mysql校园疫情数据分析平台源码
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流和毕业设计✌ 公众号:[程序代做源码分享] 免费源码获取.精品资源.面试题库等都给你
python做疫情数据分析的框架_Python制作新冠疫情世界地图
目录 pyecharts模块简介 Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可.而 Python 是一门富有表达力的语言,很适合用于数据处 ...
停车场地图如何绘制，停车场地图绘制软件有哪些
停车场地图如何绘制?停车场地图应用是一种以停车场空间结构数据为基础的地理信息系统,它可以直观为驾驶者提供准确的车位信息及停车场出入口.电扶梯等位置信息,帮助驾驶者更加准确快速地找到停车位置.此外,还可 ...
Python绘制世界疫情地图
世界疫情数据下载: 方法一:关注微信公众号大数据智库(公众号二维码在我的主页左下角),回复疫情数据,即可获取网盘链接方法二:在gitee上面下载>>点击:疫情数据下载注:此数据是202 ...
【大数据平台】基于Spark的美国新冠肺炎疫情数据分析及预测
(本实验系中国地质大学(武汉)2022年秋期大数据平台及应用课程设计) 一.选题背景新型冠状病毒疫情是由严重急性呼吸系统综合征冠状病毒2(SARS-CoV-2)导致的2019冠状病毒病(COVID- ...
vue实现世界疫情地图(点击进入子地图)
vue实现世界疫情地图,点击可以进入子地图效果展示寻找数据源设置代理发送请求提取数据提取数据踩坑处理数据并绘图国内疫情地图数据处理绘制海外疫情地图数据处理绘制完整代码代码优化点 ...

疫情数据分析平台（四）：世界疫情地图绘制

疫情数据分析平台（四）：世界疫情地图绘制相关推荐

最新文章

热门文章