专栏首页凹凸玩数据​用python进行超全的疫情大屏展示

​用python进行超全的疫情大屏展示

以下文章来源于萝卜大杂烩 ,作者周萝卜

大家好,我是朱小五

最近朋友萝卜用python做个了数据大屏,非常有趣,把这篇文章分享给大家哈。

数据获取

我这里使用的数据是天行数据提供的免费接口以及网易的实时数据接口

天行数据的两个接口

https://www.tianapi.com/gethttp/169

https://www.tianapi.com/gethttp/170

已经网易提供的实时数据接口

https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list

为了不多次的访问网络接口,我从这三个接口中获取到数据后,都保存到了本地的 redis 中,这样只需要每隔一段时间访问上面的三个接口即可,其余 web 页面的请求都从 redis 中获取。

以网易接口为例

def get_trend_data():
    headers = {
        'user-agent': '',
        'accept': ''
    }
    url = 'https://c.m.163.com/ug/api/wuhan/app/data/list-total'
    res = requests.get(url, headers=headers).json()
    rd.set('trend', json.dumps(res))
    return res

ECharts 画图

对于页面展示部分,主体还是采用 echarts 来展示图表。这里我们简单来看下如何在 web 页面中使用 echarts

比如我们画一个简单的柱状图

首先在 HTML 文件中引入 echarts 的 js 文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./echarts.min.js"></script>
</head>

然后我们定义承载 echarts 图表的画布 div 标签

<div class="">bar test</div>
<div class="main" id="bar" style="height: 400px; width: 600px"></div>

接下来就可以编写具体的 echarts JS 代码了

var barchart = echarts.init(document.getElementById("bar"));  // 初始化 echarts 并定位到画布
        option = {
  //  backgroundColor: '#00265f',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '0%',
        top:'10px',
        right: '0%',
        bottom: '4%',
       containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['湖北', '广东', '浙江', '河南', '湖南'],
        axisLine: {
            show: true,
         lineStyle: {
                color: "#d5110d",
                width: 1,
                type: "solid"
            },
        },

        axisTick: {
            show: false
        },
        axisLabel:  {
                interval: 0,
               // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
                     color: "#d5110d",
                    fontSize: '12',
                },
            },
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
           //formatter: '{value} %'
            show:true,
             textStyle: {
                     color: "#d5110d",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#d5110d",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [
        {
        type: 'bar',
        data: [
            ('湖北', 300),
            ('广东', 250),
            ('浙江', 200),
            ('河南', 150),
            ('湖南', 100)
        ],
        barWidth:'35%', //柱子宽度
       // barGap: 1, //柱子之间间距
        itemStyle: {
            normal: {
                color:'#d5110d',
                opacity: 1,
                barBorderRadius: 5,
            }
        }
    }

    ]
};
        barchart.setOption(option);

这样我们就在 web 页面上得到了一个简单的柱状图

页面构建

当然要想组合成一个完整的大屏页面,还需要更多的前端知识,而这也是最为耗费时间的。幸好网络上有很多大牛已经完成了众多模板的开发,我们只需要拿来使用即可。我这里已经下载好了完整的前端页面,下面的工作就是整理后端数据,供前端展示即可。

首先需要一个 web 服务器,我选择用 Flask 来搭建,先来看下项目的目录结构

run.py 文件就是 Flask 的主运行文件,由于项目较小,所以所有的逻辑代码都写在了这一个文件当中。 redis_conn.py 文件是 redis 连接池代码 GetData.py 是用于定时获取数据并保存至 redis 的代码

我们主要来看 run.py 中的代码

首先初始化 Flask 并设置根路由

from flask import Flask, render_template, jsonify
from redis_conn import redis_conn_pool
import json


app = Flask(__name__)
rd = redis_conn_pool()


@app.route('/')
def index():
    return render_template('bigdata.html')

接下来我们编写一个函数,用于返回 echart1 需要的数据

def get_chart1_data():
    chart1_data_list = []
    chart1_city_list = []
    chart1_info = {}
    city_data = json.loads(rd.get('ncovcity_data'))
    for city in city_data['newslist'][:5]:
        chart1_dict = {}
        chart1_dict['name'] = city['provinceShortName']
        chart1_dict['value'] = city['confirmedCount']
        chart1_data_list.append(chart1_dict)
        chart1_city_list.append(city['provinceShortName'])
    chart1_info['x_name'] = chart1_city_list
    chart1_info['data'] = chart1_data_list
    return chart1_info

可以看出,该函数返回一个字典,字典中的值都是一个列表

接下来编写一个供 echarts 调用的函数

@app.route('/get_chart_data')
def get_chart_data():
    chart_info = {}
    chart1_data = get_chart1_data()
    chart_info['chart1'] = chart1_data
    return jsonify(chart_info)

然后我们修改 static 中的 js.js 文件,使用 Ajax 来调用接口

$.ajax({
        url: '/get_chart_data',
        type: 'get',
        dataType: 'json',
        success: function (res) {
            echarts_1(res['chart1']);
        }
    });

这样,我们就完成了从获取数据,到前端展示的全过程。

当然,如果还需要让其他的小伙伴儿们都能看的这个页面,我们就需要把服务部署到云服务器上,我已经部署成功,大家可以访问如下地址来查看,由于是一个大屏展示的项目,所以在手机上访问可能体验不是很好。

https://ncov.luobodazahui.top/

如果想获取源码和示例网站,请后台回复“0214”!

本文分享自微信公众号 - 凹凸数据(alltodata)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用python对2019年二手房价格进行数据分析

    最近和朋友聊到买房问题,所以对某二手房价格信息进行了爬取,爬虫见本公众号另一篇文章。

    朱小五
  • 通过空气质量指数AQI学习统计分析并进行预测(上)

    AQI(空气质量指数),用来衡量空气清洁或者污染的程度。值越小,表示空气质量越好。近年来,因为环境问题,空气质量也越来越受到人们的重视。

    朱小五
  • 别再问我 Python 怎么识别数字验证码了!

    识别验证码,需要先对图像进行预处理,去除会影响识别准确度的线条或噪点,提高识别准确度。

    朱小五
  • 在ROBOTS文本设置SITEMAP路径并提交到搜索引擎

    在ROBOTS TXT文本设置XML网站地图路径很重要,这将有利于谷歌轻松地找到你的网站地图,并加快搜索引擎编制索引网站的速度。这讲将介绍如何把sitemap....

    林雍岷
  • Java 循环队列原理与用法详解

    (1)设一个容量为capacity=8,size=5(a,b,c,d,e)的数组,左侧为队首、右侧为队尾。

    好好学java
  • ECCV 2020 Spotlight 谷歌论文大盘点

    本文继续盘点谷歌 Spotlight 中论文,看看工业界巨头都在关注什么方向,取得了哪些突破。该部分论文总计 12 篇,

    CV君
  • python合并两列

    用户1359560
  • 互联网人叹气图鉴:到底发生了什么?

    老九君
  • PostgreSQL的insert解析

    1、首先需要从slot中取出tuple值,HeapTupleTableSlot.tuple

    yzsDBA
  • jenkins实战系列

    本文主要介绍了在linux 下如何部署jenkins.以及通过jenkins 如何发布php.以及java 程序,利用jenkins 来实现邮件告...

    互联网老辛

扫码关注云+社区

领取腾讯云代金券