cda

数字化人才认证

您的位置:首页 > 精彩阅读 > 太帅了!我用炫酷大屏展示爬虫数据

太帅了!我用炫酷大屏展示爬虫数据

2022-08-03

作者:ssw

来源:Python 技术

大屏有时纯粹是为了好看,领导的说法是“花花绿绿的效果不错”。尤其放到展厅里,整面墙壁都是大屏那种,色彩十分艳丽。

我尝试了一下。不是专业的前端,所以用vue模板修改,前后端分离。

后端使用fastapi,爬取的数据存入数据库。效果图如下,点击看全屏效果

下面这张是网上下载的vue大屏,我根据它来修改的

修改内容包括:

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

数据来源

说明

  1. 这里只介绍右边的“降水量预报”。值越大,气球越大
  1. 采用scrapy爬取数据
  2. 数据爬自weather.cma.cn
  3. 定义要爬的url,降水量相加得到某地未来一天的降雨量


运行过程

爬虫脚本

参考 ssw的小型文档网站

后端接口

数据库的爬虫数据

fastapi

  • 接口url:
    • http://localhost:5000/rain/
  • 脚本:
from fastapi import FastAPIfrom fastapi.responses import JSONResponseimport pymysqlapp = FastAPI()def conn_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() except Exception as e:        print('入库失败', e)        conn.rollback() finally:        cursor.close()        conn.close() return resdef get_rains_from_db():    sql = 'SELECT city,rain from rains' res = conn_mysql(sql) return res@app.get('/rain')def rain(): res = get_rains_from_db() for i in res:        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 return JSONResponse({'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

编写路由

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

main.js

  1. 导入router/index.js中的路由
  2. 导入components/index.js中定义的组件,方便其它文件引用。如 在alerts.vue中写上即可引用
import Vue from 'vue'import router from './router'import Vcomp from './components/index' //Vue.use(Vcomp)

components/index.js

组件在这个文件进行汇总

import rain from './companySummary/rain' //区域雨量const components = {    rain, //指components/companySummary/rain.vue}const Vcomp = {  ...components,  install};export default Vcomp

components/companySummary/rain.vue

import {mapOptions} from '@/api/options.js'export default {  name: 'rain',}

views/alerts.vue

这里引用rain.vue组件

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

api/index.js

  • 向fastapi接口发送请求
export const rainInfo = (params) => { return axios.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) { var xxx = [                {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])},        ];    }})export function mapOptions(mapType) { var geoCoordMap = { //坐标数据        '娄底市':[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更简洁、代码少、修改快。

完 谢谢观看

展开阅读全文
分享
收藏

OK