Os resultados retornados pelas páginas vistas navegador:
1. obter os dados :
Aqui eu usei fontes de dados são: Tencent monitoramento da epidemia em tempo real
(reproduzida aqui para fonte de dados json: https://blog.csdn.net/xufive/article/details/104093197 )
- Análise em profundidade, temos o endereço de URL para métodos de pedido de informação, parâmetros, formato de resposta. Parâmetros da consulta, retorno de chamada é um nome de função de chamada de retorno, podemos tentar em branco, _ deve ser baseado no timestamp atual em milissegundos. Com esta informação, você pode pegar cada minuto dos dados.
código:
import time, json, requests
url = 'https://view.inews.qq.com/g2/getOnsInfo?name=wuwei_ww_area_counts&callback=&_=%d'%int(time.time()*1000)
data = json.loads(requests.get(url=url).json()['data'])
print(data)
data显示的结果为[{'country': '中国', 'area': '湖北', 'city': '武汉', 'confirm': 2261, 'suspect': 0, 'dead': 129, 'heal': 51}...}]
2. O armazenamento de dados:
Os dados armazenados para o MySQL, a necessidade de criar bases de dados, tabelas, campos.
Sobreviver resultados:
Código:
import time, json, requests
import pymysql
#获取数据源
url = 'https://view.inews.qq.com/g2/getOnsInfo?name=wuwei_ww_area_counts&callback=&_=%d'%int(time.time()*1000)
data = json.loads(requests.get(url=url).json()['data'])
for i in data: #遍历data数据 并且分配字段
country = i['country']
area = i['area']
city = i['city']
confirm = i['confirm']
suspect = i['suspect']
dead = i['dead']
heal = i['heal']
conn = pymysql.connect(host="localhost", user="root", password="123456", database="zufang", charset="utf8") #连接数据库
cursor = conn.cursor()
film_dict = {}
film = []
film_dict['country'] = country
film_dict['area'] = area
film_dict['city'] = city
film_dict['confirm']=(int)(confirm)
film_dict['suspect']=(int)(suspect)
film_dict['dead']=(int)(dead)
film_dict['heal']=(int)(heal)
film.append(film_dict)
#此处value前三个{}{}{}需要加上单引号(国家、地区、城市)，因为数据源本身自带了‘’
sql = "insert into china(country,area,city,confirm,suspect,dead,heal) value('{}','{}','{}',{},{},{},{})".format(film_dict['country'],film_dict['area'],film_dict['city'],film_dict['confirm'],film_dict['suspect'],film_dict['dead'],film_dict['heal'])
cursor.execute(sql)
conn.commit()
print(sql) #打印出执行sql的结果
cursor.close()
conn.close()
3. Data Visualization
Aqui eu usei um frasco python vem estrutura para visualização (eu acredito que você vai sempre ponto veio no frasco eu não escrevo um quadro)
balão controlador (controlador) de código de back-end é como se segue:
from blog2 import app
from flask import render_template
from blog2.model.car import China
from sqlalchemy import func
import json
@app.route('/china',methods=['GET'])
def index():
#使用sqlalchemy语句来把同个地区进行分组,用sum来讲confirm也就是这个地区的确诊病例进行整合并用label重命名字段为'China_confirm_sum'
#说明一下,这里重命名,后面写前端中国地图和饼图用得到
china=China.query.with_entities(China.area,func.sum(China.confirm).label('China_confirm_sum')).group_by(China.area).all()
#创建两个列表
#说明一下,这里是柱形图跟折线图用到
a = []
b = []
for i in china:
a.append(i[0])
b.append(i[1])
#传递到前端 这里a的数据是文字,需要转成编码格式, 所以需要 a=json.dumps(a) 进行转换
return render_template('index.html',china=china,a=json.dumps(a),b=b)
código de front-end:
Aqui bagunça que eu código front-end, é recomendável criar um arquivo js para escrever o código para cada exibição em cada js referências novamente
Explique: script type distal = "text / javascript" usado em sua definição do código ck , em seguida, os dados de referência propagação necessário para visualizar dados
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="static/china.js"></script>
<style>
*{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
/*默认长宽比0.75*/
</style>
</head>
<body>
<div id="main" style="width: 930px;height: 470px;float:left;border: 1px solid #ddd"></div>
<div id="main1" style="width: 930px;height: 470px;float:left;border: 1px solid #ddd"></div>
<div id="main2" style="width: 930px;height: 470px;float:left;border: 1px solid #ddd"></div>
<div id="main3" style="width: 930px;height: 470px;float:left;border: 1px solid #ddd"></div>
<script type="text/javascript">
var ck=[{% for i in china %}
{name:'{{i.area | safe}}',value:{{i.China_confirm_sum}}},
{% endfor %}
]
//循环后端传过来的china函数
//var ck=[{% for i in china %}
//name:{{传递地区的数据area | 将数据进行过滤 渲染时不转义},value:{{这里要传的数据就是我刚才要你重命名字段的数据}}}
//{name:'{{i.area | safe}}',value:{{i.China_confirm_sum}}},
//{% endfor %}]
//具体说明：
//i.area 是传递地区数据作为name
//safe 是将数据进行过滤 渲染时不转义
//i.China_confirm_sum 是传递确诊病例的数据作为value
//中国地图！！！
var myChart = echarts.init(document.getElementById('main'));
option = {
title:{
text:'新型冠状病毒肺炎全国分布图',
subtext:'2020/1/30',
left:'center'
},
tooltip: {
formatter:function(params,ticket, callback){
return params.seriesName+'<br />'+params.name+'：'+params.value
}//数据格式化
},
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['高','低'],//取值范围的文字
inRange: {
color: ['#e0ffff', 'red']//取值范围的颜色
},
show:true//图注
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '确诊病例',
type: 'map',
geoIndex: 0,
data:ck //上面定义好的ck的数据现在要在这里用到
}
]
};
myChart.setOption(option);
//饼图！！！
var myChart = echarts.init(document.getElementById('main1'))
option = {
title:{
text:'新型冠状病毒肺炎饼图',
subtext:'2020/1/30',
left:'center'
},
tooltip:{
trigger:'item',
formatter:'{a}<br/>{b}:{c}({d}%)'
},
legend:{
orient:'vertical',
left:'left'
},
series:[{
center: ['50%', '60%'],
name:'确诊病例',
type:'pie',
data:ck //上面定义好的ck的数据现在要在这里用到
}]
}
myChart.setOption(option)
//柱形图！！！
var myChart = echarts.init(document.getElementById('main2'))
option = {
color: ['#3398DB'], //设置图形颜色
title: {
text: '新型冠状病毒肺炎柱形图',
subtext: '2020/1/30',
left: 'center' //标题 副标题居中对齐
},
tooltip: { //设置提示工具
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: [
{
axisLabel:{
interval:0, //字体间距
rotate:45 //字体倾斜
},
type: 'category',
data: {{a | safe}}, //jinja2格式传递数据
axisTick: {
alignWithLabel: true //底线对齐柱形
}
}
],
yAxis: [
{
type: 'value'
}
],
legend:{ //设置提示说明
data:['确诊病例'],
left:'left'
},
series: [
{
name: '确诊病例',
type: 'bar',
barWidth: '80%', //柱形间距大小设置
data: {{b}} //jinja2格式传递数据
}
]
};
myChart.setOption(option)
//折线图！！！
var myChart = echarts.init(document.getElementById('main3'))
option = {
color: ['#3398DB'],
title: {
text: '新型冠状病毒肺炎折线图',
subtext: '2020/1/30',
left: 'center' //标题 副标题居中对齐
},
xAxis: {
axisLabel:{
interval:0, //字体间距
rotate:45 //字体倾斜
},
data: {{a | safe}} //jinja2格式传递数据
},
yAxis: {
type: 'value'
},
tooltip: { //设置提示工具
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend:{ //设置提示说明
data:['确诊病例'],
left:'left'
},
series: [{
name:'确诊病例',
data: {{b}}, //jinja2格式传递数据
type: 'line'
}]
};
myChart.setOption(option)
</script>
</body>
</html>
4. Os resultados de visualização visualizar
