用炫酷大屏展示爬蟲數(shù)據(jù)！
大屏有時(shí)純粹是為了好看，領(lǐng)導(dǎo)的說(shuō)法是“花花綠綠的效果不錯(cuò)”。尤其放到展廳里，整面墻壁都是大屏那種，色彩十分艷麗。我嘗試了一下。不是專業(yè)的前端，所以用vue模板修改，前后端分離。后端使用fastapi，爬取的數(shù)據(jù)存入數(shù)據(jù)庫(kù)。效果圖如下，點(diǎn)擊看全屏效果
?下面這張是網(wǎng)上下載的vue大屏，我根據(jù)它來(lái)修改的修改內(nèi)容包括：- 更換背景大圖，形成"暗黑"星空風(fēng)格
- Apache ECharts官網(wǎng)找適合的效果圖，并修改
- 刪除詞云和中間的飛行地圖等，把自己的內(nèi)容排版進(jìn)去
數(shù)據(jù)來(lái)源
說(shuō)明
- 這里只介紹右邊的“降水量預(yù)報(bào)”。值越大，氣球越大
- 采用scrapy爬取數(shù)據(jù)
- 數(shù)據(jù)爬自weather.cma.cn
-
定義要爬的url，降水量相加得到某地未來(lái)一天的降雨量
運(yùn)行過(guò)程
爬蟲腳本
參考 ssw的小型文檔網(wǎng)站后端接口
數(shù)據(jù)庫(kù)的爬蟲數(shù)據(jù)
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('入庫(kù)失敗',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=='益陽(yáng)'): yys=i elif(city=='永順'): xxz=i elif(city=='長(zhǎng)沙'): css=i elif(city=='張家界'): zjjs=i elif(city=='邵陽(yáng)市'): 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部分目錄結(jié)構(gòu)
文件已上傳，下載地址. ├──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
文件說(shuō)明
router/index.js編寫路由constroutes=[ { path:'/alerts', name:'alerts', component:()=>import('@/views/alerts.vue'), meta:{ title:'告警' } }, ] main.js
- 導(dǎo)入router/index.js中的路由
-
導(dǎo)入components/index.js中定義的組件，方便其它文件引用。如在alerts.vue中寫上
importVuefrom'vue' importrouterfrom'./router' importVcompfrom'./components/index'// Vue.use(Vcomp) components/index.js組件在這個(gè)文件進(jìn)行匯總
importrainfrom'./companySummary/rain'//區(qū)域雨量 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組件
...省略
-
向fastapi接口發(fā)送請(qǐng)求
exportconstrainInfo=(params)=>{ returnaxios.get('http://localhost:5000/rain/') } api/options.js
-
向fastapi接口發(fā)送請(qǐng)求
-
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:'長(zhǎng)沙市',value:parseFloat(res.data.css[1])}, {name:'邵陽(yáng)市',value:parseFloat(res.data.sys[1])}, {name:'益陽(yáng)市',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={//坐標(biāo)數(shù)據(jù) '婁底市':[112.008497,27.728136], '長(zhǎng)沙市':[112.982279,28.19409], '邵陽(yáng)市':[111.46923,27.237842], '益陽(yáng)市':[112.355042,28.570066], '張家界市':[110.479921,29.127401], '湘西土家族苗族自治州':[109.739735,28.314296], '常德市':[111.691347,29.040225], '株洲市':[113.151737,27.835806], }; ...省略 }
總結(jié)
- 通過(guò)這次嘗試，簡(jiǎn)單實(shí)現(xiàn)了大屏效果。條形圖、折線圖、飛行地圖、詞云等，還可以去Apache ECharts官網(wǎng)找資源加入到大屏。如果你對(duì)threejs很了解，甚至可以把它的3D效果加入進(jìn)來(lái)
- 有些大屏用html編寫，一大段一大段的代碼讓人失去修改的興趣，相比來(lái)說(shuō)vue更簡(jiǎn)潔、代碼少、修改快。
審核編輯 ：李倩
聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。
舉報(bào)投訴
-
數(shù)據(jù)庫(kù)
+關(guān)注
關(guān)注
7文章
3794瀏覽量
64360 -
代碼
+關(guān)注
關(guān)注
30文章
4779瀏覽量
68521 -
爬蟲
+關(guān)注
關(guān)注
0文章
82瀏覽量
6867
原文標(biāo)題：太帥了！我用炫酷大屏展示爬蟲數(shù)據(jù)！
文章出處：【微信號(hào)：AI科技大本營(yíng)，微信公眾號(hào)：AI科技大本營(yíng)】歡迎添加關(guān)注！文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
什么是大屏數(shù)據(jù)可視化？特點(diǎn)有哪些？
大屏數(shù)據(jù)可視化是指通過(guò)大屏幕展示大量數(shù)據(jù)和信息，以直觀、可視化的方式幫助用戶理解和分析數(shù)據(jù)。這種展示
如何利用海外爬蟲IP進(jìn)行數(shù)據(jù)抓取
利用海外爬蟲IP進(jìn)行數(shù)據(jù)抓取需要綜合考慮多個(gè)方面。
詳細(xì)解讀爬蟲多開代理IP的用途，以及如何配置！
爬蟲多開代理IP是一種在爬蟲開發(fā)中常用的技術(shù)策略，主要用于提高數(shù)據(jù)采集效率、避免IP被封禁以及獲取地域特定的數(shù)據(jù)。
聚徽-什么是數(shù)據(jù)大屏
數(shù)據(jù)大屏是一種基于可視化技術(shù)的數(shù)據(jù)展示工具，它通過(guò)大屏幕為媒介，利用智能顯示技術(shù)，在屏幕范圍內(nèi)同時(shí)呈現(xiàn)多個(gè)圖表，將各種數(shù)據(jù)和關(guān)鍵指標(biāo)以直觀、
大屏展示駕駛艙，實(shí)現(xiàn)動(dòng)態(tài)炫酷效果
可視化大屏 駕駛艙作為一種數(shù)據(jù)展示和決策支持工具，在當(dāng)今信息化時(shí)代扮演著舉足輕重的角色。其特點(diǎn)包括信息集成性、實(shí)時(shí)性、可視化展示、交互性等，優(yōu)勢(shì)在于全面監(jiān)控、決策支持、團(tuán)隊(duì)協(xié)同和效益提
可視化數(shù)據(jù)大屏的制作流程
制作可視化數(shù)據(jù)大屏是一項(xiàng)涵蓋數(shù)據(jù)分析、設(shè)計(jì)和技術(shù)實(shí)現(xiàn)的復(fù)雜任務(wù)。從數(shù)據(jù)處理到展示呈現(xiàn)，每個(gè)步驟都至關(guān)重要。下面將詳細(xì)介紹可視化
網(wǎng)絡(luò)爬蟲,Python和數(shù)據(jù)分析
電子發(fā)燒友網(wǎng)站提供《網(wǎng)絡(luò)爬蟲,Python和數(shù)據(jù)分析.pdf》資料免費(fèi)下載
發(fā)表于 07-13 09:27
?1次下載
VA段碼COG液晶屏可個(gè)性化靈活設(shè)計(jì)UI，實(shí)現(xiàn)創(chuàng)意UI的高對(duì)比高亮多色彩炫酷顯示。
VA段碼COG液晶屏可個(gè)性化靈活設(shè)計(jì)UI，實(shí)現(xiàn)創(chuàng)意UI的高對(duì)比高亮多色彩炫酷顯示。
用pycharm進(jìn)行python爬蟲的步驟
以下是使用PyCharm進(jìn)行Python爬蟲的步驟： 安裝PyCharm和Python 首先，您需要安裝PyCharm和Python。PyCharm是一個(gè)流行的Python集成開發(fā)環(huán)境（IDE），它
大屏數(shù)據(jù)可視化 開源
在當(dāng)今信息爆炸的時(shí)代，數(shù)據(jù)已經(jīng)成為各個(gè)行業(yè)決策制定和業(yè)務(wù)發(fā)展的關(guān)鍵。為了更直觀、準(zhǔn)確地理解和利用海量數(shù)據(jù)， 大屏數(shù)據(jù)可視化 成為一種強(qiáng)大的工具。通過(guò)將
電磁數(shù)據(jù)展示平臺(tái)
智慧華盛恒輝電磁數(shù)據(jù)展示平臺(tái)是一種專門用于展示和分析電磁數(shù)據(jù)的軟件系統(tǒng)。以下是對(duì)電磁數(shù)據(jù)展示平臺(tái)
又進(jìn)化了！全志T113智能家居86盒圓屏版（圓屏加一體化驅(qū)動(dòng)板+CNC外殼+炫酷LVGL UI）
FanHuaCloud大佬加持下，又給86盒挖了個(gè)新坑，為了解決之前ESP32所驅(qū)動(dòng)圓屏只能播放MJPEG并且?guī)瘦^低的尷尬問(wèn)題，集圓屏加一體化驅(qū)動(dòng)板+外殼+炫酷LVGL UI于一身的
發(fā)表于 04-15 09:56
全球新聞網(wǎng)封鎖OpenAI和谷歌AI爬蟲
分析結(jié)果顯示，至2023年底，超半數(shù)（57%）的傳統(tǒng)印刷媒體如《紐約時(shí)報(bào)》等已關(guān)閉OpenAI爬蟲，反之電視廣播以及數(shù)字原生媒體相應(yīng)地分別為48%和31%。而對(duì)于谷歌人工智能爬蟲，32%的印刷媒體采取相同措施，電視廣播和數(shù)字原生媒體的比率分別為19%和17%。
如何解決Python爬蟲中文亂碼問(wèn)題？Python爬蟲中文亂碼的解決方法
如何解決Python爬蟲中文亂碼問(wèn)題？Python爬蟲中文亂碼的解決方法 在Python爬蟲過(guò)程中，遇到中文亂碼問(wèn)題是常見的情況。亂碼問(wèn)題主要是由于編碼不一致所導(dǎo)致的，下面我將詳細(xì)介紹如何解
工商網(wǎng)監(jiān)
評(píng)論