一区二区三区三上|欧美在线视频五区|国产午夜无码在线观看视频|亚洲国产裸体网站|无码成年人影视|亚洲AV亚洲AV|成人开心激情五月|欧美性爱内射视频|超碰人人干人人上|一区二区无码三区亚洲人区久久精品

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線(xiàn)課程
  • 觀看技術(shù)視頻
  • 寫(xiě)文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

用炫酷大屏展示爬蟲(chóng)數(shù)據(jù)!

電子工程師 ? 來(lái)源:Python技術(shù) ? 作者:派森醬 ? 2022-08-05 11:06 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

大屏有時(shí)純粹是為了好看,領(lǐng)導(dǎo)的說(shuō)法是“花花綠綠的效果不錯(cuò)”。尤其放到展廳里,整面墻壁都是大屏那種,色彩十分艷麗。我嘗試了一下。不是專(zhuān)業(yè)的前端,所以用vue模板修改,前后端分離。后端使用fastapi,爬取的數(shù)據(jù)存入數(shù)據(jù)庫(kù)。效果圖如下,點(diǎn)擊看全屏效果5c6dc45e-146a-11ed-ba43-dac502259ad0.png ?下面這張是網(wǎng)上下載的vue大屏,我根據(jù)它來(lái)修改的修改內(nèi)容包括:
  1. 更換背景大圖,形成"暗黑"星空風(fēng)格
  2. Apache ECharts官網(wǎng)找適合的效果圖,并修改
  3. 刪除詞云和中間的飛行地圖等,把自己的內(nèi)容排版進(jìn)去

5c89e242-146a-11ed-ba43-dac502259ad0.png

數(shù)據(jù)來(lái)源

說(shuō)明

  1. 這里只介紹右邊的“降水量預(yù)報(bào)”。值越大,氣球越大
5ca5890c-146a-11ed-ba43-dac502259ad0.png
  1. 采用scrapy爬取數(shù)據(jù)
  2. 數(shù)據(jù)爬自weather.cma.cn
  3. 定義要爬的url,降水量相加得到某地未來(lái)一天的降雨量

    5ccc8c1e-146a-11ed-ba43-dac502259ad0.png

運(yùn)行過(guò)程

5ce4b5be-146a-11ed-ba43-dac502259ad0.gif

爬蟲(chóng)腳本

參考 ssw的小型文檔網(wǎng)站

后端接口

數(shù)據(jù)庫(kù)的爬蟲(chóng)數(shù)據(jù)

5d046b66-146a-11ed-ba43-dac502259ad0.png

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編寫(xiě)路由

	constroutes=[ { path:'/alerts', name:'alerts', component:()=>import('@/views/alerts.vue'), meta:{ title:'告警' } }, ] main.js
  1. 導(dǎo)入router/index.js中的路由
  2. 導(dǎo)入components/index.js中定義的組件,方便其它文件引用。如在alerts.vue中寫(xiě)上即可引用

	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組件

	...省略 class="panel"> <h2>20小時(shí)降水量預(yù)報(bào)h2> <rain/> <divclass="panel-footer">div> </div> ...省略 api/index.js
  • 向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)了大屏效果。條形圖、折線(xiàn)圖、飛行地圖、詞云等,還可以去Apache ECharts官網(wǎng)找資源加入到大屏。如果你對(duì)threejs很了解,甚至可以把它的3D效果加入進(jìn)來(lái)
  • 有些大屏用html編寫(xiě),一大段一大段的代碼讓人失去修改的興趣,相比來(lái)說(shuō)vue更簡(jiǎn)潔、代碼少、修改快。

		

審核編輯 :李倩


