用炫酷大屏展示爬虫数据！

大屏有时纯粹是为了好看，领导的说法是“花花绿绿的效果不错”。尤其放到展厅里，整面墙壁都是大屏那种，色彩十分艳丽。我尝试了一下。不是专业的前端，所以用vue模板修改，前后端分离。后端使用fastapi，爬取的数据存入数据库。效果图如下，点击看全屏效果  下面这张是网上下载的vue大屏，我根据它来修改的修改内容包括：

1. 更换背景大图，形成"暗黑"星空风格
2. Apache ECharts官网找适合的效果图，并修改
3. 删除词云和中间的飞行地图等，把自己的内容排版进去

数据来源

说明

1. 这里只介绍右边的“降水量预报”。值越大，气球越大

2. 采用scrapy爬取数据
3. 数据爬自weather.cma.cn
4. 定义要爬的url，降水量相加得到某地未来一天的降雨量

   

运行过程

爬虫脚本

参考 ssw的小型文档网站

后端接口

数据库的爬虫数据

fastapi

• 接口url：
  • http://localhost:5000/rain/
• 脚本：

fromfastapiimportFastAPI fromfastapi.responsesimportJSONResponse importpymysql app=FastAPI() defconn_mysql(sql): dbparam={ 'host':'127.0.0.1', 'port':3306, 'user':'root', 'password':'1024', 'database':'alerts', 'charset':'utf8' } conn=pymysql.connect(**dbparam) cursor=conn.cursor() try: cursor.execute(sql) res=cursor.fetchall() exceptExceptionase: print('入库失败',e) conn.rollback() finally: cursor.close() conn.close() returnres defget_rains_from_db(): sql='SELECTcity,rainfromrains' res=conn_mysql(sql) returnres @app.get('/rain') defrain(): res=get_rains_from_db() foriinres: city=i[0].strip() if(city=='益阳'): yys=i elif(city=='永顺'): xxz=i elif(city=='长沙'): css=i elif(city=='张家界'): zjjs=i elif(city=='邵阳市'): sys=i elif(city=='株洲'): zzs=i elif(city=='常德'): cds=i elif(city=='娄底'): ld=i returnJSONResponse({'data':{'ld':ld,'css':css,'sys':sys,'yys':yys,'zjjs':zjjs, 'xxz':xxz,'cds':cds,'zzs':zzs}})

前端展示

vue部分目录结构

文件已上传，下载地址

. ├──public │└──json │└──430000.json └──src ├──api │├──http.js │├──index.js │└──options.js ├──components │├──companySummary ││└──rain.vue │└──index.js ├──main.js ├──router │└──index.js └──views └──alerts.vue

文件说明

router/index.js编写路由

constroutes=[ { path:'/alerts', name:'alerts', component:()=>import('@/views/alerts.vue'), meta:{ title:'告警' } }, ] main.js

1. 导入router/index.js中的路由
2. 导入components/index.js中定义的组件，方便其它文件引用。如在alerts.vue中写上即可引用

importVuefrom'vue' importrouterfrom'./router' importVcompfrom'./components/index'// Vue.use(Vcomp) components/index.js组件在这个文件进行汇总

importrainfrom'./companySummary/rain'//区域雨量 constcomponents={ rain,//指components/companySummary/rain.vue } constVcomp={ ...components, install }; exportdefaultVcomp components/companySummary/rain.vue

import{mapOptions}from'@/api/options.js' exportdefault{ name:'rain', } views/alerts.vue这里引用rain.vue组件

...省略 class="panel"> <h2>20小时降水量预报h2> <rain/> <divclass="panel-footer">div> </div> ...省略 api/index.js

• 向fastapi接口发送请求

exportconstrainInfo=(params)=>{ returnaxios.get('http://localhost:5000/rain/') } api/options.js

• 向fastapi接口发送请求

• mapOptions在rain.vue被引用，被apache echarts使用

$.ajax({ type:"GET", url:"http://localhost:5000/rain/", dataType:'json', async:false, success:function(res){ varxxx=[ {name:'娄底市',value:parseFloat(res.data.ld[1])}, {name:'长沙市',value:parseFloat(res.data.css[1])}, {name:'邵阳市',value:parseFloat(res.data.sys[1])}, {name:'益阳市',value:parseFloat(res.data.yys[1])}, {name:'张家界市',value:parseFloat(res.data.zjjs[1])}, {name:'湘西土家族苗族自治州',value:parseFloat(res.data.xxz[1])}, {name:'常德市',value:parseFloat(res.data.cds[1])}, {name:'株洲市',value:parseFloat(res.data.zzs[1])}, ]; }}) exportfunctionmapOptions(mapType){ vargeoCoordMap={//坐标数据 '娄底市':[112.008497,27.728136], '长沙市':[112.982279,28.19409], '邵阳市':[111.46923,27.237842], '益阳市':[112.355042,28.570066], '张家界市':[110.479921,29.127401], '湘西土家族苗族自治州':[109.739735,28.314296], '常德市':[111.691347,29.040225], '株洲市':[113.151737,27.835806], }; ...省略 }

总结

• 通过这次尝试，简单实现了大屏效果。条形图、折线图、飞行地图、词云等，还可以去Apache ECharts官网找资源加入到大屏。如果你对threejs很了解，甚至可以把它的3D效果加入进来
• 有些大屏用html编写，一大段一大段的代码让人失去修改的兴趣，相比来说vue更简洁、代码少、修改快。

审核编辑 ：李倩