Начало 2020 года действительно плохое.Новая коронная пневмония опустошает землю Китая.Влияние этой внезапной катастрофы действительно слишком велико.В то время как люди всей страны работают вместе, чтобы преодолеть трудности, они всегда смотрят вперед к окончанию эпидемии. Конечно, пока мы работаем в изоляции, мы также каждый день уделяем внимание развитию эпидемии, с нетерпением ожидая скорого наступления «переломного момента», ведь все с нетерпением ждут свежего воздуха на улице!
Здесь я сделал страницу, показывающую эпидемию, и я также способствовал этой эпидемии.
Сбор данных
Данные, которые я использую здесь, — это бесплатный интерфейс, предоставляемый Tianxing Data, и интерфейс данных в реальном времени NetEase.
Два интерфейса данных Tianxing
https://www.tianapi.com/gethttp/169
и
https://www.tianapi.com/gethttp/170
Интерфейс данных в реальном времени, предоставляемый NetEase
https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list
Чтобы не обращаться к сетевому интерфейсу несколько раз, после того, как я получаю данные с этих трех интерфейсов, я сохраняю их в локальный редис, так что мне нужно только время от времени обращаться к трем вышеуказанным интерфейсам, а запросы на остальные веб-страницы обе получены от Redis.
Возьмем в качестве примера интерфейс NetEase.
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 js в файлах HTML.
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./echarts.min.js"></script>
</head>
Затем мы определяем метку холста DIV, содержащую диаграмму Echarts.
<div class="">bar test</div>
<div class="main" id="bar" style="height: 400px; width: 600px"></div>
Далее вы можете написать специальный JS-код echarts
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);
Итак, мы получаем простую гистограмму на веб-странице.
создание страницы
Конечно, чтобы объединить в полноценную страницу с большим экраном, требуется больше знаний о фронтенде, а это также занимает больше всего времени. К счастью, в Интернете есть много больших коров, которые завершили разработку многих шаблонов, нам просто нужно их использовать. Я загрузил полную интерфейсную страницу здесь, и следующая задача — организовать внутренние данные для внешнего отображения.
Прежде всего, мне нужен веб-сервер. Я решил использовать Flask для его создания. Давайте сначала посмотрим на структуру каталогов проекта.
Файл Run.py является основным запущенным файлом колбы. Поскольку проект небольшой, весь логический код написан в этом файле.
Файл 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)
Затем мы модифицируем файл js.js в статике и используем Ajax для вызова интерфейса
$.ajax({
url: '/get_chart_data',
type: 'get',
dataType: 'json',
success: function (res) {
echarts_1(res['chart1']);
}
});
Таким образом, мы завершили весь процесс от получения данных до внешнего отображения.
Конечно, если нам нужно сделать эту страницу видимой для других друзей, нам нужно развернуть службу на облачном сервере. Я успешно развернул ее. Вы можете посетить следующий адрес, чтобы просмотреть ее, потому что она отображается на большом экране ., поэтому доступ к нему с мобильного телефона может быть не очень удобным.
Исходный код можно найти здесь