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

作者 | 派森酱

来源 | 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 FastAPI
from fastapi.responses import JSONResponse
import pymysql
app = 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 res

def 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中写上<rain />即可引用

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

...省略
    <div 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更简洁、代码少、修改快。

往期回顾

“如今，99%以上的代码都是垃圾！”

Deepfake 技术换脸真假难辨！

当你不再是程序员，很多事会脱离掌控

7岁男童因下棋太快，被机器人夹断手指？

分享
点收藏
点点赞
点在看