超全的疫情大屏展現

時間 2020-02-14

標籤疫情展現简体版

原文原文鏈接

2020 的開頭實在是太爛了，新冠肺炎肆虐神州大地，這場突如其來的災難影響實在是太大了，全國人民在齊心合力共度難關的同時，也無時無刻不在期盼疫情快點過去。固然咱們在隔離辦公的同時，天天也都關注着疫情的發展，盼望着「拐點」快點來臨，畢竟你們都盼望着外面的新鮮空氣呢！javascript

這裏我製做了一個疫情展現的頁面，也爲此次疫情貢獻一份力量。html

數據獲取

我這裏使用的數據是天行數據提供的免費接口以及網易的實時數據接口前端

天行數據的兩個接口java

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

和git

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

已經網易提供的實時數據接口web

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

爲了避免屢次的訪問網絡接口，我從這三個接口中獲取到數據後，都保存到了本地的 redis 中，這樣只須要每隔一段時間訪問上面的三個接口便可，其他 web 頁面的請求都從 redis 中獲取。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']);
        }
    });
複製代碼

這樣，咱們就完成了從獲取數據，到前端展現的全過程。

固然，若是還須要讓其餘的小夥伴兒們都能看的這個頁面，咱們就須要把服務部署到雲服務器上，我已經部署成功，你們能夠訪問以下地址來查看，因爲是一個大屏展現的項目，因此在手機上訪問可能體驗不是很好。

ncov.luobodazahui.top/

源碼能夠在這裏找到哦

github.com/zhouwei713/…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。