聲明:本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(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

    文章

    3925

    瀏覽量

    66182
  • 代碼
    +關(guān)注

    關(guān)注

    30

    文章

    4900

    瀏覽量

    70678
  • 爬蟲(chóng)
    +關(guān)注

    關(guān)注

    0

    文章

    83

    瀏覽量

    7497

原文標(biāo)題:太帥了!我用炫酷大屏展示爬蟲(chóng)數(shù)據(jù)!

文章出處:【微信號(hào):AI科技大本營(yíng),微信公眾號(hào):AI科技大本營(yíng)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。

收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評(píng)論

    相關(guān)推薦
    熱點(diǎn)推薦

    樹(shù)莓派GUI應(yīng)用開(kāi)發(fā):從零到的魔法之旅!

    的GUI應(yīng)用開(kāi)發(fā)有多好玩、多實(shí)用!樹(shù)莓派+GUI:不只是“好看”那么簡(jiǎn)單!你可能已經(jīng)知道,樹(shù)莓派是一款性?xún)r(jià)比超高的開(kāi)發(fā)板,但你有沒(méi)有想過(guò),給它加上一個(gè)的圖形界
    的頭像 發(fā)表于 04-04 09:03 ?485次閱讀
    樹(shù)莓派GUI應(yīng)用開(kāi)發(fā):從零到<b class='flag-5'>炫</b><b class='flag-5'>酷</b>的魔法之旅!

    啟明智顯兩位數(shù)高性?xún)r(jià)比4.3寸觸摸串口,帶WIFI/藍(lán)牙

    Model3E核心板方案觸摸串口,工業(yè)級(jí)設(shè)計(jì),2D加速,PNG/JPEG編解碼,不到百元也可呈現(xiàn)復(fù)雜UI
    的頭像 發(fā)表于 04-03 16:05 ?347次閱讀
    啟明智顯兩位數(shù)高性?xún)r(jià)比4.3寸觸摸串口<b class='flag-5'>屏</b>,帶WIFI/藍(lán)牙

    透明幻境:玻璃穹頂打造的樹(shù)莓派透明顯示器!

    經(jīng)典的“佩珀?duì)柣孟蟆毙Ч沁@款透明屏幕背后的原理。RaspberryPi最酷的方面之一是其與各種硬件的兼容性。例如,創(chuàng)客們使用各種屏幕,從超寬觸摸到電子墨水。然而,YouTub
    的頭像 發(fā)表于 03-25 09:22 ?266次閱讀
    透明幻境:<b class='flag-5'>用</b>玻璃穹頂打造的樹(shù)莓派透明顯示器!

    樹(shù)莓派Pico重現(xiàn)《戰(zhàn)爭(zhēng)游戲》經(jīng)典:打造服務(wù)器機(jī)架上的‘WOPR’LED矩陣!

    時(shí)不時(shí)地,你會(huì)發(fā)現(xiàn)一些創(chuàng)客喜歡RaspberryPi來(lái)裝飾他們的硬件,而我們也非常支持這種做法。今天,我們展示的是由創(chuàng)客兼開(kāi)發(fā)者Aforsberg(他們?cè)赑rintables上的昵稱(chēng))組裝的一個(gè)
    的頭像 發(fā)表于 03-24 14:52 ?285次閱讀
    <b class='flag-5'>用</b>樹(shù)莓派Pico重現(xiàn)《戰(zhàn)爭(zhēng)游戲》經(jīng)典:打造服務(wù)器機(jī)架上的‘WOPR’LED矩陣!

    爬蟲(chóng)數(shù)據(jù)獲取實(shí)戰(zhàn)指南:從入門(mén)到高效采集

    爬蟲(chóng)數(shù)據(jù)獲取實(shí)戰(zhàn)指南:從入門(mén)到高效采集 ? ? 在數(shù)字化浪潮中,數(shù)據(jù)已成為驅(qū)動(dòng)商業(yè)增長(zhǎng)的核心引擎。無(wú)論是市場(chǎng)趨勢(shì)洞察、競(jìng)品動(dòng)態(tài)追蹤,還是用戶(hù)行為分析,爬蟲(chóng)技術(shù)都能助你快速捕獲目標(biāo)信息。
    的頭像 發(fā)表于 03-24 14:08 ?613次閱讀

    IP地址數(shù)據(jù)信息和爬蟲(chóng)攔截的關(guān)聯(lián)

    IP地址數(shù)據(jù)信息和爬蟲(chóng)攔截的關(guān)聯(lián)主要涉及到兩方面的內(nèi)容,也就是數(shù)據(jù)信息和爬蟲(chóng)。IP 地址數(shù)據(jù)信息的內(nèi)容豐富,包括所屬地域、所屬網(wǎng)絡(luò)運(yùn)營(yíng)商、訪(fǎng)
    的頭像 發(fā)表于 12-23 10:13 ?376次閱讀

    什么是大數(shù)據(jù)可視化?特點(diǎn)有哪些?

    數(shù)據(jù)可視化是指通過(guò)大屏幕展示大量數(shù)據(jù)和信息,以直觀、可視化的方式幫助用戶(hù)理解和分析數(shù)據(jù)。這種展示
    的頭像 發(fā)表于 12-16 16:59 ?676次閱讀

    全球視野下的海外爬蟲(chóng)IP:趨勢(shì)、機(jī)遇與風(fēng)險(xiǎn)

    在全球視野下,海外爬蟲(chóng)IP的使用呈現(xiàn)出一系列趨勢(shì),同時(shí)也伴隨著機(jī)遇與風(fēng)險(xiǎn)。
    的頭像 發(fā)表于 10-15 07:54 ?535次閱讀

    海外爬蟲(chóng)IP的合法邊界:合規(guī)性探討與實(shí)踐

    海外爬蟲(chóng)IP的合法邊界主要涉及合規(guī)性探討與實(shí)踐。
    的頭像 發(fā)表于 10-12 07:56 ?604次閱讀

    如何利用海外爬蟲(chóng)IP進(jìn)行數(shù)據(jù)抓取

    利用海外爬蟲(chóng)IP進(jìn)行數(shù)據(jù)抓取需要綜合考慮多個(gè)方面。
    的頭像 發(fā)表于 10-12 07:54 ?588次閱讀

    詳細(xì)解讀爬蟲(chóng)多開(kāi)代理IP的用途,以及如何配置!

    爬蟲(chóng)多開(kāi)代理IP是一種在爬蟲(chóng)開(kāi)發(fā)中常用的技術(shù)策略,主要用于提高數(shù)據(jù)采集效率、避免IP被封禁以及獲取地域特定的數(shù)據(jù)。
    的頭像 發(fā)表于 09-14 07:55 ?806次閱讀

    聚徽-什么是數(shù)據(jù)

    數(shù)據(jù)是一種基于可視化技術(shù)的數(shù)據(jù)展示工具,它通過(guò)大屏幕為媒介,利用智能顯示技術(shù),在屏幕范圍內(nèi)同時(shí)呈現(xiàn)多個(gè)圖表,將各種數(shù)據(jù)和關(guān)鍵指標(biāo)以直觀、
    的頭像 發(fā)表于 08-26 09:53 ?689次閱讀

    展示駕駛艙,實(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é)同和效益提
    的頭像 發(fā)表于 07-29 16:55 ?974次閱讀

    可視化數(shù)據(jù)的制作流程

    制作可視化數(shù)據(jù)是一項(xiàng)涵蓋數(shù)據(jù)分析、設(shè)計(jì)和技術(shù)實(shí)現(xiàn)的復(fù)雜任務(wù)。從數(shù)據(jù)處理到展示呈現(xiàn),每個(gè)步驟都至關(guān)重要。下面將詳細(xì)介紹可視化
    的頭像 發(fā)表于 07-24 13:57 ?1159次閱讀