The start of 2020 could not have been worse. COVID-19 has wreaked havoc across China. The impact of this sudden disaster is too great. Of course, while working in isolation, we are also paying attention to the development of the epidemic every day, looking forward to the “inflection point” coming soon, after all, we are looking forward to fresh air outside!

Here I made a page showing the epidemic situation, and also contributed to the epidemic.

Data acquisition

The data I use here are the free interface provided by Tianhang Data and the real-time data interface of netease

Two interfaces for day row data

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

and

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

The Real-Time data interface has been provided by netease

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

In order not to visit the network interface many times, I get data from these three interfaces and save it in the local Redis. In this way, I only need to visit the above three interfaces at intervals, and other web page requests are obtained from Redis.

The following uses the netease interface as an example

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

Copy the code

ECharts drawing

For the page presentation part, the body still uses Echarts to display the chart. Let’s take a quick look at how to use Echarts in web pages

Let’s say we draw a simple bar chart

Start by introducing echarts JS files into HTML files

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="./echarts.min.js"></script>

</head>

Copy the code

We then define the canvas DIV tag that holds the Echarts diagram

<div class="">bar test</div>

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

Copy the code

Now you can write the echarts JS code in detail

var barchart = echarts.init(document.getElementById("bar"));  // Initialize echarts and locate the canvas

        option = {

  // backgroundColor: '#00265f',

    tooltip: {

        trigger: 'axis'.

        axisPointer: {

            type'shadow'

        }

    },

    grid: {

        left: '0%'.

        top:'10px'.

        right: '0%'.

        bottom: '4%'.

       containLabel: true

    },

    xAxis: [{

        type'category'.

        data: ['hubei'.'in guangdong'.'zhejiang'.'henan'.'in hunan province'].

        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 (255255255, 1)".

            }

        }

}].

    series: [

        {

        type'bar'.

        data: [

            ('hubei'.300),

            ('in guangdong'.250),

            ('zhejiang'.200),

            ('henan'.150),

            ('in hunan province'.100)

].

        barWidth:'35%'.// Column width

       // barGap: 1, // Space between columns

        itemStyle: {

            normal: {

                color:'#d5110d'.

                opacity: 1.

                barBorderRadius: 5.

            }

        }

    }



    ]

};

        barchart.setOption(option);

Copy the code

This gives us a simple bar chart on the Web page

Build the page

Of course, it takes more front-end knowledge to assemble a full, large page, which is the most time consuming. Fortunately, there are many great people on the web who have already developed many templates, and we just need to use them. I have downloaded the complete front end page here, the following work is to sort out the back-end data for the front end display.

First, I need a Web server. I choose Flask to build it. First, I will look at the directory structure of the project

The run.py file is the main run file for the Flask, and because the project is small, all the logic code is written in this file. The redis_conn.py file is the redis connection pool code. Getdata. py is the code used to periodically retrieve data and save it to Redis

Let’s focus on the code in run.py

The Flask is initialized first and the root route is set up

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(a):

    return render_template('bigdata.html')

Copy the code

Next we write a function that returns the data required by Echart1

def get_chart1_data(a):

    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

Copy the code

As you can see, this function returns a dictionary with a list of values

Next, write a function to be called by echarts

@app.route('/get_chart_data')

def get_chart_data(a):

    chart_info = {}

    chart1_data = get_chart1_data()

    chart_info['chart1'] = chart1_data

    return jsonify(chart_info)

Copy the code

Then we modify the js.js file in static to use Ajax to call the interface

$.ajax({

        url'/get_chart_data'.

        type'get'.

        dataType'json'.

        successfunction (res{

            echarts_1(res['chart1']);

        }

    });

Copy the code

In this way, we have completed the whole process from data acquisition to front-end display.

Of course, if we still need to make this page accessible to other small partners, we need to deploy the service to the cloud server. I have successfully deployed the service, and you can visit the following address to view it. Since it is a project displayed on a large screen, it may not be a good experience to access it on mobile phones.

ncov.luobodazahui.top/

The source code can be found here

Github.com/zhouwei713/…