文章目录
可视化练习题 ---- 2018年12月份1号-10号全国大部分城市的站点PM2.5检测
近些年空气污染在我国很多地区非常严重，其中PM2.5作为衡量空气质量的一个重要指标，当前数据为2018年12月份1号-10号全国大部分城市的站点检测数据。接下来我们将这些数据进行可视化来看下PM2.5的分布情况。
- 数据连接：https://pan.baidu.com/s/1ox8Y77OPVFK20LAGX3CesA
- 提取码：cvx1
一、柱状图输出合肥、黄山、芜湖的PM2.5指数
数据预处理
import pandas as pd
import numpy as np
from flask import Flask,render_template
# 利用柱状图输出合肥、黄山、芜湖的PM2.5指数，Y轴表示PM2.5的平均数，X轴表示城市名称
# 1.读取数据
data = pd.read_csv(r"G:\Projects\pycharmeProject-C\Flask\dataset\airpm25.txt",sep=",",names=['日期','pm','城市','地区'])
print(data.dtypes)
print(data.isnull().sum()) # 检查空值
# 2.提取有效信息
def city_info(city):
data_city = data.loc[data['城市']==city,:]
result = data_city['pm'].mean() # 获取pm均值
return result
hefei = city_info("合肥") # 提取合肥信息
huangshan = city_info("黄山") # 提取黄山信息
wuhu = city_info("芜湖") # 提取芜湖信息
list = [hefei, huangshan, wuhu] # 合并信息
names = ["合肥","黄山","芜湖"]
可视化Flask框架
app = Flask(__name__) # 实例化
@app.route("/") # 构建视图
def index():
return render_template("airpm2501_柱状图.html",sheet = list,name_list = names)
if __name__ == '__main__':
app.run(debug=True) # 运行
HTML前端渲染
<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height:100%">
<div style="height:100%" id="container"></div>
<script type="text/javascript" src="../static/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var names = [{
% for item in name_list %}'{
{ item }}',{
% endfor %}];
var values = [{
% for item in sheet %}{
{
item }},{
% endfor %}];
var option = null;
option = {
tooltip:{
trigger:'axis',
axisPointer:{
type:'shadow'
}
},
grid:{
top:'5%',
bottom:'3%',
right:'4%',
left:'4%',
containLabel:true
},
legend:{
show:true
},
xAxis:{
type:'category',
data:names
},
yAxis:{
type:'value',
},
series:[
{
name:'PM平均值',
type:'bar',
data:values,
itemStyle:{
# 柱状图item触发背景效果
shadowBlur:10,
shadowColor:'rgba(0,0,0,0.5)',
shadowOffSetX:10
}
}
]
};
if (option && typeof option == "object"){
myChart.setOption(option);
}
</script>
</body>
</html>
二、折线图绘制合肥、黄山、芜湖的PM2.5平均值的变化
数据预处理
import numpy as np
import pandas as pd
from flask import Flask,render_template
# 用折线图，画出合肥、黄山、芜湖各城市随时间的pm2.5平均值的变化要求将输出的折线图保存成图像文件，Y轴表示pm2.5的平均值，X轴表示日期
# 1.读取数据
data = pd.read_csv(r"G:\Projects\pycharmeProject-C\Flask\dataset\airpm25.txt",sep=",",names=['日期','pm','城市','地区'])
# 2.转换日期格式
data['日期'] = [item[0:4]+"-"+item[4:6]+"-"+item[6:8] for item in data["日期"].astype("str")] # 首先转化日期数据格式
data['day'] = [item.split("-")[2] for item in data["日期"]]
# 提取日期信息 --- 几号
days = data['day'].drop_duplicates().values.tolist()
citys = ["合肥","黄山","芜湖"]
# 定义方法获取每周的信息
def catch():
city_data = []
for city in citys: # 遍历城市
day_data = []
for day in days: # 遍历日期
data_info = data.loc[data['day']== day,:] # 提取对应天数信息
data_info = data_info.loc[data['城市'] == city,:] # 提取对应城市信息
pm_mean = data_info['pm'].mean() # 求取对应城市某一月的pm均值
day_data.append([day,city,pm_mean])
city_data.append(day_data)
return city_data
city_data = catch()
可视化Flask框架
app = Flask(__name__)
@app.route("/")
def index():
return render_template("airpm2502_折线图.html",sheet = city_data)
if __name__ == '__main__':
app.run(debug=True)
HTML渲染
<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height:100%">
<div style="height:100%" id="container"></div>
<script type="text/javascript" src="../static/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myCharts = echarts.init(dom);
var xlabel = [{
% for item in sheet.0 %}'{
{ item.0 }}',{
% endfor %}];
var data1 = [{
% for item in sheet.0 %}{
{
item.2 }},{
% endfor %}];
var data2 = [{
% for item in sheet.1 %}{
{
item.2 }},{
% endfor %}];
var data3 = [{
% for item in sheet.2 %}{
{
item.2 }},{
% endfor %}];
var option = null;
option = {
title:[
{
text:"合肥、黄山、芜湖各城市随时间的PM均值变化折线图",
right:'35%'
},{
subtext:"2018年12月份",
bottom:'0%',
left:'50%'
},{
subtext:"PM平均值",
textVerticalAlign:'auto',
top:'50%',
left:'0%'
}
],
tooltip:{
trigger:'axis',
axisPointer:{
type:'cross'
}
},
grid:{
top:'8%',
bottom:'3%',
right:'4%',
left:'4%',
containLabel:true
},
legend:{
show:true,
top:'4%',
right:'4%'
},
xAxis:{
type:'category',
data:xlabel,
boundaryGap:true,
axisTick:{
show:true,
alignWithLabel:true
},
axisLine:{
show:true
},
axisLabel:{
rotate:0,
interval:0
}
},
yAxis:{
type:'value'
},
series:[
{
name:'合肥月度PM均值',
type:'line',
data:data1,
},{
name:'黄山月度PM均值',
type:'line',
data:data2,
},{
name:'芜湖月度PM均值',
type:'line',
data:data3,
}
]
};
if (option && typeof option == "object"){
myCharts.setOption(option);
}
</script>
</body>
</html>
三、柱线混合图形画出合肥市的高新区和庐阳区的pm2.5的值。
数据预处理
import numpy as np
import pandas as pd
from flask import Flask,render_template
# 用柱线混合图形画出合肥市的高新区和庐阳区的pm2.5的值。要求将输出的折线图保存成图像文件，X轴表示时间，柱状表示高新区 的pm2.5的值，线形表示庐阳区的pm2.5的值。
# 1.读取数据
data = pd.read_csv(r"G:\Projects\pycharmeProject-C\Flask\dataset\airpm25.txt",sep=",",names=['日期','pm','城市','地区'])
# 2.转换日期格式
data['日期'] = [item[0:4]+"-"+item[4:6]+"-"+item[6:8] for item in data["日期"].astype("str")] # 首先转化日期数据格式
data['day'] = [item.split("-")[2] for item in data["日期"]]
# 提取日期信息 --- 几号
days = data['day'].drop_duplicates().values.tolist()
areas = ["高新区","庐阳区"]
# 定义方法获取区域信息
def catch():
area_data = []
for area in areas:
for day in days:
dataa = data.loc[data['地区'] == area, :] # 获取对应地区信息
datab = dataa.loc[data['城市'] == "合肥", :] # 获取对应城市信息
datac = datab.iloc[:, 1:].values.tolist() # 转变数据形式 --- 利于传输
area_data.append(datac)
return area_data
area_data = catch()
可视化Flask框架
# 可视化
app = Flask(__name__)
@app.route("/")
def index():
return render_template("airpm2503_折柱混合图.html", sheet=area_data)
if __name__ == '__main__':
app.run(debug=True)
HTML渲染
<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height:100%">
<div id="container" style="height:100%"></div>
<script type="text/javascript" src="../static/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myCharts = echarts.init(dom);
var x_label = [{
% for item in sheet.0 %}'{
{ item.3 }}',{
% endfor %}];
var data1 = [{
% for item in sheet.0 %}{
{
item.0 }},{
% endfor %}];
var data2 = [{
% for item in sheet.1 %}{
{
item.0 }},{
% endfor %}];
var option = null;
option = {
title:{
text:"合肥市高新区、庐阳区PM值变化统计图",
right:'35%'
},
tooltip:{
trigger:'axis',
axisPointer:{
type:'cross'
}
},
grid:{
top:'8%',
bottom:'3%',
right:'4%',
left:'4%',
containLabel:true
},
legend:{
show:true,
top:'4%',
right:'4%'
},
xAxis:{
type:'category',
data:x_label
},
yAxis:{
type:'value'
},
series:[
{
name:'高新区PM值',
type:'bar',
data:data1,
axisPointer:{
type:'shadow'
}
},{
name:'庐阳区PM值',
type:'line',
data:data2,
axisPointer:{
type:'cross'
}
}
]
};
if (option && typeof option == "object"){
myCharts.setOption(option);
}
</script>
</body>
</html>
