疫情数据分析平台
文章平均质量分 53
EastMage
这个作者很懒,什么都没留下…
展开
-
疫情数据分析平台(十一):与可视化分工结合
负责可视化的同学在前端用echarts画出了各种可视化图,由于是前端echarts实现,故传给我的图并非静态,需要我在前端进行处理: 这些图是对于某一省份,点击后跳转呈现的可视化图表。对于前端,需要实现跳转、图表展现以及从后端请求数据体现在图表中。首先是跳转: 在中国地图中编写该函数,利用vue的跳转方法直接跳转。之后只需要在点击事件中添加该函数即可。跳转到具体页面,需要记录参数:通过watch监视参数的变化,传入该页面声明的变量。之后就是在对应页面请求数据:以上分别是请求数据和初原创 2022-06-08 20:56:28 · 335 阅读 · 1 评论 -
疫情数据分析平台(十):部署生产环境及优化
基本把框架搭起来,并且把后端同学做好的工作连接上后,我作为前端便可以考虑上传云服务器进行部署,之后的功能可以增量迭代。首先把项目部署,之后的内容都是重复且简单的。我们使用的服务器是阿里云,1M小水管,对于我们这个大数据分析平台,涉及海量的数据及图表,服务器带宽实在难顶。实际也是如此,不过我们项目经费不足(完全自费),也租不起更好的服务器,只得将就。但是面对1M传输带宽,我仍有办法将其优化。首次部署后,我发现主要问题如下:面对如上问题,我都有办法能够优化。首先是接口请求数据十分缓慢,通过实际抓包,我发现几个后原创 2022-06-01 21:44:30 · 248 阅读 · 0 评论 -
疫情数据分析平台(九):新闻推送网页
疫情数据平台中,有一部分页面能够推送相应的新闻内容。设计时,设计成可以通过导航栏跳转,或者通过首页相应的板块跳转。对于新闻,我的设想是设计新闻栏目一条一条呈现,首先的新闻图片放在轮播图上,每一条新闻可以点击跳转到外部链接。由于主要功能并非新闻,数据分析和可视化也不涉及新闻。因此我的工作只需要把后端传输过来的新闻列表贴出来。展示到相应位置即可。首先是主页上的新闻部分:同时获取后端数据,由于后端获取的新闻链接,只给出了对应的id号,需要我们自己手动拼接网址:自己手动构造对应的新闻链接。效果如下: 新原创 2022-05-31 20:53:35 · 321 阅读 · 0 评论 -
疫情数据分析平台(八):数据可视化展示
该项目疫情数据分析平台其中一大功能便是数据可视化。我们数据可视化分为若干部分,其中疫情地图由我来完成,而其他内容由其他成员完成。绘制好数据可视化的图表后,将通过后端传入前端。由于绘制的图表为动态,格式为html,即绘制成一个网页文件。面对这种情况,和后端沟通后,采取了这样的一种传输方式:前端首先根据用户选择图表类型及地区,将用户想要看的图表以名字的形式传入后端,后端给出对应的文件名字传回前端,前端根据这一文件名再次请求对应的文件接口(已经通过后端生成对应的网址),而前端获得该地址后则可以通过网址显示对应内容原创 2022-05-31 20:14:20 · 1505 阅读 · 0 评论 -
疫情数据分析平台(七):数据排行榜
网站中有这么一个功能,根据现存确诊的情况进行数据排行,并显示在页面中。由于我在本次项目前端开发主要采用eltab来承载ui,所以数据排行被设计在一个表格中,然后显示在一个eltab中。数据则是从后端获取,不过后端传过来的数据是杂乱的,即未排序的,因此需要我在前端用JavaScript进行数据排序。首先获取数据,用axios方法:var _this=this this.$axios.get('/user/world_data_dead').then(resp=>{ if原创 2022-05-31 19:58:46 · 203 阅读 · 0 评论 -
疫情数据分析平台(六):地区出入政策页面
我们这个项目疫情数据分析平台旨在提供直观的数据展示以及数据支持的决策,其中根据各地区的疫情防控政策,展示并且提示能够给予用户出行建议。对于前端来说,该功能的实现主要在于页面设计、获取后端传过来的数据、显示在页面上这三个方面。我们先来看页面设计:我的思路是,由于后端传过来的数据是双向的,即包含某市到某市的出入政策,在本地查看接口格式:可以看到后端传来的json数据包含四个参数:出入的省市,同时数据中包含出入的政策及健康码,我们对健康码的展示也是必要的。针对这样的数据形式,我考虑的是让用户进原创 2022-05-26 19:55:14 · 248 阅读 · 0 评论 -
疫情数据分析平台(五):中国疫情地图绘制
中国疫情地图相比世界疫情地图承载更多功能,因此其技术实现的难度也更高,相比世界地图echarts的绘制,中国疫情地图包含大量同步异步函数的使用,同时包含下钻(点击省份进入各省地图)和返回(回到中国地图),以及一些预想好的点击事件,其难度相对较高。中国地图并非使用像世界地图在echarts中直接调用。而是采用自定义地图,首先找到自定义的地图数据(json格式),包括中国地图以及各省份地图:数字代表各省的adcode前缀,如北京adcode为110000.一开始我采取的方法是在页面加载时将.原创 2022-05-25 17:39:14 · 1106 阅读 · 0 评论 -
疫情数据分析平台(四):世界疫情地图绘制
我同时兼任前端开发以及数据可视化中的疫情地图绘制,这部分内容属于我们项目中放在首页最醒目位置的内容,也是我们比较核心的功能之一。疫情地图绘制我将利用echarts的地图控件实现世界地图的绘制,功能包括世界地图国家板块、视觉映射效果(疫情严重与否体现在颜色深浅)、疫情数据的展示等。在开发疫情地图过程中,数据取自后端,但并不像一般页面中获取——渲染——展示这一简单流程即可实现。由于地图绘制和数据获取在同一生命周期且数据获取(axios请求数据)的时间不确定,取决于接口大小、网络速度等问题,因此需要引入大量异原创 2022-05-25 16:58:51 · 740 阅读 · 0 评论 -
疫情数据分析平台(三):前端开发
针对上一期的ui设计稿,我们继续将其实现为具体的前端界面,依然是比较前期的ui代码实现,不涉及具体数据的引入和渲染。首先开发头部导航栏,命名为header_nav(实际上由于尝试了两种设计,实际命名为header_nav2),按照之前ui设计稿的设想,我们需要四个导航选项以及一个标题<div> <div> <a class="header_title" href="/">疫情数据分析平台</a> </div> <原创 2022-05-25 16:25:28 · 420 阅读 · 0 评论 -
疫情数据分析平台(二):ui布局和展现
在前端中,有一个非常重要的前期工作:ui设计。一般公司企业开发中,ui设计由专业的ui设计师完成,再递交给前端开发工程师完成代码实现,但是该项目中我同时担任ui设计,需要对我们项目的平台进行一个可视化的设计。在代码开发前,我必须设想ui的大致样式,随后再进行开发。市面上有很多可以用来设计ui的软件,包括adobe的Photoshop、adobe的xd等,这里使用adobe的xd进行设计,其优势在于简单易上手,无需多余的学习成本。经过项目组讨论,决定该平台网站尽量直观和明显,于是希望在首页便承载疫情地原创 2022-05-02 20:57:59 · 497 阅读 · 0 评论 -
疫情数据分析平台前端(一):vue平台搭建
本次疫情数据分析平台项目开发中,我负责前端,包括前端ui、前端数据处理以及疫情地图的绘制和展现。该项目以网站为载体,呈现各种数据可视化和预测的结果,数据处理量大,与后端交互频繁,前端数据转换相对较多,因此选择能够轻易实现各种数据绑定以及包含大量插件的vue框架进行开发。在此我选择使用vue-cli和webpack结合进行创建项目,由于npm在国内连接不稳定,改用cnpm镜像进行各类依赖的安装:...原创 2022-05-02 20:40:28 · 1061 阅读 · 0 评论 -
疫情数据分析平台项目
旨在实现一个疫情大数据监控及可视化网站,能够实现实时疫情数据监控、疫情新闻推送、疫情趋势分析等功能。通过爬虫(python)获取网络新冠疫情数据,经过大数据分析处理后,在网站上进行基础的数据展示以及数据可视化。该平台可为用户提供疫情相关的数据、舆情分析、新闻,并为用户行为及决策提供参考。...原创 2022-02-22 21:18:27 · 1725 阅读 · 0 评论