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
www.tianapi.com/gethttp/169
and
www.tianapi.com/gethttp/170
The Real-Time data interface has been provided by netease
C.m.163.com/ug/api/wuha…
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 codeECharts 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 codeWe 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 codeNow 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 codeThis 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():
return render_template('bigdata.html')
Copy the codeNext we write a function that returns the data required by 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
Copy the codeAs 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():
chart_info = {}
chart1_data = get_chart1_data()
chart_info['chart1'] = chart1_data
return jsonify(chart_info)
Copy the codeThen we modify the js.js file in static to use Ajax to call the interface
$.ajax({
url: '/get_chart_data'.type: 'get',
dataType: 'json',
success: function (res) {
echarts_1(res['chart1']); }});Copy the codeIn 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/
