基于Spark的空气质量数据分析可视化系统
·
本教程使用所有软件版本：ubuntu20.04，pycharm 25.2 ，spark 3.4.2 ，hadoop 3.4.1， MySQL8.0，datagrip2025
1 创建项目
项目采用Django架构
创建完毕后，如果出现了下图虚拟环境，则创建成功，如果失败，则需要激活虚拟环境：
python -m venv venv
venv\Scripts\activate
接下来在终端创建Django以及文件夹
cd "C:\PyCharmProjects\djangoProject\基于spark的空气质量数据分析可视化系统"
mkdir templates在当前文件夹下初始化Django
django-admin startproject "基于spark的空气质量数据分析可视化系统" .在终端输入以下命令来验证是否安装成功：
python manage.py runserver在浏览器输入http://127.0.0.1:8000/，如果出现下图则成功：
将文件夹的txt写入Django中
asgiref==3.5.2
async-generator==1.10
attrs==22.1.0
backports.zoneinfo==0.2.1
certifi==2022.6.15
cffi==1.15.1
cryptography==37.0.4
cycler==0.11.0
Django==3.1.14
fonttools==4.34.4
h11==0.13.0
idna==3.3
jieba==0.42.1
kiwisolver==1.4.4
matplotlib==3.5.2
mysqlclient==2.2.4
numpy==1.23.1
outcome==1.2.0
packaging==21.3
pandas==1.4.3
Pillow==9.2.0
pycparser==2.21
PyMySQL==1.0.2
pyOpenSSL==22.0.0
pyparsing==3.0.9
PySocks==1.7.1
python-dateutil==2.8.2
pytz==2022.1
six==1.16.0
sniffio==1.2.0
sortedcontainers==2.4.0
sqlparse==0.4.2
snownlp==0.12.3
tqdm==4.66.4
trio==0.21.0
trio-websocket==0.9.2
tzdata==2022.1
urllib3==1.26.11
wordcloud==1.8.2.2
wsproto==1.1.0
requests==2.31.0
lxml==4.9.3
再次进入终端执行以下命令，重启之后，Django初始化完成
activate.bat
pip install -r ../../requirementsDjango.txt2数据爬虫
2.1整体爬虫框架
在spiders包下创建项目spoderAQI
2.2编写爬虫代码
具体爬虫代码如下：
class AqiSpider:
def __init__(self,cityname,realname):
self.cityname = cityname
self.realname = realname
self.headers = {
"User-Agent":"Mozilla/5.0 (Windows NT 10.0; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/104.0.0.0 Safari/537.36)"
}
self.f = open(f'data.csv', 'a', encoding='utf-8-sig', newline='')
self.writer = csv.DictWriter(self.f, fieldnames=[
'city',
'date',
'AQI',
'airQuality',
'rank',
'PM2.5',
'PM10',
'SO2',
'NO2',
'CO',
'O3',
])
#self.writer.writeheader()
def send_request(self,year,month):
url = f"https://www.tianqihoubao.com/aqi/{self.cityname}-"+str(year)+str("%02d"%month)+".html"
response = requests.get(url,headers=self.headers,timeout=60)
time.sleep(2)
# print(response.text)
#响应码200为成功
print(f"响应状态码:{response.status_code}")
self.parse_response(response.text)
def parse_response(self,response):
soup = BeautifulSoup(response,"html.parser")
tr = soup.find_all("tr")
for j in tr[1:]:
td = j.find_all("td")
Date = td[0].get_text().strip()#日期
AQI = td[1].get_text().strip()
Quality_level = td[2].get_text().strip() # 空气质量等级
AQI_rank = td[3].get_text().strip()
PM25 = td[4].get_text().strip()
PM10 = td[5].get_text().strip()
SO2 = td[6].get_text().strip()
NO2 = td[7].get_text().strip()
CO = td[8].get_text().strip()
O3 = td[9].get_text().strip()
print(Date,Quality_level,AQI,AQI_rank,PM25,PM10,SO2,NO2,CO,O3)
data_dict = {
'city':self.realname,
'date':Date,
'AQI':AQI,
'airQuality': Quality_level,
'rank':AQI_rank,
'PM2.5':PM25,
'PM10':PM10,
'SO2':SO2,
'NO2':NO2,
'CO':CO,
'O3':O3,
}
print(data_dict)
self.save_data(data_dict)
#break
def save_data(self,data_dict):
print('存入')
self.writer.writerow(data_dict)
def run(self):
for month in range(1,13):
print(f"正在爬取{2023}年{month}月的数据")
self.send_request(2023,month)
#break
if __name__ == '__main__':
cityList= ['beijing','tianjin','shanghai','chongqing','guangzhou','shenzhen','hangzhou','shenyang','nanjing',
'changsha','nanchang']
nameList = ['北京','天津','上海','重庆','广州','深圳','杭州','沈阳','南京','长沙','南昌']
city_dict = dict(zip(cityList,nameList))
print(city_dict)
for k,v in city_dict.items():
AS = AqiSpider(k,v)
AS.run()
#break本文爬取的是2023年1月北京空气质量指数AQI_PM2.5历史数据
当运行爬虫代码之后，显示下图，则证明爬取成功：
3 application的创建
在终端输入：
python manage.py startapp myApp
然后会看到
紧接着回到settings将myapp加入配置
在终端执行以下代码创建文件
python manage.py makemigrations在执行以下代码，看是否能在数据库中建表
：python manage.py migrate回到数据库中，有了以下的表：
4数据存储
启动集群之前首先要进行虚拟机网络设置，这里设置的是vm8
将子网ip以及子网掩码改成如图下：
点击设置，在DHCP设置中，改成以下配置：
在本地system文件夹下找到host文件夹，里面三个节点ip地址设置如下：
启动hdfs集群和yarn集群，具体代码如下：
start-dfs.sh
start-yarn.sh输入jps，会出现以下代码：
接着回到pycharm里面，在sparks包下创建sparkFir文件以及sparkAna文件
下面是sparkFir完整代码：
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
if __name__ == '__main__':
spark = SparkSession.builder.appName("sparkSQL").master("local[*]"). \
config("spark.sql.shuffle.partitions", 2). \
config("spark.sql.warehouse.dir", "hdfs://192.168.254.129:8020/user/hive/warehouse"). \
config("hive.metastore.uris", "thrift://192.168.254.129:9083"). \
enableHiveSupport(). \
getOrCreate()
sc = spark.sparkContext
schema = StructType().add("city",StringType(),nullable=True).\
add("date",StringType(),nullable=True).\
add("AQI",IntegerType(),nullable=True). \
add("airQuality", StringType(), nullable=True). \
add("rank",StringType(),nullable=True).\
add("PM25",IntegerType(),nullable=True).\
add("PM10",IntegerType(),nullable=True).\
add("SO2",IntegerType(),nullable=True).\
add("NO2",IntegerType(),nullable=True).\
add("CO",FloatType(),nullable=True).\
add("O3",IntegerType(),nullable=True)
df = spark.read.format("csv").\
option("sep",",").\
option("header",True).\
option("encoding","utf-8").\
schema(schema=schema).\
load("./data.csv")
df = df.withColumn("id",monotonically_increasing_id())
df.drop_duplicates()
df.na.drop()
#df.show()
df.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "airdata"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
df.write.mode("overwrite").saveAsTable("airdata", "parquet")
spark.sql("select * from airdata").show()下面是sparkAna完整代码：
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
if __name__ == '__main__':
spark = SparkSession.builder.appName("sparkSQL").master("local[*]"). \
config("spark.sql.shuffle.partitions", 2). \
config("spark.sql.warehouse.dir", "hdfs://192.168.254.129:8020/user/hive/warehouse"). \
config("hive.metastore.uris", "thrift://192.168.254.129:9083"). \
enableHiveSupport(). \
getOrCreate()
sc = spark.sparkContext
schema = StructType().add("city",StringType(),nullable=True).\
add("date",StringType(),nullable=True).\
add("AQI",IntegerType(),nullable=True). \
add("airQuality", StringType(), nullable=True). \
add("rank",StringType(),nullable=True).\
add("PM25",IntegerType(),nullable=True).\
add("PM10",IntegerType(),nullable=True).\
add("SO2",IntegerType(),nullable=True).\
add("NO2",IntegerType(),nullable=True).\
add("CO",FloatType(),nullable=True).\
add("O3",IntegerType(),nullable=True)
df = spark.read.format("csv").\
option("sep",",").\
option("header",True).\
option("encoding","utf-8").\
schema(schema=schema).\
load("./data.csv")
df = df.withColumn("id",monotonically_increasing_id())
df.drop_duplicates()
df.na.drop()
#df.show()
df.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "airdata"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
df.write.mode("overwrite").saveAsTable("airdata", "parquet")
spark.sql("select * from airdata").show()
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.functions import count,mean,col,sum,when,year,month,max,min,avg
from pyspark.sql import functions as F
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
if __name__ == '__main__':
spark = SparkSession.builder.appName("sparkSQL").master("local[*]"). \
config("spark.sql.shuffle.partitions", 2). \
config("spark.sql.warehouse.dir", "hdfs://192.168.254.129:8020/user/hive/warehouse"). \
config("hive.metastore.uris", "thrift://192.168.254.129:9083"). \
enableHiveSupport(). \
getOrCreate()
sc = spark.sparkContext
airdata = spark.read.table("airdata")
result1 = airdata.groupby("city")\
.agg(mean("AQI").alias("avg_AQI"))\
.orderBy("avg_AQI",ascending=False)
df = result1.toPandas()
#print(df)
result1.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "avgCityAqi"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
result1.write.mode("overwrite").saveAsTable("avgCityAqi", "parquet")
spark.sql("select * from avgCityAqi").show()
result2 = airdata.groupby("city") \
.agg(mean("PM").alias("avg_PM"),
mean("PM10").alias("avg_PM10"),
mean("SO2").alias("avg_SO2"),
mean("NO2").alias("avg_NO2"),
mean("CO").alias("avg_CO"),
mean("O3").alias("avg_O3"),)
result2.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "avgCitySix"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
result2.write.mode("overwrite").saveAsTable("avgCitySix", "parquet")
spark.sql("select * from avgCitySix").show()
airdata = airdata.withColumn("date",airdata["date"].cast("date"))
result3 = airdata.groupby("city",year("date").alias("year"),month("date").alias("month"))\
.agg(
max("AQI").alias("max_AQI"),
min("AQI").alias("min_AQI"),
)
result3.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "maxCityAqi"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
result3.write.mode("overwrite").saveAsTable("maxCityAqi", "parquet")
spark.sql("select * from maxCityAqi").show()
result4 = airdata.groupby("city", year("date").alias("year"), month("date").alias("month")) \
.agg(
avg("PM").alias("max_PM"),
avg("PM10").alias("min_PM10"),
)
result4.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "avgCityPM"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
result4.write.mode("overwrite").saveAsTable("avgCityPM", "parquet")
spark.sql("select * from avgCityPM").show()
result5 = airdata.groupby("city", year("date").alias("year"),month("date").alias("month"))\
.agg(
count(when(airdata["AQI"] < 50, True)).alias("greatAirCount")
)
result5.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "greatAir"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
result5.write.mode("overwrite").saveAsTable("greatAir", "parquet")
spark.sql("select * from greatAir").show()
result6 = airdata.groupby("city")\
.agg(
max("SO2").alias("max_SO2"),
max("NO2").alias("max_NO2"),
)
result6.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "maxSN"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
result6.write.mode("overwrite").saveAsTable("maxSN", "parquet")
spark.sql("select * from maxSN").show()
airdata = airdata.withColumn(
"CO_category",
when((col("CO") >= 0) & (col("CO") < 0.25),'0-0.25')
.when((col("CO") >= 0.25) & (col("CO") < 0.5),'0.25-0.5')
.when((col("CO") >= 0.5) & (col("CO") < 0.75),'0.5-0.75')
.when((col("CO") >= 0.75) & (col("CO") < 1),'0.75-1')
.otherwise("1以上")
)
result7 = airdata.groupby("CO_category") .agg(count('*').alias('CO_count'))
result7.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "COCategory"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
result7.write.mode("overwrite").saveAsTable("COCategory", "parquet")
spark.sql("select * from COCategory").show()
airdata = airdata.withColumn(
"O3_category",
when((col("O3") >= 0) & (col("O3") < 25), '0-25')
.when((col("O3") >= 25) & (col("O3") < 50), '25-50')
.when((col("O3") >= 50) & (col("O3") < 75), '50-75')
.when((col("O3") >= 75) & (col("O3") < 100), '75-100')
.otherwise("100以上")
)
result8 = airdata.groupby("O3_category").agg(count('*').alias('O3_count'))
result8.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "O3Category"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
result8.write.mode("overwrite").saveAsTable("O3Category", "parquet")
spark.sql("select * from O3Category").show()
result9 = airdata.groupby("city", year("date").alias("year"), month("date").alias("month"))\
.agg(avg("AQI").alias("month_AQI"))
result9.write.mode("overwrite"). \
format("jdbc"). \
option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
option("dbtable", "monthAQI"). \
option("user", "root"). \
option("password", "123456"). \
option("driver", "com.mysql.cj.jdbc.Driver"). \
save()
result9.write.mode("overwrite").saveAsTable("monthAQI", "parquet")
spark.sql("select * from monthAQI").show()当运行之后会出现一个data.csv文件，则表明数据已经存入虚拟机中
5前端初始化
模板、网页模板、网站模板_站长素材
https://sc.chinaz.com/moban/index_2.html在这个网站上找到后台数据平台模板并下载
返回pycharm中创建static静态资源包
再将assets文件复制到该文件夹下
然后在myApp包下的templates下创建urls
from django.contrib import admin
from django.urls import path, include
from myApp import views
urlpatterns = [
path('index/', views.index, name='index'),
path('selfInfo/',views.selfInfo,name='selfInfo'),
path('table/',views.table,name='table'),
path('airYearChart/', views.airYearChart, name='airYearChart'),
path('airMonthChart/', views.airMonthChart, name='airMonthChart'),
path('airChart/', views.airChart, name='airChart'),
path('cityChart/', views.cityChart, name='cityChart'),
path('airCloud/', views.airCloud, name='airCloud'),
path('predict/', views.predict, name='predict'),
path('login/',views.login,name='login'),
path('logOut/',views.logOut,name='logOut'),
path('register/',views.register,name='register'),
]
然后创建views进行页面渲染
def index(request):
uname = request.session.get('username')
userInfo = User.objects.get(username=uname)
airdataList = list(getairdata())
dateList = list(set([x[1] for x in airdataList]))然后将之前文件夹内的index.html文件复制到templates下
再在浏览器输入http://127.0.0.1:8000/myApp/index/即可看到网页成功渲染出来
6登录注册功能
将文件中的login以及register复制到templates下
在urls增加以下代码：
在views下增加登录注册代码：
def login(request):
if request.method == "GET":
return render(request, 'login.html', {})
else:
uname=request.POST.get('username')
pwd=request.POST.get('password')
print(uname,pwd)
try:
user = User.objects.get(username=uname,password=pwd)
request.session['username'] = user.username
return redirect('index')
except:
return errorResponse(request,'用户名或密码错误，请输入正确信息')
#return render(request, 'login.html', {})
def register(request):
if request.method == 'GET':
return render(request, 'register.html',{})
else:
uname = request.POST.get('username')
pwd = request.POST.get('password')
ckPwd = request.POST.get('ckPassword')
print(uname,pwd,ckPwd)
try:
User.objects.get(username=uname)
return errorResponse(request,"用户名已存在")
except:
if not uname or not pwd or not ckPwd:return errorResponse(request,"请输入完整信息")
if pwd != ckPwd:return errorResponse(request,"两次密码不相符，请确认您的密码")
User.objects.create(username=uname,password=pwd)
return redirect('/myApp/login/')
return render(request, 'register.html', {})将register.html替换为如下代码，进行效果渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据分析可视化系统</title>
<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
<!-- Waves Effect -->
<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
</head>
<body>
<div id="single-wrapper">
<form action="#" class="frm-single">
<div class="inside">
<div class="title"><strong>空气质量数据</strong>分析可视化系统</div>
<!-- /.title -->
<div class="frm-title">注册</div>
<!-- /.frm-title -->
<div class="frm-input"><input type="text" placeholder="请输入您的用户名" class="frm-inp"><i class="fa fa-envelope frm-ico"></i></div>
<!-- /.frm-input -->
<div class="frm-input"><input type="password" placeholder="请输入您的密码" class="frm-inp"><i class="fa fa-user frm-ico"></i></div>
<!-- /.frm-input -->
<div class="frm-input"><input type="password" placeholder="请确认您的密码" class="frm-inp"><i class="fa fa-lock frm-ico"></i></div>
<!-- /.frm-input -->
<div class="clearfix margin-bottom-20">
<div class="checkbox primary"><input type="checkbox" id="accept"><label for="accept">同意用户协议</label></div>
<!-- /.checkbox -->
</div>
<!-- /.clearfix -->
<button type="submit" class="frm-submit">注册<i class="fa fa-arrow-circle-right"></i></button>
<!-- <div class="row small-spacing">-->
<!-- <div class="col-sm-12">-->
<!-- <div class="txt-login-with txt-center">其他方式登录</div>-->
<!-- <!– /.txt-login-with –>-->
<!-- </div>-->
<!-- <!– /.col-sm-12 –>-->
<!-- <div class="col-sm-6"><button type="button" class="btn btn-sm btn-icon btn-icon-left btn-social-with-text btn-facebook text-white waves-effect waves-light"><i class="ico fa fa-facebook"></i><span>Facebook</span></button></div>-->
<!-- <!– /.col-sm-6 –>-->
<!-- <div class="col-sm-6"><button type="button" class="btn btn-sm btn-icon btn-icon-left btn-social-with-text btn-google-plus text-white waves-effect waves-light"><i class="ico fa fa-google-plus"></i>Google+</button></div>-->
<!-- <!– /.col-sm-6 –>-->
<!-- </div>-->
<!-- /.row -->
<a href="/myApp/login/" class="a-link"><i class="fa fa-sign-in"></i>已经创建了账号? 返回登录.</a>
<div class="frm-footer">NinjaAdmin © 2016.</div>
<!-- /.footer -->
</div>
<!-- .inside -->
</form>
<!-- /.frm-single -->
</div><!--/#single-wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/assets/script/html5shiv.min.js"></script>
<script src="/static/assets/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/assets/scripts/jquery.min.js"></script>
<script src="/static/assets/scripts/modernizr.min.js"></script>
<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
<script src="/static/assets/plugin/waves/waves.min.js"></script>
<script src="/static/assets/scripts/main.min.js"></script>
</body>
</html>在浏览器中输入http://127.0.0.1:8000/myApp/register/可以看到如下页面：
接着输入完整的views代码，让前端页面功能完善：
def airCloud(request):
uname = request.session.get('username')
userInfo = User.objects.get(username=uname)
return render(request, 'airCloud.html', {
'userInfo': userInfo,
})
def predict(request):
uname = request.session.get('username')
userInfo = User.objects.get(username=uname)
# 👇 初始化变量，避免 UnboundLocalError
result = None
AQIrank = ''
if request.method == "POST":
defaultPM = int(request.POST.get('defaultPM'))
defaultSO2 = int(request.POST.get('defaultSO2'))
defaultNO2 = int(request.POST.get('defaultNO2'))
defaultO3 = int(request.POST.get('defaultO3'))
print(defaultPM, defaultSO2, defaultNO2, defaultO3)
trainData = getData()
model = model_train(trainData)
result = pred(model, defaultPM, defaultSO2, defaultNO2, defaultO3)
print(result)
# 判断 AQI 等级
if result < 50:
AQIrank = '优'
elif result < 100:
AQIrank = '良'
elif result < 150:
AQIrank = '轻度污染'
elif result < 200:
AQIrank = '中度污染'
elif result < 300:
AQIrank = '重度污染'
else:
AQIrank = '严重污染'
print(AQIrank)
return render(request, 'predict.html', {
'userInfo': userInfo,
'result': result,
'AQIrank': AQIrank,
})
if request.method == "POST":
defaultYear = request.POST.get('defaultYear')
defaultMonth = request.POST.get('defaultMonth')
defaultCity = request.POST.get('defaultCity')
print(defaultYear, defaultMonth, defaultCity)
mapData = getcityChartData(defaultMonth)
return render(request, 'cityChart.html', {
'userInfo': userInfo,
'yearList': yearList,
'defaultYear': defaultYear,
'cityList': cityList,
'monthList': monthList,
'defaultCity': defaultCity,
'defaultMonth': defaultMonth,
'mapData': mapData,
})
return render(request, 'cityChart.html', {
'userInfo': userInfo,
'yearList': yearList,
'defaultYear': defaultYear,
'cityList': cityList,
'monthList': monthList,
'defaultCity': defaultCity,
'defaultMonth': defaultMonth,
'mapData': mapData,
})
def selfInfo(request):
uname = request.session.get('username')
userInfo = User.objects.get(username=uname)
if request.method == "POST":
print(request.POST)
res = changePassword(request.POST,userInfo)
if res != None:
return errorResponse(request, res)
userInfo = User.objects.get(username=uname)
return render(request, 'selfInfo.html', {
'userInfo': userInfo
})
def table(request):
uname = request.session.get('username')
userInfo = User.objects.get(username=uname)
tableData = list(getairdata())
return render(request, 'table.html', {
'userInfo': userInfo,
'tableData':tableData
})
def logOut(request):
request.session.clear()
return redirect('login')
def login(request):
if request.method == "GET":
return render(request, 'login.html', {})
else:
uname=request.POST.get('username')
pwd=request.POST.get('password')
print(uname,pwd)
try:
user = User.objects.get(username=uname,password=pwd)
request.session['username'] = user.username
return redirect('index')
except:
return errorResponse(request,'用户名或密码错误，请输入正确信息')
#return render(request, 'login.html', {})
def register(request):
if request.method == 'GET':
return render(request, 'register.html',{})
else:
uname = request.POST.get('username')
pwd = request.POST.get('password')
ckPwd = request.POST.get('ckPassword')
print(uname,pwd,ckPwd)
try:
User.objects.get(username=uname)
return errorResponse(request,"用户名已存在")
except:
if not uname or not pwd or not ckPwd:return errorResponse(request,"请输入完整信息")
if pwd != ckPwd:return errorResponse(request,"两次密码不相符，请确认您的密码")
User.objects.create(username=uname,password=pwd)
return redirect('/myApp/login/')
return render(request, 'register.html', {})接着修改error.html中的代码：
在login.html中修改以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据分析可视化系统</title>
<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
<!-- Waves Effect -->
<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
</head>
<body>
<div id="single-wrapper">
<form action="#" class="frm-single">
<div class="inside">
<div class="title"><strong>空气质量数据</strong>分析可视化系统</div>
<!-- /.title -->
<div class="frm-title">登录</div>
<!-- /.frm-title -->
<div class="frm-input"><input type="text" placeholder="请输入您的用户名" class="frm-inp"><i class="fa fa-user frm-ico"></i></div>
<!-- /.frm-input -->
<div class="frm-input"><input type="password" placeholder="请输入您的密码" class="frm-inp"><i class="fa fa-lock frm-ico"></i></div>
<!-- /.frm-input -->
<div class="clearfix margin-bottom-20">
<div class="pull-left">
<div class="checkbox primary"><input type="checkbox" id="rememberme"><label for="rememberme">记住我</label></div>
<!-- /.checkbox -->
</div>
<!-- /.pull-left -->
<!-- <div class="pull-right"><a href="page-recoverpw.html" class="a-link"><i class="fa fa-unlock-alt"></i>Forgot password?</a></div>-->
<!-- /.pull-right -->
</div>
<!-- /.clearfix -->
<button type="submit" class="frm-submit">登录<i class="fa fa-arrow-circle-right"></i></button>
<div class="row small-spacing">
<!-- <div class="col-sm-12">-->
<!-- <div class="txt-login-with txt-center">or login with</div>-->
<!-- <!– /.txt-login-with –>-->
<!-- </div>-->
<!-- <!– /.col-sm-12 –>-->
<!-- <div class="col-sm-6"><button type="button" class="btn btn-sm btn-icon btn-icon-left btn-social-with-text btn-facebook text-white waves-effect waves-light"><i class="ico fa fa-facebook"></i><span>Facebook</span></button></div>-->
<!-- <!– /.col-sm-6 –>-->
<!-- <div class="col-sm-6"><button type="button" class="btn btn-sm btn-icon btn-icon-left btn-social-with-text btn-google-plus text-white waves-effect waves-light"><i class="ico fa fa-google-plus"></i>Google+</button></div>-->
<!-- <!– /.col-sm-6 –>-->
</div>
<!-- /.row -->
<a href="/myApp/register/" class="a-link"><i class="fa fa-key"></i>还未创建您的账号? 点击注册.</a>
<div class="frm-footer">空气质量数据可视化分析系统 © 2025.</div>
<!-- /.footer -->
</div>
<!-- .inside -->
</form>
<!-- /.frm-single -->
</div><!--/#single-wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/assets/script/html5shiv.min.js"></script>
<script src="/static/assets/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/assets/scripts/jquery.min.js"></script>
<script src="/static/assets/scripts/modernizr.min.js"></script>
<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
<script src="/static/assets/plugin/waves/waves.min.js"></script>
<script src="/static/assets/scripts/main.min.js"></script>
</body>
</html>这样登陆注册功能已经全部实现。
7首页编写
首先要确保assets下要有这些文件
并且utils下要有这些功能模块，之后都要用：
在query下编写查询模块：
from pyhive import hive
conn = hive.Connection(host='node1',port='10000',username='hadoop')
cursor = conn.cursor()
def querys(sql,params,type='no_select'):
params = tuple(params)
cursor.execute(sql,params)
if type != 'no_select':
data_list = cursor.fetchall()
conn.commit()
return data_list
else:
conn.commit()
return '数据库语句执行成功'
# airdata = querys('select * from airdata',[],'select')
# print(airdata[0])getPublicData.py代码编写：
from utils.query import querys
def getairdata():
airdata = querys('select * from airdata',[],'select')
return airdata
def getavgCityAqi():
avgCityAqi = querys('select * from avgCityAqi',[],'select')
return avgCityAqi
def getavgCitySix():
avgCitySix = querys('select * from avgCitySix',[],'select')
return avgCitySix
def getmaxCityAqi():
maxCityAqi = querys('select * from maxCityAqi',[],'select')
return maxCityAqi
def getavgCityPM():
avgCityPM = querys('select * from avgCityPM',[],'select')
return avgCityPM
def getgreatAir():
greatAir = querys('select * from greatAir',[],'select')
return greatAir
def getmaxSN():
maxSN = querys('select * from maxSN',[],'select')
return maxSN
def getCOCategory():
COCategory = querys('select * from COCategory',[],'select')
return COCategory
def getO3Category():
O3Category = querys('select * from O3Category',[],'select')
return O3Category
def getmonthAQI():
monthAQI = querys('select * from monthAQI',[],'select')
return monthAQI
修改index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据可视化分析系统</title>
<!-- Main Styles -->
<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
<!-- Material Design Icon -->
<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<!-- Waves Effect -->
<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
<!-- Sweet Alert -->
<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
<!-- Morris Chart -->
<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
<!-- FullCalendar -->
<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
</head>
<body>
<header class="fixed-header">
<div class="header-top">
<div class="container">
<div class="pull-left">
<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
</div>
<!-- /.pull-left -->
<div class="pull-right">
<div class="ico-item hidden-on-desktop">
<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
</div>
<!-- /.ico-item hidden-on-desktop -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
<!-- /.searchform -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
<div id="message-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
<span class="name">Harry Halen</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Thomas Taylor</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
<span class="name">Helen Candy</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Anna Cavan</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 hour ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-success"><i class="fa fa-user"></i></span>
<span class="name">Jenny Betty</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 day ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
<span class="name">Denise Peterson</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 year ago</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#message-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Your Notifications</h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
<span class="name">Anna William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
<span class="name">Update Status</span>
<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
<span class="name">Michael Zenaty</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">50 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Simon</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">1 hour</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
<span class="name">Account Contact Change</span>
<span class="desc">A contact detail associated with your account has been changed.</span>
<span class="time">2 hours</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
<span class="name">Helen 987</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Yesterday</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Denise Jenny</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">Oct, 28</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
<span class="name">Thomas William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Oct, 27</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#notification-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
<div id="user-status" class="user-status js__toggle">
<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
<h5 class="position">用户</h5>
<!-- /.name -->
<div class="control-items">
<!-- <div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
</div>
<!-- /.control-items -->
</div>
<!-- /#user-status -->
</div>
<!-- /.ico-item -->
</div>
<!-- /.pull-right -->
</div>
<!-- /.container -->
</div>
<!-- /.header-top -->
<nav class="nav-horizontal">
<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
<div class="container">
<ul class="menu">
<li class="current">
<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
<ul class="sub-menu mega mega-3">
<li class="has-sub">
<h3 class="title">Components</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
<li><a href="ui-components.html">UI Components</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Icons</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
<li><a href="icons-fontello.html">Fontello</a></li>
<li><a href="icons-material-icons.html">Material Design Icons</a></li>
<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
<li><a href="icons-themify-icons.html">Themify Icons</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-range-slider.html">Range Slider</a></li>
<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
<li><a href="ui-treeview.html">Tree view</a></li>
<li><a href="ui-typography.html">Typography</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
<ul class="sub-menu single">
<li><a href="chart-3d.html">3D Charts</a></li>
<li><a href="chart-chartist.html">Chartist Charts</a></li>
<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-knob.html">Knob Chart</a></li>
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
<li><a href="chart-other.html">Other Chart</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
<ul class="sub-menu single">
<li><a href="form-elements.html">General Elements</a></li>
<li><a href="form-advanced.html">Advanced Form</a></li>
<li><a href="form-fileupload.html">Form Uploads</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
<li><a href="form-xeditable.html">X-editable</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
<ul class="sub-menu single">
<li><a href="page-starter.html">Starter Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="page-register.html">Register</a></li>
<li><a href="page-recoverpw.html">Recover Password</a></li>
<li><a href="page-lock-screen.html">Lock Screen</a></li>
<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
<li><a href="page-404.html">Error 404</a></li>
<li><a href="page-500.html">Error 500</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
<ul class="sub-menu single">
<li><a href="extras-contact.html">Contact list</a></li>
<li><a href="extras-email-template.html">Email template</a></li>
<li><a href="extras-faq.html">FAQ</a></li>
<li><a href="extras-gallery.html">Gallery</a></li>
<li><a href="extras-invoice.html">Invoice</a></li>
<li><a href="extras-maps.html">Maps</a></li>
<li><a href="extras-pricing.html">Pricing</a></li>
<li><a href="extras-projects.html">Projects</a></li>
<li><a href="extras-taskboard.html">Taskboard</a></li>
<li><a href="extras-timeline.html">Timeline</a></li>
<li><a href="extras-tour.html">Tour</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
<ul class="sub-menu mega mega-2">
<li class="has-sub">
<h3 class="title">Tables</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="calendar.html">Calendar</a></li>
<li><a href="ui-notification.html">Notification</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="widgets.html">Widgets</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
</li>
</ul>
<!-- /.menu -->
</div>
<!-- /.container -->
</nav>
<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
<div id="wrapper">
<div class="main-content container">
<div class="row small-spacing">
<!-- <div class="col-xs-12">-->
<div class="box-content">
<h4 class="box-title">Activity</h4>
<!-- /.box-title -->
<div class="dropdown js__drop_down">
<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
<ul class="sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else there</a></li>
<li class="split"></li>
<li><a href="#">Separated link</a></li>
</ul>
<!-- /.sub-menu -->
</div>
<!-- /.dropdown js__dropdown -->
<div id="real-time-flot-chart" class="flot-chart" style="height: 320px"></div>
<!-- /#flot-chart-1.flot-chart -->
</div>
<!-- /.box-content -->
</div>
<!-- /.col-xs-12 -->
<div class="col-lg-5 col-xs-12">
<div class="col-lg-12 ol-xs-12">
<div class="box-content card white">
<h4 class="box-title">日期选择</h4>
<!-- /.box-title -->
<div class="card-content">
<form action="/myApp/index/" method="POST">
<div class="row small-spacing">
<div class="col-xs-3">
<select class="form-control" name="defaultYear">
{% for i in yearList %}
{% if i == defaultYear %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}" >{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col-xs-3">
<select class="form-control" name="defaultMonth">
{% for i in monthList %}
{% if i == defaultMonth %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}" >{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col-xs-3">
<select class="form-control" name="defaultDay">
{% for i in dayList %}
{% if i == defaultDay %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}" >{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-primary waves-effect waves-light">查看</button>
</div>
</div>
</form>
<!-- /.input-group -->
<!-- /.input-group -->
</div>
<!-- /.card-content -->
</div>
<!-- /.box-content card white -->
</div>
<div class="col-lg-12 col-xs-12">
<div class="box-content">
<h4 class="box-title text-info">CITY</h4>
<!-- /.box-title -->
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<!-- <div id="traffic-sparkline-chart-1" class="left-content margin-top-15"></div>-->
<div style="display: flex">
<div style="flex: 10">
<div id="mainA" style="width: 100%;height: 300px"></div>
<!-- /#traffic-sparkline-chart-1 -->
<div>
<p class="text text-success">
<span style="margin-right: 50px">PM2.5:</span>
<span style="margin-right: 50px">PM10:</span>
<span>SO2:{{ currentData.6 }}</span>
</p>
<p class="text text-success">
<span style="margin-right: 80px">NO2:</span>
<span style="margin-right: 50px">CO:</span>
<span>O3:</span>
</p>
</div>
</div>
<div>
<div class="">
<h2 class="counter text-info">278</h2>
<!-- /.counter -->
<p class="text text-info">空气质量AQI</p>
<p class="text text-justify">0-50：优</p>
<p class="text text-justify"> 51-100：良</p>
<p class="text text-justify"> 101-150：轻度污染</p>
<p class="text text-justify"> 151-200：中度污染</p>
<p class="text text-justify"> 201-300：重度污染</p>
<p class="text text-justify"> 大于300：严重污染</p>
<!-- /.text -->
</div>
</div>
</div>
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
<ul class="list-inline">
<li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Default</a></li>
<li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Primary</a></li>
<li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Success</a></li>
<li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Info</a></li>
<li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Warning</a></li>
<li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Danger</a></li>
<li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Violet</a></li>
</ul>
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-4 col-xs-12 -->
<div class="col-lg-7 col-xs-12">
<div class="col-lg-12 col col-xs-12">
<div class="box-content">
<h4 class="box-title text-success">Projects Done</h4>
<!-- /.box-title -->
<div class="dropdown js__drop_down">
<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
<ul class="sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else there</a></li>
<li class="split"></li>
<li><a href="#">Separated link</a></li>
</ul>
<!-- /.sub-menu -->
</div>
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>
<!-- /#traffic-sparkline-chart-2 -->
<div class="right-content">
<h2 class="counter text-success">36%</h2>
<!-- /.counter -->
<p class="text text-success">Some text here</p>
<!-- /.text -->
</div>
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-4 col-xs-12 -->
<div class="col-lg-6 col-xs-12">
<div class="box-content">
<h4 class="box-title">Visitor Analytics</h4>
<!-- /.box-title -->
<div class="dropdown js__drop_down">
<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
<ul class="sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else there</a></li>
<li class="split"></li>
<li><a href="#">Separated link</a></li>
</ul>
<!-- /.sub-menu -->
</div>
<!-- /.dropdown js__dropdown -->
<div id="bar-morris-chart" class="morris-chart" style="height: 240px"></div>
<div class="text-center">
<ul class="list-inline morris-chart-detail-list">
<li><i class="fa fa-circle"></i>Series A</li>
<li><i class="fa fa-circle"></i>Series B</li>
<li><i class="fa fa-circle"></i>Series C</li>
</ul>
</div>
<!-- /#bar-morris-chart.morris-chart -->
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-6 col-xs-12 -->
<div class="col-lg-6 col-xs-12">
<div class="box-content">
<h4 class="box-title">Memory usage</h4>
<!-- /.box-title -->
<div class="dropdown js__drop_down">
<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
<ul class="sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else there</a></li>
<li class="split"></li>
<li><a href="#">Separated link</a></li>
</ul>
<!-- /.sub-menu -->
</div>
<!-- /.dropdown js__dropdown -->
<div id="donut-morris-chart" class="morris-chart" style="height: 240px"></div>
<div class="text-center">
<ul class="list-inline morris-chart-detail-list">
<li><i class="fa fa-circle"></i>Series A</li>
<li><i class="fa fa-circle"></i>Series B</li>
<li><i class="fa fa-circle"></i>Series C</li>
</ul>
</div>
<!-- /#donut-morris-chart.morris-chart -->
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-6 col-xs-12 -->
</div>
<!-- /.row -->
<div class="row small-spacing">
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="box-content bg-success text-white">
<div class="statistics-box with-icon">
<i class="ico small fa fa-diamond"></i>
<p class="text text-white">SUCCESS</p>
<h2 class="counter">72943</h2>
</div>
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-3 col-md-6 col-xs-12 -->
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="box-content bg-info text-white">
<div class="statistics-box with-icon">
<i class="ico small fa fa-download"></i>
<p class="text text-white">DOWNLOAD</p>
<h2 class="counter">6382</h2>
</div>
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-3 col-md-6 col-xs-12 -->
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="box-content bg-danger text-white">
<div class="statistics-box with-icon">
<i class="ico small fa fa-bug"></i>
<p class="text text-white">FIXED BUG</p>
<h2 class="counter">12564</h2>
</div>
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-3 col-md-6 col-xs-12 -->
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="box-content bg-warning text-white">
<div class="statistics-box with-icon">
<i class="ico small fa fa-usd"></i>
<p class="text text-white">SALES</p>
<h2 class="counter">2,637</h2>
</div>
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-3 col-md-6 col-xs-12 -->
</div>
<!-- .row -->
<div class="row small-spacing">
<div class="col-lg-6 col-xs-12">
<div class="box-content">
<div id="calendar-widget"></div>
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-6 col-xs-12 -->
<div class="col-lg-6 col-xs-12">
<div class="box-content">
<h4 class="box-title">Purchases</h4>
<!-- /.box-title -->
<div class="dropdown js__drop_down">
<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
<ul class="sub-menu">
<li><a href="#">Product</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else there</a></li>
<li class="split"></li>
<li><a href="#">Separated link</a></li>
</ul>
<!-- /.sub-menu -->
</div>
<!-- /.dropdown js__dropdown -->
<div class="table-responsive table-purchases">
<table class="table table-striped margin-bottom-10">
<thead>
<tr>
<th style="width:40%;">Product</th>
<th>Price</th>
<th>Date</th>
<th>State</th>
<th style="width:5%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Amaza Themes</td>
<td>$71</td>
<td>Nov 12,2016</td>
<td class="text-success">Completed</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
<tr>
<td>Macbook</td>
<td>$142</td>
<td>Nov 10,2016</td>
<td class="text-danger">Cancelled</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
<tr>
<td>Samsung TV</td>
<td>$200</td>
<td>Nov 01,2016</td>
<td class="text-warning">Pending</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
<tr>
<td>Ninja Admin</td>
<td>$200</td>
<td>Oct 28,2016</td>
<td class="text-warning">Pending</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
<tr>
<td>Galaxy Note 5</td>
<td>$200</td>
<td>Oct 28,2016</td>
<td class="text-success">Completed</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
<tr>
<td>CleanUp Themes</td>
<td>$71</td>
<td>Oct 22,2016</td>
<td class="text-success">Completed</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
<tr>
<td>Facebook WP Plugin</td>
<td>$10</td>
<td>Oct 15,2016</td>
<td class="text-success">Completed</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
<tr>
<td>Iphone 7</td>
<td>$100</td>
<td>Oct 12,2016</td>
<td class="text-warning">Pending</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
<tr>
<td>Nova House</td>
<td>$100</td>
<td>Oct 12,2016</td>
<td class="text-warning">Pending</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
<tr>
<td>Repair Cars</td>
<td>$35</td>
<td>Oct 12,2016</td>
<td class="text-warning">Pending</td>
<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
</tr>
</tbody>
</table>
<!-- /.table -->
</div>
<!-- /.table-responsive -->
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-6 col-xs-12 -->
</div>
<!-- /.row -->
<footer class="footer">
<ul class="list-inline">
<li>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Help</a></li>
</ul>
</footer>
</div>
<!-- /.main-content -->
</div><!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/assets/script/html5shiv.min.js"></script>
<script src="/static/assets/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/assets/scripts/jquery.min.js"></script>
<script src="/static/assets/scripts/modernizr.min.js"></script>
<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="/static/assets/plugin/waves/waves.min.js"></script>
<!-- Morris Chart -->
<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
<!-- Flot Chart -->
<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
<!-- Sparkline Chart -->
<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
<!-- FullCalendar -->
<script src="/static/assets/plugin/moment/moment.js"></script>
<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
<script src="/static/assets/scripts/fullcalendar.init.js"></script>
<script src="/static/assets/scripts/main.min.js"></script>
<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
<script src="/static/assets/echarts.js"></script>
<script>
var chartDom = document.getElementById('mainA');
var myChart = echarts.init(chartDom);
var option;
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 30,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -30,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
distance: -30,
length: 30,
lineStyle: {
color: '#fff',
width: 4
}
},
axisLabel: {
color: 'inherit',
distance: 40,
fontSize: 13
},
detail: {
valueAnimation: true,
formatter: '{value} ',
color: 'inherit'
},
data: [
{
value: 70
}
]
}
]
};
// setInterval(function () {
// myChart.setOption({
// series: [
// {
// data: [
// {
// value: +(Math.random() * 100).toFixed(2)
// }
// ]
// }
// ]
// });
// }, 2000);
option && myChart.setOption(option);
</script>
</body>
</html>上述代码修改的前端：
8 个人信息编写
新增selfinfo.html，内容复制index.html
修改getChartData.py
from utils.query import *
from utils.getPublicData import *
from utils.error import *
from myApp.models import *
def getIndexData(defaultCity):
avgCityAqiList = list(getavgCityAqi())
avgCitySixList = list(getavgCitySix())
realSixList = querys('select * from avgCitySix where city = %s',[defaultCity],'select')[0]
yLine = list(realSixList[1:])
yLine = [round(x,1) for x in yLine]
print(yLine)
xLine = ['PM2.5','PM10','So2','No2','Co','O3']
print(avgCitySixList[0])
xBar = [x[0] for x in avgCityAqiList]
yBar = [round(x[1],0) for x in avgCityAqiList]
# xLine = [x[0] for x in avgCitySixList]
# yLine = [round(float(x[1]),1) for x in avgCitySixList]
print(xBar,yBar,xLine,yLine)
return xBar,yBar,xLine,yLine
def changePassword(passwordInfo,userInfo):
oldPwd = passwordInfo['oldPwd']
newPwd = passwordInfo['newPwd']
ckdPwd = passwordInfo['ckdPwd']
user = User.objects.get(username=userInfo.username)
if user.password != oldPwd:
return '原密码错误，请输入正确信息'
else:
if newPwd != ckdPwd:
return '密码确认失败!'
else:
user.password = newPwd
user.save()
9.数据总览
创建table.html,内容与selfInfo一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据可视化分析系统</title>
<!-- Main Styles -->
<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
<!-- Material Design Icon -->
<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<!-- Waves Effect -->
<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
<!-- Sweet Alert -->
<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
<!-- Morris Chart -->
<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
<!-- FullCalendar -->
<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
<link rel="stylesheet" href="/static/assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/static/assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
</head>
<body>
<header class="fixed-header">
<div class="header-top">
<div class="container">
<div class="pull-left">
<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
</div>
<!-- /.pull-left -->
<div class="pull-right">
<div class="ico-item hidden-on-desktop">
<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
</div>
<!-- /.ico-item hidden-on-desktop -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
<!-- /.searchform -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
<div id="message-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
<span class="name">Harry Halen</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Thomas Taylor</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
<span class="name">Helen Candy</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Anna Cavan</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 hour ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-success"><i class="fa fa-user"></i></span>
<span class="name">Jenny Betty</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 day ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
<span class="name">Denise Peterson</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 year ago</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#message-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Your Notifications</h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
<span class="name">Anna William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
<span class="name">Update Status</span>
<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
<span class="name">Michael Zenaty</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">50 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Simon</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">1 hour</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
<span class="name">Account Contact Change</span>
<span class="desc">A contact detail associated with your account has been changed.</span>
<span class="time">2 hours</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
<span class="name">Helen 987</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Yesterday</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Denise Jenny</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">Oct, 28</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
<span class="name">Thomas William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Oct, 27</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#notification-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
<div id="user-status" class="user-status js__toggle">
<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
<h5 class="position">用户</h5>
<!-- /.name -->
<div class="control-items">
<!-- <div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
</div>
<!-- /.control-items -->
</div>
<!-- /#user-status -->
</div>
<!-- /.ico-item -->
</div>
<!-- /.pull-right -->
</div>
<!-- /.container -->
</div>
<!-- /.header-top -->
<nav class="nav-horizontal">
<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
<div class="container">
<ul class="menu">
<li class="current">
<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
<ul class="sub-menu mega mega-3">
<li class="has-sub">
<h3 class="title">Components</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
<li><a href="ui-components.html">UI Components</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Icons</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
<li><a href="icons-fontello.html">Fontello</a></li>
<li><a href="icons-material-icons.html">Material Design Icons</a></li>
<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
<li><a href="icons-themify-icons.html">Themify Icons</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-range-slider.html">Range Slider</a></li>
<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
<li><a href="ui-treeview.html">Tree view</a></li>
<li><a href="ui-typography.html">Typography</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
<ul class="sub-menu single">
<li><a href="chart-3d.html">3D Charts</a></li>
<li><a href="chart-chartist.html">Chartist Charts</a></li>
<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-knob.html">Knob Chart</a></li>
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
<li><a href="chart-other.html">Other Chart</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
<ul class="sub-menu single">
<li><a href="form-elements.html">General Elements</a></li>
<li><a href="form-advanced.html">Advanced Form</a></li>
<li><a href="form-fileupload.html">Form Uploads</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
<li><a href="form-xeditable.html">X-editable</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
<ul class="sub-menu single">
<li><a href="page-starter.html">Starter Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="page-register.html">Register</a></li>
<li><a href="page-recoverpw.html">Recover Password</a></li>
<li><a href="page-lock-screen.html">Lock Screen</a></li>
<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
<li><a href="page-404.html">Error 404</a></li>
<li><a href="page-500.html">Error 500</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
<ul class="sub-menu single">
<li><a href="extras-contact.html">Contact list</a></li>
<li><a href="extras-email-template.html">Email template</a></li>
<li><a href="extras-faq.html">FAQ</a></li>
<li><a href="extras-gallery.html">Gallery</a></li>
<li><a href="extras-invoice.html">Invoice</a></li>
<li><a href="extras-maps.html">Maps</a></li>
<li><a href="extras-pricing.html">Pricing</a></li>
<li><a href="extras-projects.html">Projects</a></li>
<li><a href="extras-taskboard.html">Taskboard</a></li>
<li><a href="extras-timeline.html">Timeline</a></li>
<li><a href="extras-tour.html">Tour</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
<ul class="sub-menu mega mega-2">
<li class="has-sub">
<h3 class="title">Tables</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="calendar.html">Calendar</a></li>
<li><a href="ui-notification.html">Notification</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="widgets.html">Widgets</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
</li>
</ul>
<!-- /.menu -->
</div>
<!-- /.container -->
</nav>
<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
<div id="wrapper">
<div class="main-content container">
<div class="row small-spacing">
<!-- <div class="col-xs-12">-->
<!-- /.box-content -->
</div>
<!-- /.col-xs-12 -->
<div class="col-lg-12 col-xs-12">
<div class="box-content">
<h4 class="box-title">总览表格</h4>
<!-- /.box-title -->
<div class="dropdown js__drop_down">
<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
<!--{# <ul class="sub-menu">#}-->
<!--{# <li><a href="#">Action</a></li>#}-->
<!--{# <li><a href="#">Another action</a></li>#}-->
<!--{# <li><a href="#">Something else there</a></li>#}-->
<!--{# <li class="split"></li>#}-->
<!--{# <li><a href="#">Separated link</a></li>#}-->
<!--{# </ul>#}-->
<!-- /.sub-menu -->
</div>
<!-- /.dropdown js__dropdown -->
<table id="example" class="table table-striped table-bordered display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>城市</th>
<th>日期</th>
<th>AQI</th>
<th>质量等级</th>
<th>当日排名</th>
<th>PM2.5</th>
<th>PM10</th>
<th>SO2</th>
<th>NO2</th>
<th>CO</th>
<th>O3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>城市</th>
<th>日期</th>
<th>AQI</th>
<th>质量等级</th>
<th>当日排名</th>
<th>PM2.5</th>
<th>PM10</th>
<th>SO2</th>
<th>NO2</th>
<th>CO</th>
<th>O3</th>
</tr>
</tfoot>
<tbody>
{% for i in tableData %}
<tr>
<td>{{ i.11 }}</td>
<td>{{ i.0 }}</td>
<td>{{ i.1 }}</td>
<td>{{ i.2 }}</td>
<td>{{ i.3 }}</td>
<td>{{ i.4 }}</td>
<td>{{ i.5 }}</td>
<td>{{ i.6 }}</td>
<td>{{ i.7 }}</td>
<td>{{ i.8 }}</td>
<td>{{ i.9 }}</td>
<td>{{ i.10 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- /.box-content card white -->
</div>
<!-- /.box-content -->
</div>
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-6 col-xs-12 -->
</div>
<!-- /.row -->
<!-- /.row -->
<!-- <footer class="footer bottom-right">-->
<!-- <ul class="list-inline">-->
<!-- <li>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></li>-->
<!-- <li><a href="#">Privacy</a></li>-->
<!-- <li><a href="#">Terms</a></li>-->
<!-- <li><a href="#">Help</a></li>-->
<!-- </ul>-->
<!-- </footer>-->
</div>
<!-- /.main-content -->
</div><!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/assets/script/html5shiv.min.js"></script>
<script src="/static/assets/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/assets/scripts/jquery.min.js"></script>
<script src="/static/assets/scripts/modernizr.min.js"></script>
<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="/static/assets/plugin/waves/waves.min.js"></script>
<!-- Morris Chart -->
<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
<!-- Flot Chart -->
<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
<!-- Sparkline Chart -->
<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
<!-- FullCalendar -->
<script src="/static/assets/plugin/moment/moment.js"></script>
<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
<script src="/static/assets/scripts/fullcalendar.init.js"></script>
<script src="/static/assets/scripts/main.min.js"></script>
<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
<script src="/static/assets/echarts.js"></script>
<!-- Data Tables -->
<script src="/static/assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/static/assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
<script src="/static/assets/scripts/datatables.demo.min.js"></script>
</body>
</html>刷新页面会出现：
10年度分析
新建airYearChart.html,内容跟table.html一致，
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据可视化分析系统</title>
<!-- Main Styles -->
<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
<!-- Material Design Icon -->
<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<!-- Waves Effect -->
<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
<!-- Sweet Alert -->
<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
<!-- Morris Chart -->
<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
<!-- FullCalendar -->
<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
<link rel="stylesheet" href="/static/assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/static/assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
</head>
<body>
<header class="fixed-header">
<div class="header-top">
<div class="container">
<div class="pull-left">
<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
</div>
<!-- /.pull-left -->
<div class="pull-right">
<div class="ico-item hidden-on-desktop">
<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
</div>
<!-- /.ico-item hidden-on-desktop -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
<!-- /.searchform -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
<div id="message-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
<span class="name">Harry Halen</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Thomas Taylor</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
<span class="name">Helen Candy</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Anna Cavan</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 hour ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-success"><i class="fa fa-user"></i></span>
<span class="name">Jenny Betty</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 day ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
<span class="name">Denise Peterson</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 year ago</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#message-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Your Notifications</h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
<span class="name">Anna William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
<span class="name">Update Status</span>
<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
<span class="name">Michael Zenaty</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">50 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Simon</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">1 hour</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
<span class="name">Account Contact Change</span>
<span class="desc">A contact detail associated with your account has been changed.</span>
<span class="time">2 hours</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
<span class="name">Helen 987</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Yesterday</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Denise Jenny</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">Oct, 28</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
<span class="name">Thomas William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Oct, 27</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#notification-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
<div id="user-status" class="user-status js__toggle">
<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
<h5 class="position">用户</h5>
<!-- /.name -->
<div class="control-items">
<!-- <div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
</div>
<!-- /.control-items -->
</div>
<!-- /#user-status -->
</div>
<!-- /.ico-item -->
</div>
<!-- /.pull-right -->
</div>
<!-- /.container -->
</div>
<!-- /.header-top -->
<nav class="nav-horizontal">
<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
<div class="container">
<ul class="menu">
<li class="current">
<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
<ul class="sub-menu mega mega-3">
<li class="has-sub">
<h3 class="title">Components</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
<li><a href="ui-components.html">UI Components</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Icons</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
<li><a href="icons-fontello.html">Fontello</a></li>
<li><a href="icons-material-icons.html">Material Design Icons</a></li>
<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
<li><a href="icons-themify-icons.html">Themify Icons</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-range-slider.html">Range Slider</a></li>
<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
<li><a href="ui-treeview.html">Tree view</a></li>
<li><a href="ui-typography.html">Typography</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
<ul class="sub-menu single">
<li><a href="chart-3d.html">3D Charts</a></li>
<li><a href="chart-chartist.html">Chartist Charts</a></li>
<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-knob.html">Knob Chart</a></li>
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
<li><a href="chart-other.html">Other Chart</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
<ul class="sub-menu single">
<li><a href="form-elements.html">General Elements</a></li>
<li><a href="form-advanced.html">Advanced Form</a></li>
<li><a href="form-fileupload.html">Form Uploads</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
<li><a href="form-xeditable.html">X-editable</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
<ul class="sub-menu single">
<li><a href="page-starter.html">Starter Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="page-register.html">Register</a></li>
<li><a href="page-recoverpw.html">Recover Password</a></li>
<li><a href="page-lock-screen.html">Lock Screen</a></li>
<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
<li><a href="page-404.html">Error 404</a></li>
<li><a href="page-500.html">Error 500</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
<ul class="sub-menu single">
<li><a href="extras-contact.html">Contact list</a></li>
<li><a href="extras-email-template.html">Email template</a></li>
<li><a href="extras-faq.html">FAQ</a></li>
<li><a href="extras-gallery.html">Gallery</a></li>
<li><a href="extras-invoice.html">Invoice</a></li>
<li><a href="extras-maps.html">Maps</a></li>
<li><a href="extras-pricing.html">Pricing</a></li>
<li><a href="extras-projects.html">Projects</a></li>
<li><a href="extras-taskboard.html">Taskboard</a></li>
<li><a href="extras-timeline.html">Timeline</a></li>
<li><a href="extras-tour.html">Tour</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
<ul class="sub-menu mega mega-2">
<li class="has-sub">
<h3 class="title">Tables</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="calendar.html">Calendar</a></li>
<li><a href="ui-notification.html">Notification</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="widgets.html">Widgets</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
</li>
</ul>
<!-- /.menu -->
</div>
<!-- /.container -->
</nav>
<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
<div id="wrapper">
<div class="main-content container">
<div class="row small-spacing">
<!-- <div class="col-xs-12">-->
<!-- /.box-content -->
</div>
<!-- /.col-xs-12 -->
<div class="col-lg-12 ol-xs-12">
<div class="box-content card white">
<h4 class="box-title">条件选择</h4>
<!-- /.box-title -->
<div class="card-content">
<form action="/myApp/airYearChart/" method="POST">
<div class="row small-spacing">
<div class="col-xs-2">
<select class="form-control" name="defaultYear">
{% for i in yearList %}
{% if i == defaultYear %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}" >{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col-xs-2">
<select class="form-control" name="defaultCity">
{% for i in cityList %}
{% if i == defaultCity %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}" >{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col-xs-3">
<button type="submit" class="btn btn-primary waves-effect waves-light">查看</button>
</div>
</div>
</form>
<!-- /.input-group -->
<!-- /.input-group -->
</div>
<!-- /.card-content -->
</div>
<!-- /.box-content card white -->
</div>
<!-- /.box-content -->
<!-- /.col-lg-4 col-xs-12 -->
<div class="col-lg-12 col col-xs-12">
<div class="box-content">
<h4 class="box-title text-info">{{ defaultCity }}AQI Max值分析</h4>
<!-- /.box-title -->
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<div id="mainB" style="width: 100%;height: 450px"></div>
<!-- <div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!-- <!– /#traffic-sparkline-chart-2 –>-->
<!-- <div class="right-content">-->
<!-- <h2 class="counter text-success">36%</h2>-->
<!-- <!– /.counter –>-->
<!-- <p class="text text-success">Some text here</p>-->
<!-- <!– /.text –>-->
<!-- </div>-->
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
</div>
<div class="col-lg-12 col col-xs-12">
<div class="box-content">
<h4 class="box-title text-info">{{ defaultCity }}PM颗粒物分析</h4>
<!-- /.box-title -->
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<div id="mainC" style="width: 100%;height: 450px"></div>
<!-- <div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!-- <!– /#traffic-sparkline-chart-2 –>-->
<!-- <div class="right-content">-->
<!-- <h2 class="counter text-success">36%</h2>-->
<!-- <!– /.counter –>-->
<!-- <p class="text text-success">Some text here</p>-->
<!-- <!– /.text –>-->
<!-- </div>-->
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
</div>
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-6 col-xs-12 -->
</div>
<!-- /.row -->
<!-- /.row -->
<!-- <footer class="footer bottom-right">-->
<!-- <ul class="list-inline">-->
<!-- <li>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></li>-->
<!-- <li><a href="#">Privacy</a></li>-->
<!-- <li><a href="#">Terms</a></li>-->
<!-- <li><a href="#">Help</a></li>-->
<!-- </ul>-->
<!-- </footer>-->
</div>
<!-- /.main-content -->
</div><!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/assets/script/html5shiv.min.js"></script>
<script src="/static/assets/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/assets/scripts/jquery.min.js"></script>
<script src="/static/assets/scripts/modernizr.min.js"></script>
<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="/static/assets/plugin/waves/waves.min.js"></script>
<!-- Morris Chart -->
<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
<!-- Flot Chart -->
<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
<!-- Sparkline Chart -->
<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
<!-- FullCalendar -->
<script src="/static/assets/plugin/moment/moment.js"></script>
<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
<script src="/static/assets/scripts/fullcalendar.init.js"></script>
<script src="/static/assets/scripts/main.min.js"></script>
<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
<script src="/static/assets/echarts.js"></script>
<script>
var chartDom = document.getElementById('mainC');
var myChart = echarts.init(chartDom);
var option;
// 绘制左侧面
option = {
color: ['#00DDFF', '#37A2FF'],
title: {
text: 'Gradient Stacked Area Chart'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['PM2.5', 'PM10']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: {{ xData | safe}}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'PM2.5',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(0, 221, 255)'
},
{
offset: 1,
color: 'rgb(77, 119, 255)'
}
])
},
emphasis: {
focus: 'series'
},
data: {{ y2Data2 }}
},
{
name: 'PM10',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(55, 162, 255)'
},
{
offset: 1,
color: 'rgb(116, 21, 219)'
}
])
},
emphasis: {
focus: 'series'
},
data: {{ y2Data10 }}
}
]
};
option && myChart.setOption(option);
</script>
<script>
var chartDom = document.getElementById('mainB');
var myChart = echarts.init(chartDom);
var option;
// 绘制左侧面
option = {
title:{
text:'折线图分析',
x:'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['AQI最大值',"",'AQI最小值'], //图例换行
y:'bottom',
x:'left',
containLabel: true
},
grid: {
left: '3%',
right: '4%',
//bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: {{ xData | safe}},
splitLine: {
show: false,
},
axisTick:{
show:true, //显示刻度线
},
axisLabel:{
show:true,
interval: 0 //显示所有x轴刻度
}
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#000'
}
},
min:0,
splitNumber:10,
},
series: [
{
name:'AQI最大值',
type:'line',
data:{{ y1DataM }},
symbol:'rect', //节点图案
symbolSize:10,
itemStyle: {
normal: {
color: '#c0504d',
}
}
},
{
name:'AQI最小值',
type:'line',
data:{{ y1DataN}},
symbol:'diamond',
symbolSize:10,
itemStyle: {
normal: {
color: '#4f81bd',
}
}
},
]
};
option && myChart.setOption(option);
</script>
<!-- Data Tables -->
<script src="/static/assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/static/assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
<script src="/static/assets/scripts/datatables.demo.min.js"></script>
</body>
</html>
编写getChartData.py
from utils.query import *
from utils.getPublicData import *
from utils.error import *
from myApp.models import *
def getIndexData(defaultCity):
avgCityAqiList = list(getavgCityAqi())
avgCitySixList = list(getavgCitySix())
realSixList = querys('select * from avgCitySix where city = %s',[defaultCity],'select')[0]
yLine = list(realSixList[1:])
yLine = [round(x,1) for x in yLine]
print(yLine)
xLine = ['PM2.5','PM10','So2','No2','Co','O3']
print(avgCitySixList[0])
xBar = [x[0] for x in avgCityAqiList]
yBar = [round(x[1],0) for x in avgCityAqiList]
# xLine = [x[0] for x in avgCitySixList]
# yLine = [round(float(x[1]),1) for x in avgCitySixList]
print(xBar,yBar,xLine,yLine)
return xBar,yBar,xLine,yLine
def changePassword(passwordInfo,userInfo):
oldPwd = passwordInfo['oldPwd']
newPwd = passwordInfo['newPwd']
ckdPwd = passwordInfo['ckdPwd']
user = User.objects.get(username=userInfo.username)
if user.password != oldPwd:
return '原密码错误，请输入正确信息'
else:
if newPwd != ckdPwd:
return '密码确认失败!'
else:
user.password = newPwd
user.save()
def getYearChartData(city):
maxCityAqiList = querys('select * from maxCityAqi where city = %s',[city],'select')
# maxCityData = getmaxCityAqi()
print(maxCityAqiList[0])
y1DataM = [x[3] for x in maxCityAqiList]
y1DataN = [x[4] for x in maxCityAqiList]
print(y1DataM,y1DataN)
xData = []
for i in range(1,13):
xData.append(str(i) + '月')
print(xData)
avgCityPMList = querys('select * from avgCityPM where city = %s',[city],'select')
print(avgCityPMList[0])
y2Data2 = [round(x[3],1) for x in avgCityPMList]
y2Data10 = [round(x[4],1) for x in avgCityPMList]
return xData,y1DataM,y1DataN,y2Data2,y2Data10
刷新页面可以看到：
11月度分析
新建airMonthChart.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据可视化分析系统</title>
<!-- Main Styles -->
<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
<!-- Material Design Icon -->
<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<!-- Waves Effect -->
<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
<!-- Sweet Alert -->
<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
<!-- Morris Chart -->
<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
<!-- FullCalendar -->
<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
<link rel="stylesheet" href="/static/assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/static/assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
</head>
<body>
<header class="fixed-header">
<div class="header-top">
<div class="container">
<div class="pull-left">
<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
</div>
<!-- /.pull-left -->
<div class="pull-right">
<div class="ico-item hidden-on-desktop">
<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
</div>
<!-- /.ico-item hidden-on-desktop -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
<!-- /.searchform -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
<div id="message-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
<span class="name">Harry Halen</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Thomas Taylor</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
<span class="name">Helen Candy</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Anna Cavan</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 hour ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-success"><i class="fa fa-user"></i></span>
<span class="name">Jenny Betty</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 day ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
<span class="name">Denise Peterson</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 year ago</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#message-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Your Notifications</h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
<span class="name">Anna William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
<span class="name">Update Status</span>
<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
<span class="name">Michael Zenaty</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">50 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Simon</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">1 hour</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
<span class="name">Account Contact Change</span>
<span class="desc">A contact detail associated with your account has been changed.</span>
<span class="time">2 hours</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
<span class="name">Helen 987</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Yesterday</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Denise Jenny</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">Oct, 28</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
<span class="name">Thomas William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Oct, 27</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#notification-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
<div id="user-status" class="user-status js__toggle">
<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
<h5 class="position">用户</h5>
<!-- /.name -->
<div class="control-items">
<!-- <div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
</div>
<!-- /.control-items -->
</div>
<!-- /#user-status -->
</div>
<!-- /.ico-item -->
</div>
<!-- /.pull-right -->
</div>
<!-- /.container -->
</div>
<!-- /.header-top -->
<nav class="nav-horizontal">
<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
<div class="container">
<ul class="menu">
<li class="current">
<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
<ul class="sub-menu mega mega-3">
<li class="has-sub">
<h3 class="title">Components</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
<li><a href="ui-components.html">UI Components</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Icons</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
<li><a href="icons-fontello.html">Fontello</a></li>
<li><a href="icons-material-icons.html">Material Design Icons</a></li>
<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
<li><a href="icons-themify-icons.html">Themify Icons</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-range-slider.html">Range Slider</a></li>
<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
<li><a href="ui-treeview.html">Tree view</a></li>
<li><a href="ui-typography.html">Typography</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
<ul class="sub-menu single">
<li><a href="chart-3d.html">3D Charts</a></li>
<li><a href="chart-chartist.html">Chartist Charts</a></li>
<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-knob.html">Knob Chart</a></li>
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
<li><a href="chart-other.html">Other Chart</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
<ul class="sub-menu single">
<li><a href="form-elements.html">General Elements</a></li>
<li><a href="form-advanced.html">Advanced Form</a></li>
<li><a href="form-fileupload.html">Form Uploads</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
<li><a href="form-xeditable.html">X-editable</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
<ul class="sub-menu single">
<li><a href="page-starter.html">Starter Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="page-register.html">Register</a></li>
<li><a href="page-recoverpw.html">Recover Password</a></li>
<li><a href="page-lock-screen.html">Lock Screen</a></li>
<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
<li><a href="page-404.html">Error 404</a></li>
<li><a href="page-500.html">Error 500</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
<ul class="sub-menu single">
<li><a href="extras-contact.html">Contact list</a></li>
<li><a href="extras-email-template.html">Email template</a></li>
<li><a href="extras-faq.html">FAQ</a></li>
<li><a href="extras-gallery.html">Gallery</a></li>
<li><a href="extras-invoice.html">Invoice</a></li>
<li><a href="extras-maps.html">Maps</a></li>
<li><a href="extras-pricing.html">Pricing</a></li>
<li><a href="extras-projects.html">Projects</a></li>
<li><a href="extras-taskboard.html">Taskboard</a></li>
<li><a href="extras-timeline.html">Timeline</a></li>
<li><a href="extras-tour.html">Tour</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
<ul class="sub-menu mega mega-2">
<li class="has-sub">
<h3 class="title">Tables</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="calendar.html">Calendar</a></li>
<li><a href="ui-notification.html">Notification</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="widgets.html">Widgets</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
</li>
</ul>
<!-- /.menu -->
</div>
<!-- /.container -->
</nav>
<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
<div id="wrapper">
<div class="main-content container">
<div class="row small-spacing">
<!-- <div class="col-xs-12">-->
<!-- /.box-content -->
</div>
<!-- /.col-xs-12 -->
<div class="col-lg-12 ol-xs-12">
<div class="box-content card white">
<h4 class="box-title">条件选择</h4>
<!-- /.box-title -->
<div class="card-content">
<form action="/myApp/airMonthChart/" method="POST">
<div class="row small-spacing">
<div class="col-xs-2">
<select class="form-control" name="defaultYear">
{% for i in yearList %}
{% if i == defaultYear %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}" >{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col-xs-2">
<select class="form-control" name="defaultMonth">
{% for i in monthList %}
{% if i == defaultMonth %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}" >{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<!-- <div class="col-xs-2">-->
<!-- <select class="form-control" name="defaultYear">-->
<!-- {% for i in yearList %}-->
<!-- {% if i == defaultYear %}-->
<!-- <option value="{{ i }}" selected>{{ i }}</option>-->
<!-- {% else %}-->
<!-- <option value="{{ i }}" >{{ i }}</option>-->
<!-- {% endif %}-->
<!-- {% endfor %}-->
<!-- </select>-->
<!-- </div>-->
<div class="col-xs-2">
<select class="form-control" name="defaultCity">
{% for i in cityList %}
{% if i == defaultCity %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}" >{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col-xs-3">
<button type="submit" class="btn btn-primary waves-effect waves-light">查看</button>
</div>
</div>
</form>
<!-- /.input-group -->
<!-- /.input-group -->
</div>
<!-- /.card-content -->
</div>
<!-- /.box-content card white -->
</div>
<!-- /.box-content -->
<!-- /.col-lg-4 col-xs-12 -->
<div class="col-lg-12 col col-xs-12">
<div class="box-content">
<h4 class="box-title text-info">{{ defaultCity }}{{ defaultMonth }}月 AQI值 排名</h4>
<!-- /.box-title -->
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<div id="mainB" style="width: 100%;height: 450px"></div>
<!-- <div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!-- <!– /#traffic-sparkline-chart-2 –>-->
<!-- <div class="right-content">-->
<!-- <h2 class="counter text-success">36%</h2>-->
<!-- <!– /.counter –>-->
<!-- <p class="text text-success">Some text here</p>-->
<!-- <!– /.text –>-->
<!-- </div>-->
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
</div>
<div class="col-lg-6 col col-xs-12">
<div class="box-content">
<h4 class="box-title text-info">{{ defaultCity }}空气质量优秀天数分析</h4>
<!-- /.box-title -->
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<div id="mainC" style="width: 100%;height: 450px"></div>
<!-- <div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!-- <!– /#traffic-sparkline-chart-2 –>-->
<!-- <div class="right-content">-->
<!-- <h2 class="counter text-success">36%</h2>-->
<!-- <!– /.counter –>-->
<!-- <p class="text text-success">Some text here</p>-->
<!-- <!– /.text –>-->
<!-- </div>-->
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
</div>
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-6 col-xs-12 -->
</div>
<!-- /.row -->
<!-- /.row -->
<!-- <footer class="footer bottom-right">-->
<!-- <ul class="list-inline">-->
<!-- <li>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></li>-->
<!-- <li><a href="#">Privacy</a></li>-->
<!-- <li><a href="#">Terms</a></li>-->
<!-- <li><a href="#">Help</a></li>-->
<!-- </ul>-->
<!-- </footer>-->
</div>
<!-- /.main-content -->
</div><!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/assets/script/html5shiv.min.js"></script>
<script src="/static/assets/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/assets/scripts/jquery.min.js"></script>
<script src="/static/assets/scripts/modernizr.min.js"></script>
<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="/static/assets/plugin/waves/waves.min.js"></script>
<!-- Morris Chart -->
<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
<!-- Flot Chart -->
<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
<!-- Sparkline Chart -->
<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
<!-- FullCalendar -->
<script src="/static/assets/plugin/moment/moment.js"></script>
<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
<script src="/static/assets/scripts/fullcalendar.init.js"></script>
<script src="/static/assets/scripts/main.min.js"></script>
<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
<script src="/static/assets/echarts.js"></script>
<script>
var chartDom = document.getElementById('mainC');
var myChart = echarts.init(chartDom);
var option;
// 绘制左侧面
option = {
backgroundColor: "#ffffff",
color: ["#37A2DA", "#32C5E9", "#67E0E3", "#9FE6B8","#FFDB5C",],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
calculable: true,
series: [
{
name:'漏斗图',
type:'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 31,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
normal: {
show: true,
position: 'inside'
},
emphasis: {
textStyle: {
fontSize: 20
}
}
},
labelLine: {
normal: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
}
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1
}
},
data: {{ funnelData | safe }}
}
]
};
option && myChart.setOption(option);
</script>
<script>
var chartDom = document.getElementById('mainB');
var myChart = echarts.init(chartDom);
var option;
// 绘制左侧面
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
backgroundColor: 'rgba(9, 24, 48, 0.5)',
borderColor: 'rgba(75, 253, 238, 0.4)',
textStyle: {
color: '#CFE3FC',
},
},
legend: [
{
data: ['当天AQI排名'],
top: '0',
x: '0',
itemWidth: 8,
borderColor: 'rgba(255, 192, 0, 1)',
textStyle: {
color: 'rgba(0,0,0,.4)',
fontSize: 12
},
icon:'circle'
},
{
data: ['办结量(个)'],
top: '0',
x: '15%',
itemWidth: 8,
textStyle: {
color: 'rgba(0,0,0,.4)',
fontSize: 12
},
icon:'circle'
},
{
data: ['AQI值'],
top: '0',
x: '30%',
itemStyle: {
borderWidth: 2
},
textStyle: {
color: 'rgba(0,0,0,.4)',
fontSize: 12
},
itemWidth: 15,
itemHeight: 8,
}
],
grid: {
left: '20px',
right: '20px',
top: '70px',
bottom: '30px',
containLabel: true
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center'
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisTick: {
show: false
},
data: {{ xData | safe }},
axisLine: {
show:false,
lineStyle: {
color: 'rgba(0, 0, 0, 0.2)'
}
},
axisLabel: {
interval: 0,
color: 'rgba(0, 0, 0, 1)',
fontSize: 14
}
}
],
yAxis: [
{
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(0, 0, 0, 0.2)'
},
symbol: ['none', 'arrow'],
symbolSize: [5, 12],
symbolOffset: [0, 10]
},
// max: 100,
axisLabel: {
interval: 0,
color: 'rgba(54,58,68,0.70)',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(0, 0, 0, 0.2)',
width: 1,
type: 'solid'
}
}
},
{
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(207, 227, 252, 1)'
},
symbol: ['none', 'arrow'],
symbolSize: [5, 12],
symbolOffset: [0, 10]
},
min: 0,
// max: 100,
axisLabel: {
interval: 0,
color: 'rgba(54,58,68,0.70)',
fontSize: 14,
formatter: '{value} '
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(39, 57, 75, 1)',
width: 1,
type: 'solid'
}
}
}
],
series: [
{
name: 'AQI值',
yAxisIndex: 1,
type: 'line',
smooth: true,
showSymbol:false,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(32,128,247,.4)'
},
{
offset: 1,
color: 'rgba(32,128,247,0)'
}
])
},
data: {{ y1Data | safe}},
symbol: 'circle',
symbolSize: 8,
itemStyle: {
normal: {
color: '#2080F7',
borderColor: '#2080F7',
lineStyle: {
color: '#2080F7'
}
}
},
},
{
z:2,
type: 'bar',
yAxisIndex: 0,
name: '当天AQI排名',
itemStyle: {
normal: {
color: '#2080F7'
}
},
barWidth: 24,
data: {{ y2Data | safe }}
},
]
}
option && myChart.setOption(option);
</script>
<!-- Data Tables -->
<script src="/static/assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/static/assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
<script src="/static/assets/scripts/datatables.demo.min.js"></script>
</body>
</html>编写getChartData.py
from utils.query import *
from utils.getPublicData import *
from utils.error import *
from myApp.models import *
def getIndexData(defaultCity):
avgCityAqiList = list(getavgCityAqi())
avgCitySixList = list(getavgCitySix())
realSixList = querys('select * from avgCitySix where city = %s',[defaultCity],'select')[0]
yLine = list(realSixList[1:])
yLine = [round(x,1) for x in yLine]
print(yLine)
xLine = ['PM2.5','PM10','So2','No2','Co','O3']
print(avgCitySixList[0])
xBar = [x[0] for x in avgCityAqiList]
yBar = [round(x[1],0) for x in avgCityAqiList]
# xLine = [x[0] for x in avgCitySixList]
# yLine = [round(float(x[1]),1) for x in avgCitySixList]
print(xBar,yBar,xLine,yLine)
return xBar,yBar,xLine,yLine
def changePassword(passwordInfo,userInfo):
oldPwd = passwordInfo['oldPwd']
newPwd = passwordInfo['newPwd']
ckdPwd = passwordInfo['ckdPwd']
user = User.objects.get(username=userInfo.username)
if user.password != oldPwd:
return '原密码错误，请输入正确信息'
else:
if newPwd != ckdPwd:
return '密码确认失败!'
else:
user.password = newPwd
user.save()
def getYearChartData(city):
maxCityAqiList = querys('select * from maxCityAqi where city = %s',[city],'select')
# maxCityData = getmaxCityAqi()
print(maxCityAqiList[0])
y1DataM = [x[3] for x in maxCityAqiList]
y1DataN = [x[4] for x in maxCityAqiList]
print(y1DataM,y1DataN)
xData = []
for i in range(1,13):
xData.append(str(i) + '月')
print(xData)
avgCityPMList = querys('select * from avgCityPM where city = %s',[city],'select')
print(avgCityPMList[0])
y2Data2 = [round(x[3],1) for x in avgCityPMList]
y2Data10 = [round(x[4],1) for x in avgCityPMList]
return xData,y1DataM,y1DataN,y2Data2,y2Data10
def getAirMonthData(city,month):
airDataList = querys('select * from airdata where city = %s and SUBSTRING(date,6,2) = %s',[city,month],'select')
# print(airDataList[0])
y1Data = [x[3] for x in airDataList]
y2Data = [int(x[4]) for x in airDataList]
dateList = [x[1] for x in airDataList]
xData = []
for date in dateList:
year, month, day = date.split('-')
xData.append(day)
print(111,xData,y1Data,y2Data)
print(y1Data)
print(y2Data)
greatAirList = querys('select * from greatAir where city = %s ',[city],'select')
print(greatAirList[1])
funnelData = []
for i in greatAirList:
funnelData.append({
'name':str(i[2]) + '月',
'value':i[3]
})
print(funnelData)
return xData,y1Data,y2Data,funnelData
刷新页面可得到：
12气体分析
新建airChart.html，编写代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据可视化分析系统</title>
<!-- Main Styles -->
<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
<!-- Material Design Icon -->
<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<!-- Waves Effect -->
<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
<!-- Sweet Alert -->
<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
<!-- Morris Chart -->
<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
<!-- FullCalendar -->
<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
<link rel="stylesheet" href="/static/assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/static/assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
</head>
<body>
<header class="fixed-header">
<div class="header-top">
<div class="container">
<div class="pull-left">
<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
</div>
<!-- /.pull-left -->
<div class="pull-right">
<div class="ico-item hidden-on-desktop">
<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
</div>
<!-- /.ico-item hidden-on-desktop -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
<!-- /.searchform -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
<div id="message-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
<span class="name">Harry Halen</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Thomas Taylor</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
<span class="name">Helen Candy</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Anna Cavan</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 hour ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-success"><i class="fa fa-user"></i></span>
<span class="name">Jenny Betty</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 day ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
<span class="name">Denise Peterson</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 year ago</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#message-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Your Notifications</h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
<span class="name">Anna William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
<span class="name">Update Status</span>
<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
<span class="name">Michael Zenaty</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">50 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Simon</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">1 hour</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
<span class="name">Account Contact Change</span>
<span class="desc">A contact detail associated with your account has been changed.</span>
<span class="time">2 hours</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
<span class="name">Helen 987</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Yesterday</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Denise Jenny</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">Oct, 28</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
<span class="name">Thomas William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Oct, 27</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#notification-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
<div id="user-status" class="user-status js__toggle">
<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
<h5 class="position">用户</h5>
<!-- /.name -->
<div class="control-items">
<!-- <div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
</div>
<!-- /.control-items -->
</div>
<!-- /#user-status -->
</div>
<!-- /.ico-item -->
</div>
<!-- /.pull-right -->
</div>
<!-- /.container -->
</div>
<!-- /.header-top -->
<nav class="nav-horizontal">
<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
<div class="container">
<ul class="menu">
<li class="current">
<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
<ul class="sub-menu mega mega-3">
<li class="has-sub">
<h3 class="title">Components</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
<li><a href="ui-components.html">UI Components</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Icons</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
<li><a href="icons-fontello.html">Fontello</a></li>
<li><a href="icons-material-icons.html">Material Design Icons</a></li>
<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
<li><a href="icons-themify-icons.html">Themify Icons</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-range-slider.html">Range Slider</a></li>
<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
<li><a href="ui-treeview.html">Tree view</a></li>
<li><a href="ui-typography.html">Typography</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
<ul class="sub-menu single">
<li><a href="chart-3d.html">3D Charts</a></li>
<li><a href="chart-chartist.html">Chartist Charts</a></li>
<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-knob.html">Knob Chart</a></li>
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
<li><a href="chart-other.html">Other Chart</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
<ul class="sub-menu single">
<li><a href="form-elements.html">General Elements</a></li>
<li><a href="form-advanced.html">Advanced Form</a></li>
<li><a href="form-fileupload.html">Form Uploads</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
<li><a href="form-xeditable.html">X-editable</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
<ul class="sub-menu single">
<li><a href="page-starter.html">Starter Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="page-register.html">Register</a></li>
<li><a href="page-recoverpw.html">Recover Password</a></li>
<li><a href="page-lock-screen.html">Lock Screen</a></li>
<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
<li><a href="page-404.html">Error 404</a></li>
<li><a href="page-500.html">Error 500</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
<ul class="sub-menu single">
<li><a href="extras-contact.html">Contact list</a></li>
<li><a href="extras-email-template.html">Email template</a></li>
<li><a href="extras-faq.html">FAQ</a></li>
<li><a href="extras-gallery.html">Gallery</a></li>
<li><a href="extras-invoice.html">Invoice</a></li>
<li><a href="extras-maps.html">Maps</a></li>
<li><a href="extras-pricing.html">Pricing</a></li>
<li><a href="extras-projects.html">Projects</a></li>
<li><a href="extras-taskboard.html">Taskboard</a></li>
<li><a href="extras-timeline.html">Timeline</a></li>
<li><a href="extras-tour.html">Tour</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
<ul class="sub-menu mega mega-2">
<li class="has-sub">
<h3 class="title">Tables</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="calendar.html">Calendar</a></li>
<li><a href="ui-notification.html">Notification</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="widgets.html">Widgets</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
</li>
</ul>
<!-- /.menu -->
</div>
<!-- /.container -->
</nav>
<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
<div id="wrapper">
<div class="main-content container">
<div class="row small-spacing">
<!-- <div class="col-xs-12">-->
<!-- /.box-content -->
</div>
<!-- /.col-xs-12 -->
<!-- /.box-content -->
<!-- /.col-lg-4 col-xs-12 -->
<div class="col-lg-12 col col-xs-12">
<div class="box-content">
<h4 class="box-title text-info">城市SO2 NO2 Max值分析</h4>
<!-- /.box-title -->
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<div id="mainB" style="width: 100%;height: 450px"></div>
<!-- <div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!-- <!– /#traffic-sparkline-chart-2 –>-->
<!-- <div class="right-content">-->
<!-- <h2 class="counter text-success">36%</h2>-->
<!-- <!– /.counter –>-->
<!-- <p class="text text-success">Some text here</p>-->
<!-- <!– /.text –>-->
<!-- </div>-->
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
</div>
<div class="col-lg-6 col col-xs-12">
<div class="box-content">
<h4 class="box-title text-info">一氧化碳分布分析</h4>
<!-- /.box-title -->
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<div id="mainC" style="width: 100%;height: 450px"></div>
<!-- <div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!-- <!– /#traffic-sparkline-chart-2 –>-->
<!-- <div class="right-content">-->
<!-- <h2 class="counter text-success">36%</h2>-->
<!-- <!– /.counter –>-->
<!-- <p class="text text-success">Some text here</p>-->
<!-- <!– /.text –>-->
<!-- </div>-->
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
</div>
<!-- /.col-lg-4 col-xs-12 -->
<div class="col-lg-6 col col-xs-12">
<div class="box-content">
<h4 class="box-title text-info">臭氧含量分布分析</h4>
<!-- /.box-title -->
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<div id="mainD" style="width: 100%;height: 450px"></div>
<!-- <div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!-- <!– /#traffic-sparkline-chart-2 –>-->
<!-- <div class="right-content">-->
<!-- <h2 class="counter text-success">36%</h2>-->
<!-- <!– /.counter –>-->
<!-- <p class="text text-success">Some text here</p>-->
<!-- <!– /.text –>-->
<!-- </div>-->
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
</div>
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-6 col-xs-12 -->
</div>
<!-- /.row -->
<!-- /.row -->
<!-- <footer class="footer bottom-right">-->
<!-- <ul class="list-inline">-->
<!-- <li>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></li>-->
<!-- <li><a href="#">Privacy</a></li>-->
<!-- <li><a href="#">Terms</a></li>-->
<!-- <li><a href="#">Help</a></li>-->
<!-- </ul>-->
<!-- </footer>-->
</div>
<!-- /.main-content -->
</div><!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/assets/script/html5shiv.min.js"></script>
<script src="/static/assets/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/assets/scripts/jquery.min.js"></script>
<script src="/static/assets/scripts/modernizr.min.js"></script>
<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="/static/assets/plugin/waves/waves.min.js"></script>
<!-- Morris Chart -->
<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
<!-- Flot Chart -->
<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
<!-- Sparkline Chart -->
<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
<!-- FullCalendar -->
<script src="/static/assets/plugin/moment/moment.js"></script>
<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
<script src="/static/assets/scripts/fullcalendar.init.js"></script>
<script src="/static/assets/scripts/main.min.js"></script>
<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
<script src="/static/assets/echarts.js"></script>
<script>
var chartDom = document.getElementById('mainD');
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 150],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: {{ O3CategoryData | safe }}
}
]
};
option && myChart.setOption(option);
</script>
<script>
var chartDom = document.getElementById('mainC');
var myChart = echarts.init(chartDom);
var option;
// 绘制左侧面
let index = 0;
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
function fun() {
var timer = setInterval(function() {
myChart.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
});
// 显示提示框
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index
});
// 取消高亮指定的数据图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index == 0? 5 : index -1
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index
});
index++;
if (index > 5) {
index = 0;
}
},3000)
}
fun()
setTimeout(function() {fun()}, 5000);
option = {
title: {
text: 'CO分布',
x: 'center',
y: 'center',
textStyle: {
fontSize: 20
}
},
tooltip: {
trigger: 'item'
},
series: [{
type: 'pie',
center: ['50%', '50%'],
radius: ['24%', '45%'],
clockwise: true,
avoidLabelOverlap: true,
hoverOffset: 15,
itemStyle: {
normal: {
color: function(params) {
return colorList[params.dataIndex]
}
}
},
label: {
show: true,
position: 'outside',
formatter: '{a|{b}：{d}%}\n{hr|}',
rich: {
hr: {
/*
再次声明一下，大家在这里修改之后不要点击上面的保存！
不要点击保存！不要点击保存！重要的事情说三遍！
你的修改会覆盖我的原代码的！感谢理解！
--2020/8/4 by--suwanqing
*/
backgroundColor: 't',
borderRadius: 3,
width: 3,
height: 3,
padding: [3, 3, 0, -12]
},
a: {
padding: [-30, 15, -20, 15]
}
}
},
labelLine: {
normal: {
length: 20,
length2: 30,
lineStyle: {
width: 1
}
}
},
data: {{ COCategoryData | safe }}
}]
};
option && myChart.setOption(option);
</script>
<script>
var chartDom = document.getElementById('mainB');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
// text: 'Temperature Change in the Coming Week'
},
tooltip: {
trigger: 'axis'
},
legend: {},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: {{ xData | safe }}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} '
}
},
series: [
{
name: 'SO2',
type: 'line',
data: {{ y1Data | safe }},
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
},
{
name: 'NO2',
type: 'line',
data: {{ y2Data | safe }},
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
};
option && myChart.setOption(option);
</script>
<!-- Data Tables -->
<script src="/static/assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/static/assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
<script src="/static/assets/scripts/datatables.demo.min.js"></script>
</body>
</html>编写getChartData.py,
from utils.query import *
from utils.getPublicData import *
from utils.error import *
from myApp.models import *
def getIndexData(defaultCity):
avgCityAqiList = list(getavgCityAqi())
avgCitySixList = list(getavgCitySix())
realSixList = querys('select * from avgCitySix where city = %s',[defaultCity],'select')[0]
yLine = list(realSixList[1:])
yLine = [round(x,1) for x in yLine]
print(yLine)
xLine = ['PM2.5','PM10','So2','No2','Co','O3']
print(avgCitySixList[0])
xBar = [x[0] for x in avgCityAqiList]
yBar = [round(x[1],0) for x in avgCityAqiList]
# xLine = [x[0] for x in avgCitySixList]
# yLine = [round(float(x[1]),1) for x in avgCitySixList]
print(xBar,yBar,xLine,yLine)
return xBar,yBar,xLine,yLine
def changePassword(passwordInfo,userInfo):
oldPwd = passwordInfo['oldPwd']
newPwd = passwordInfo['newPwd']
ckdPwd = passwordInfo['ckdPwd']
user = User.objects.get(username=userInfo.username)
if user.password != oldPwd:
return '原密码错误，请输入正确信息'
else:
if newPwd != ckdPwd:
return '密码确认失败!'
else:
user.password = newPwd
user.save()
def getYearChartData(city):
maxCityAqiList = querys('select * from maxCityAqi where city = %s',[city],'select')
# maxCityData = getmaxCityAqi()
print(maxCityAqiList[0])
y1DataM = [x[3] for x in maxCityAqiList]
y1DataN = [x[4] for x in maxCityAqiList]
print(y1DataM,y1DataN)
xData = []
for i in range(1,13):
xData.append(str(i) + '月')
print(xData)
avgCityPMList = querys('select * from avgCityPM where city = %s',[city],'select')
print(avgCityPMList[0])
y2Data2 = [round(x[3],1) for x in avgCityPMList]
y2Data10 = [round(x[4],1) for x in avgCityPMList]
return xData,y1DataM,y1DataN,y2Data2,y2Data10
def getAirMonthData(city,month):
airDataList = querys('select * from airdata where city = %s and SUBSTRING(date,6,2) = %s',[city,month],'select')
# print(airDataList[0])
y1Data = [x[3] for x in airDataList]
y2Data = [int(x[4]) for x in airDataList]
dateList = [x[1] for x in airDataList]
xData = []
for date in dateList:
year, month, day = date.split('-')
xData.append(day)
print(111,xData,y1Data,y2Data)
print(y1Data)
print(y2Data)
greatAirList = querys('select * from greatAir where city = %s ',[city],'select')
print(greatAirList[1])
funnelData = []
for i in greatAirList:
funnelData.append({
'name':str(i[2]) + '月',
'value':i[3]
})
print(funnelData)
return xData,y1Data,y2Data,funnelData
def getAirChartData():
maxSNList = list(getmaxSN())
COCategoryList = list(getCOCategory())
O3CategoryList = list(getO3Category())
print(maxSNList[0])
print(COCategoryList[0])
print(O3CategoryList[0])
xData = [x[0] for x in maxSNList]
y1Data = [x[1] for x in maxSNList]
y2Data = [x[2] for x in maxSNList]
print(xData,y1Data,y2Data)
COCategoryData = []
O3CategoryData = []
for i in COCategoryList:
COCategoryData.append({
'name':i[0],
'value':i[1]
})
for i in O3CategoryList:
O3CategoryData.append({
'name':i[0],
'value':i[1]
})
print(COCategoryData,O3CategoryData)
return xData,y1Data,y2Data,COCategoryData,O3CategoryData刷新页面可看到：
13城市分析
新建cityChart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据可视化分析系统</title>
<!--n>
</div>
</div>
</form>
<!-- /.input-group -->
<!-- /.input-group -->
</div>
<!-- /.card-content -->
</div>
<!-- /.box-content card white -->
</div>
<!-- /.box-content -->
<!-- /.col-lg-4 col-xs-12 -->
<div class="col-lg-12 col col-xs-12">
<div class="box-content">
<h4 class="box-title text-info">{{ defaultMonth }}月 城市AQI均值分布</h4>
<!-- /.box-title -->
<!-- /.dropdown js__dropdown -->
<div class="content widget-stat">
<div id="mainB" style="width: 100%;height: 450px"></div>
<!-- <div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!-- <!– /#traffic-sparkline-chart-2 –>-->
<!-- <div class="right-content">-->
<!-- <h2 class="counter text-success">36%</h2>-->
<!-- <!– /.counter –>-->
<!-- <p class="text text-success">Some text here</p>-->
<!-- <!– /.text –>-->
<!-- </div>-->
<!-- .right-content -->
</div>
<!-- /.content widget-stat -->
</div>
</div>
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-4 col-xs-12 -->
<!-- /.col-lg-6 col-xs-12 -->
</div>
<!-- /.row -->
<!-- /.row -->
<!-- <footer class="footer bottom-right">-->
<!-- <ul class="list-inline">-->
<!-- <li>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></li>-->
<!-- <li><a href="#">Privacy</a></li>-->
<!-- <li><a href="#">Terms</a></li>-->
<!-- <li><a href="#">Help</a></li>-->
<!-- </ul>-->
<!-- </footer>-->
</div>
<!-- /.main-content -->
</div><!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/assets/script/html5shiv.min.js"></script>
<script src="/static/assets/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/assets/scripts/jquery.min.js"></script>
<script src="/static/assets/scripts/modernizr.min.js"></script>
<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="/static/assets/plugin/waves/waves.min.js"></script>
<!-- Morris Chart -->
<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
<!-- Flot Chart -->
<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
<!-- Sparkline Chart -->
<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
<!-- FullCalendar -->
<script src="/static/assets/plugin/moment/moment.js"></script>
<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
<script src="/static/assets/scripts/fullcalendar.init.js"></script>
<script src="/static/assets/scripts/main.min.js"></script>
<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
<script src="/static/assets/echarts.js"></script>
<script src="/static/assets/china.js"></script>
<script>
var myChart = echarts.init(document.getElementById('mainB'));
var data ={{ mapData |safe }}
// 3.2 指定图表的配置项和数据
var geoCoordMap = {
阿克苏地区: [80.260604, 41.168779],
和田地区: [79.922211, 37.114157],
上海: [121.480237, 31.236305],
东莞: [113.758231, 23.026997],
东营: [118.588614, 37.454925],
中山: [113.399023, 22.522262],
临汾: [111.526153, 36.094052],
临沂: [118.36299, 35.110531],
丹东: [124.362564, 40.00569],
丽水: [119.929503, 28.472979],
乌鲁木齐: [87.623314, 43.832806],
佛山: [113.128432, 23.027707],
保定: [115.471052, 38.880055],
兰州: [103.840692, 36.067312],
包头: [109.846755, 40.663636],
北京: [116.413554, 39.911013],
北海: [109.126614, 21.486955],
南京: [118.802891, 32.064735],
南宁: [108.373351, 22.823037],
南昌: [115.864528, 28.687675],
南通: [120.900301, 31.985237],
厦门: [118.095915, 24.485821],
台州: [121.426996, 28.662297],
合肥: [117.235447, 31.82687],
呼和浩特: [111.758518, 40.847461],
咸阳: [108.715712, 34.335599],
哈尔滨: [126.542417, 45.807782],
唐山: [118.187036, 39.636673],
嘉兴: [120.762045, 30.750912],
大同: [113.306446, 40.082539],
大连: [121.621391, 38.919345],
天津: [117.205914, 39.090908],
太原: [112.55706, 37.876885],
威海: [122.128245, 37.519322],
宁波: [121.556686, 29.880177],
宝鸡: [107.243899, 34.367747],
宿迁: [118.282062, 33.967686],
常州: [119.980142, 31.816791],
广州: [113.270793, 23.135308],
廊坊: [116.69034, 39.54352],
延安: [109.496361, 36.591003],
张家口: [114.894165, 40.830172],
徐州: [117.29235, 34.210143],
德州: [116.365825, 37.441313],
惠州: [114.423348, 23.116409],
成都: [104.071216, 30.576279],
扬州: [119.419107, 32.39986],
承德: [117.969798, 40.957855],
拉萨: [91.121025, 29.650088],
无锡: [120.318954, 31.496704],
日照: [119.533606, 35.422798],
昆明: [102.839667, 24.885953],
杭州: [120.161693, 30.280059],
枣庄: [117.328513, 34.816569],
柳州: [109.42198, 24.331519],
株洲: [113.140431, 27.833737],
武汉: [114.311831, 30.598428],
汕头: [116.688739, 23.359289],
江门: [113.088165, 22.584459],
沈阳: [123.438973, 41.811339],
沧州: [116.845272, 38.31022],
河源: [114.707097, 23.749829],
泉州: [118.682316, 24.880242],
泰安: [117.094893, 36.205905],
泰州: [119.932115, 32.4612],
济南: [117.001319, 36.671627],
济宁: [116.593852, 35.420269],
海口: [110.206424, 20.050057],
淄博: [118.061254, 36.819182],
淮安: [119.022429, 33.616272],
深圳: [114.066112, 22.548515],
清远: [113.062619, 23.688238],
温州: [120.705869, 28.001095],
渭南: [109.516739, 34.505687],
湖州: [120.094566, 30.899015],
湘潭: [112.950575, 27.83585],
滨州: [117.9792, 37.388387],
潍坊: [119.168138, 36.713212],
烟台: [121.454425, 37.469868],
玉溪: [102.5537, 24.357512],
珠海: [113.583235, 22.276392],
盐城: [120.168187, 33.355301],
盘锦: [122.077269, 41.125939],
石家庄: [114.520828, 38.048684],
福州: [119.302938, 26.080447],
秦皇岛: [119.606184, 39.941259],
绍兴: [120.586673, 30.036519],
聊城: [115.992077, 36.462681],
肇庆: [112.47177, 23.052984],
舟山: [122.214339, 29.991092],
苏州: [120.589613, 31.304566],
莱芜: [117.683221, 36.219357],
菏泽: [115.487696, 35.239435],
营口: [122.241475, 40.672565],
葫芦岛: [120.843388, 40.717364],
衡水: [115.676942, 37.745166],
衢州: [118.880768, 28.941661],
西宁: [101.784269, 36.623477],
西安: [108.946306, 34.347436],
贵阳: [106.636816, 26.652747],
连云港: [119.229571, 34.602342],
邢台: [114.510889, 37.076646],
邯郸: [114.545808, 36.631222],
郑州: [113.631349, 34.753488],
鄂尔多斯: [109.787314, 39.61463],
重庆: [106.557165, 29.570997],
金华: [119.654027, 29.084455],
铜川: [108.951558, 34.902957],
银川: [106.238976, 38.492392],
镇江: [119.431494, 32.195688],
长春: [125.33017, 43.82178],
长沙: [112.945333, 28.233971],
长治: [113.123046, 36.201585],
阳泉: [113.587087, 37.86234],
青岛: [120.389445, 36.072358],
韶关: [113.603757, 24.816174],
九江: [116.007993, 29.711328],
大庆: [125.109727, 46.593216],
宁德: [119.554701, 26.671748],
忻州: [112.740804, 38.422382],
石嘴山: [106.39078, 38.989783],
池州: [117.497839, 30.67098],
淮南: [117.006189, 32.631837],
吐鲁番地区: [89.196029, 42.957303],
宜昌: [111.292971, 30.697602],
景德镇: [117.184967, 29.274337],
安庆: [117.070127, 30.548594],
怒江傈僳族自治州: [98.863189, 25.823736],
白城: [122.845302, 45.6254],
萍乡: [113.86077, 27.62897],
抚州: [116.364627, 27.953603],
朝阳: [120.457301, 41.579487],
海东: [102.003965, 36.406412],
湘西土家族苗族自治州: [109.745507, 28.317399],
鹰潭: [117.075765, 28.265879],
阿拉善盟: [105.735357, 38.857806],
大阪府: [0, 0],
鹤岗: [130.304284, 47.356043],
吴忠: [106.205161, 38.003863],
石河子: [86.085507, 44.312423],
开封: [114.313904, 34.802941],
延边朝鲜族自治州: [129.515602, 42.897211],
白银: [104.144182, 36.550821],
吕梁: [111.148086, 37.525476],
随州: [113.389071, 31.696341],
雅安: [103.04636, 30.021277],
平顶山: [113.198935, 33.772051],
阜新: [121.676518, 42.027983],
普洱: [100.98114, 22.788486],
三亚: [109.518646, 18.258217],
赣州: [114.94126, 25.837179],
广元: [105.849993, 32.441808],
锦州: [121.133631, 41.100869],
南充: [106.117231, 30.843297],
衡阳: [112.578397, 26.899517],
齐齐哈尔: [123.924531, 47.360087],
兴安盟: [122.044544, 46.088444],
乌海: [106.80185, 39.660154],
楚雄彝族自治州: [101.534082, 25.051226],
伊春: [128.84704, 47.733329],
陇南: [104.928233, 33.406825],
荆门: [112.205843, 31.041792],
辽源: [125.150107, 42.8943],
怀化: [110.008116, 27.575595],
牡丹江: [129.638976, 44.558647],
黄南藏族自治州: [102.021495, 35.526125],
湛江: [110.365494, 21.277163],
天水: [105.731276, 34.587162],
黔东南苗族侗族自治州: [107.990602, 26.589858],
云浮: [112.051045, 22.921154],
安康: [109.03592, 32.690575],
日喀则地区: [88.956063, 29.26816],
海北藏族自治州: [100.907395, 36.960702],
海西蒙古族藏族自治州: [97.377823, 37.382839],
吉安: [115.00027, 27.119751],
黄石: [115.045433, 30.205336],
宿州: [116.970454, 33.652034],
茂名: [110.931773, 21.669051],
阳江: [111.989051, 21.864421],
信阳: [114.099264, 32.153186],
三门峡: [111.206832, 34.778442],
咸宁: [114.328967, 29.847123],
许昌: [113.858804, 34.041737],
保山: [99.168373, 25.117882],
鹤壁: [114.304044, 35.752656],
运城: [111.013379, 35.032587],
达州: [107.474504, 31.214347],
常德: [111.704994, 29.037723],
酒泉: [98.500427, 39.738615],
马鞍山: [118.512691, 31.67633],
南阳: [112.535009, 32.996701],
邵阳: [111.474133, 27.245167],
黔南布依族苗族自治州: [107.528663, 26.260586],
孝感: [113.922962, 30.930712],
安顺: [105.952622, 26.259904],
辽阳: [123.243726, 41.274452],
黔西南布依族苗族自治州: [104.910858, 25.095974],
克拉玛依: [84.89587, 45.585765],
庆阳: [107.649305, 35.716096],
呼伦贝尔: [119.77221, 49.217977],
六盘水: [104.836786, 26.599086],
新余: [114.923664, 27.823541],
七台河: [131.009618, 45.776512],
商丘: [115.662798, 34.420378],
漯河: [114.02323, 33.587703],
乌兰察布: [113.140223, 40.999972],
潜江: [112.905773, 30.407633],
定西: [104.631662, 35.587354],
鸡西: [130.976161, 45.300906],
汕尾: [115.381693, 22.791322],
四平: [124.356844, 43.172447],
西双版纳傣族自治州: [100.803836, 22.013792],
遂宁: [105.599152, 30.539156],
商洛: [109.94688, 33.876525],
海南藏族自治州: [100.626831, 36.292132],
文山壮族苗族自治州: [104.221606, 23.404187],
六安: [116.529651, 31.741226],
张家界: [110.484925, 29.122477],
潮州: [116.62943, 23.662923],
蚌埠: [117.395835, 32.921498],
桂林: [110.296442, 25.279893],
甘南藏族自治州: [102.917605, 34.98901],
驻马店: [114.029465, 33.017546],
林芝地区: [94.368109, 29.654792],
百色: [106.624969, 23.907845],
鞍山: [123.000974, 41.114122],
郴州: [113.021311, 25.776711],
巴中: [106.753912, 31.872851],
恩施土家族苗族自治州: [109.494763, 30.277908],
十堰: [110.80454, 32.635042],
临沧: [100.10566, 23.914336],
泸州: [105.449092, 28.877577],
平凉: [106.671741, 35.549266],
宣城: [118.765196, 30.946576],
绵阳: [104.686164, 31.473364],
佳木斯: [130.32696, 46.806581],
遵义: [106.933658, 27.731749],
钦州: [108.66089, 21.985392],
玉树藏族自治州: [97.01308, 33.011061],
本溪: [123.773468, 41.299847],
朔州: [112.438184, 39.33789],
毕节: [105.333323, 27.408562],
张掖: [100.456221, 38.932187],
南平: [118.1843, 26.647662],
濮阳: [115.035917, 35.767586],
宜宾: [104.648103, 28.75761],
铜仁: [109.168558, 27.674903],
松原: [124.831633, 45.147201],
漳州: [117.653827, 24.519197],
梧州: [111.285647, 23.482873],
洛阳: [112.460033, 34.624376],
龙岩: [117.023668, 25.081257],
莆田: [119.014232, 25.45996],
济源: [112.609314, 35.072867],
哈密地区: [93.522785, 42.824642],
昭通: [103.723311, 27.344057],
大理白族自治州: [100.274223, 25.612206],
昌吉回族自治州: [87.314822, 44.016923],
迪庆藏族自治州: [99.70948, 27.825264],
黑河: [127.535014, 50.251193],
吉林: [126.556073, 43.843512],
广安: [106.639772, 30.461708],
黄山: [118.174807, 30.133213],
德阳: [104.404319, 31.133105],
河池: [108.091898, 24.698828],
益阳: [112.361677, 28.559818],
通化: [125.946506, 41.733906],
永州: [111.618703, 26.426612],
周口: [114.703433, 33.631958],
梅州: [116.129179, 24.294311],
锡林郭勒盟: [116.054141, 43.939525],
固原: [106.24917, 36.021609],
滁州: [118.323252, 32.308165],
荆州: [112.24722, 30.340606],
芜湖: [118.439561, 31.358798],
襄阳: [112.250093, 32.229169],
吉隆坡: [0, 0],
榆林: [109.741195, 38.290886],
果洛藏族自治州: [100.251341, 34.477207],
玉林: [110.18743, 22.660656],
临夏回族自治州: [103.217303, 35.607475],
鄂州: [114.901557, 30.396522],
晋中: [112.759375, 37.692757],
巴音郭楞蒙古自治州: [86.151584, 41.770226],
澳门: [113.549403, 22.192961],
内江: [105.065028, 29.585836],
揭阳: [116.37922, 23.555773],
通辽: [122.251207, 43.658363],
阜阳: [115.821389, 32.895879],
中卫: [105.203332, 37.506058],
铜陵: [117.818795, 30.950899],
红河哈尼族彝族自治州: [103.38215, 23.369914],
曲靖: [103.802685, 25.496328],
香港: [114.171994, 22.281089],
汉中: [107.030197, 33.07382],
乐山: [103.77193, 29.558141],
新乡: [113.933349, 35.308973],
晋城: [112.857706, 35.496081],
巴彦淖尔: [107.394129, 40.749427],
武威: [102.644524, 37.934078],
岳阳: [113.135679, 29.363262],
赤峰: [118.895463, 42.264586],
白山: [126.431052, 41.94643],
攀枝花: [101.725262, 26.588109],
黄冈: [114.878872, 30.459422],
绥化: [126.975678, 46.658789],
双鸭山: [131.165442, 46.652966],
凉山彝族自治州: [102.273965, 27.887685],
伊犁哈萨克自治州: [81.330697, 43.922815],
德宏傣族景颇族自治州: [98.591419, 24.438031],
安阳: [114.3996, 36.103649],
三明: [117.645742, 26.269683],
宜春: [114.422683, 27.820089],
上饶: [117.950028, 28.460864],
自贡: [104.784891, 29.345379],
娄底: [112.001082, 27.703196],
丽江: [100.23357, 26.862521],
防城港: [108.361138, 21.693439],
淮北: [116.804878, 33.96064],
儋州: [109.587145, 19.527081],
怒江州: [98.863189, 25.823736],
焦作: [113.248557, 35.221493],
铁岭: [123.848797, 42.292573],
抚顺: [123.963595, 41.886078],
巢湖: [117.88049, 31.608733],
西双版纳: [100.803836, 22.013792],
德宏州: [98.591419, 24.438031],
恩施: [109.485727, 30.30089],
湘西州: [109.745507, 28.317399],
西昌: [102.269526, 27.900601],
阿坝州: [102.231186, 31.905609],
黔南州: [107.528663, 26.260586],
黔东南州: [107.990602, 26.589858],
黔西南州: [104.910858, 25.095974],
大理州: [100.274223, 25.612206],
红河州: [103.38215, 23.369914],
文山州: [104.221606, 23.404187],
楚雄州: [101.534082, 25.051226],
迪庆州: [99.70948, 27.825264],
山南地区: [91.779601, 29.24309],
那曲地区: [92.0578, 31.482375],
博尔塔拉蒙古自治州: [82.073064, 44.912168],
临夏州: [103.217303, 35.607475],
甘南州: [102.917605, 34.98901],
格尔木: [94.909745, 36.408588],
奎屯: [84.90832, 44.432645],
亳州: [115.7786, 33.8445],
崇左: [107.3647, 22.3765],
定安县: [110.3588, 19.6814],
东方: [108.6518, 19.0953],
贵港: [109.5989, 23.1115],
贺州: [111.5666, 24.4035],
嘉峪关: [98.2891, 39.7731],
金昌: [102.1880, 38.5200],
来宾: [109.2214, 23.7503],
乐东黎族自治县: [109.1730, 18.7502],
陵水黎族自治县: [110.0375, 18.5060],
眉山: [103.8485, 30.0754],
琼海: [110.4921, 19.2396],
台湾: [120.9605, 23.6978],
天门: [113.3169, 30.8657],
屯昌县: [110.1034, 19.3517],
万宁: [110.3816, 18.8078],
文昌: [113.8259, 25.8228],
五指山: [109.5169, 18.7751],
仙桃: [113.4234, 30.3608],
资阳: [104.6520, 30.1246],
安徽: [117.17, 31.52],
福建: [119.18, 26.05],
甘肃: [103.51, 36.04],
广东: [113.14, 23.08],
广西: [108.19, 22.48],
贵州: [106.42, 26.35],
海南: [110.20, 20.02],
河北: [114.30, 38.02],
河南: [113.40, 34.46],
黑龙江: [126.36, 45.44],
湖北: [114.17, 30.35],
湖南: [112.59, 28.12],
江苏: [118.46, 32.03],
江西: [115.55, 28.40],
辽宁: [123.25, 41.48],
内蒙古: [111.41, 40.48],
宁夏: [106.16, 38.27],
青海: [101.48, 36.38],
山东: [117.00, 36.40],
山西: [112.33, 37.54],
陕西: [108.57, 34.17],
四川: [104.04, 30.40],
西藏: [91.08, 29.39],
新疆: [87.36, 43.45],
云南: [102.42, 25.04],
浙江: [120.10, 30.16],
};
var convertData = function (data) {
var res = [];
// console.log(data);
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
// console.log(geoCoord + i);
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
console.log(res);
return res;
};
var option = {
visualMap: {
// {type: 'piecewise',}
dataRange: {
min: 0, // 只显示大于 50 的名称
max: 100 // 只显示小于或等于 100 的名称
}
},
scale: 0.1,
backgroundColor: "transparent",
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value[2]; // 显示地点名称和第三个数值
}
},
title: {
text: "省市分布数据",
subtext: "天气数据",
left: "center",
textStyle: {
color: "#fff",
},
},
//这个属性配置一定要有，要不然无法实现光圈效果
geo: {
show: true,
map: "china",
zoom: 1.25,
label: {
normal: {
show: true,
color: "white",
fontSize: "8",
},
emphasis: {
show: true,
textStyle: {
color: "white", //鼠标移入省份字体颜色变化
fontSize: "10px", //鼠标移入省份字体大小变化
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: "#1d84df",
borderColor: "#fff",
},
emphasis: {
areaColor: "#2B91B7",
},
},
},
//series就是地图上的数据（去掉就没有数据了）
series: [
//所有的市
{
name: "AQI值",
type: "effectScatter",
coordinateSystem: "geo",
data: convertData(data),
symbolSize: function (val) {
return val[2] / 5;
},
//这几个样式一定要加，加上才有那种光圈的效果
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
hoverAnimation: true,
label: {
formatter: "{b}",
position: "right",
show: false,
},
//圆点的样式
itemStyle: {
color: "#ddb926",
},
emphasis: {
label: {
show: true,
},
},
},
],
};
option && myChart.setOption(option);
</script>
<!-- Data Tables -->
<script src="/static/assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/static/assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
<script src="/static/assets/scripts/datatables.demo.min.js"></script>
</body>
</html>编写getChartData.py,
from utils.query import *
from utils.getPublicData import *
from utils.error import *
from myApp.models import *
def getIndexData(defaultCity):
avgCityAqiList = list(getavgCityAqi())
avgCitySixList = list(getavgCitySix())
realSixList = querys('select * from avgCitySix where city = %s',[defaultCity],'select')[0]
yLine = list(realSixList[1:])
yLine = [round(x,1) for x in yLine]
print(yLine)
xLine = ['PM2.5','PM10','So2','No2','Co','O3']
print(avgCitySixList[0])
xBar = [x[0] for x in avgCityAqiList]
yBar = [round(x[1],0) for x in avgCityAqiList]
# xLine = [x[0] for x in avgCitySixList]
# yLine = [round(float(x[1]),1) for x in avgCitySixList]
print(xBar,yBar,xLine,yLine)
return xBar,yBar,xLine,yLine
def changePassword(passwordInfo,userInfo):
oldPwd = passwordInfo['oldPwd']
newPwd = passwordInfo['newPwd']
ckdPwd = passwordInfo['ckdPwd']
user = User.objects.get(username=userInfo.username)
if user.password != oldPwd:
return '原密码错误，请输入正确信息'
else:
if newPwd != ckdPwd:
return '密码确认失败!'
else:
user.password = newPwd
user.save()
def getYearChartData(city):
maxCityAqiList = querys('select * from maxCityAqi where city = %s',[city],'select')
# maxCityData = getmaxCityAqi()
print(maxCityAqiList[0])
y1DataM = [x[3] for x in maxCityAqiList]
y1DataN = [x[4] for x in maxCityAqiList]
print(y1DataM,y1DataN)
xData = []
for i in range(1,13):
xData.append(str(i) + '月')
print(xData)
avgCityPMList = querys('select * from avgCityPM where city = %s',[city],'select')
print(avgCityPMList[0])
y2Data2 = [round(x[3],1) for x in avgCityPMList]
y2Data10 = [round(x[4],1) for x in avgCityPMList]
return xData,y1DataM,y1DataN,y2Data2,y2Data10
def getAirMonthData(city,month):
airDataList = querys('select * from airdata where city = %s and SUBSTRING(date,6,2) = %s',[city,month],'select')
# print(airDataList[0])
y1Data = [x[3] for x in airDataList]
y2Data = [int(x[4]) for x in airDataList]
dateList = [x[1] for x in airDataList]
xData = []
for date in dateList:
year, month, day = date.split('-')
xData.append(day)
print(111,xData,y1Data,y2Data)
print(y1Data)
print(y2Data)
greatAirList = querys('select * from greatAir where city = %s ',[city],'select')
print(greatAirList[1])
funnelData = []
for i in greatAirList:
funnelData.append({
'name':str(i[2]) + '月',
'value':i[3]
})
print(funnelData)
return xData,y1Data,y2Data,funnelData
def getAirChartData():
maxSNList = list(getmaxSN())
COCategoryList = list(getCOCategory())
O3CategoryList = list(getO3Category())
print(maxSNList[0])
print(COCategoryList[0])
print(O3CategoryList[0])
xData = [x[0] for x in maxSNList]
y1Data = [x[1] for x in maxSNList]
y2Data = [x[2] for x in maxSNList]
print(xData,y1Data,y2Data)
COCategoryData = []
O3CategoryData = []
for i in COCategoryList:
COCategoryData.append({
'name':i[0],
'value':i[1]
})
for i in O3CategoryList:
O3CategoryData.append({
'name':i[0],
'value':i[1]
})
print(COCategoryData,O3CategoryData)
return xData,y1Data,y2Data,COCategoryData,O3CategoryData
def getcityChartData(month):
print(int(month))
airDataList = querys('select * from monthAQI where month = %s',[month],'select')
# airDataList = getmonthAQI()
print(airDataList[0])
mapData = []
for i in airDataList:
mapData.append({
'name':i[0],
'value':round(i[3],0)
})
print(mapData)
return mapData
14数据词云图
编写wordCloud.py,
import jieba
from matplotlib import pylab as plt
from wordcloud import WordCloud
import numpy as np
from PIL import Image
from utils.query import querys
def get_img(targetImageSrc,resImageSrc):
data = querys("select airQuality from airdata",[],'select')
text = ''
for i in data:
if i[0] != '':
tarArr = i
for j in tarArr:
text += j
#分词
data_cut = jieba.cut(text,cut_all=False)
string = ' '.join(data_cut)
#词云图
img = Image.open(targetImageSrc)
img_arr = np.array(img)
wc = WordCloud(
background_color='#fff',
font_path='/usr/share/fonts/truetype/wqy/wqy-zenhei.ttc',
mask=img_arr
)
wc.generate_from_text(string)
#绘制
fig = plt.figure(1)
plt.imshow(wc)
plt.axis('off')
plt.savefig(resImageSrc,dpi=800,bbox_inches='tight',pad_inches=-0.1)
get_img('./static/tree.jpg','./static/cloudImg/cloudAir')运行代码之后，将其复制到cloudImg下，编写airCloud.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据可视化分析系统</title>
<!-- Main Styles -->
<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
<!-- Material Design Icon -->
<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<!-- Waves Effect -->
<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
<!-- Sweet Alert -->
<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
<!-- Morris Chart -->
<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
<!-- FullCalendar -->
<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
<link rel="stylesheet" href="/static/assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/static/assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
</head>
<body>
<header class="fixed-header">
<div class="header-top">
<div class="container">
<div class="pull-left">
<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
</div>
<!-- /.pull-left -->
<div class="pull-right">
<div class="ico-item hidden-on-desktop">
<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
</div>
<!-- /.ico-item hidden-on-desktop -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
<!-- /.searchform -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
<div id="message-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
<span class="name">Harry Halen</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Thomas Taylor</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
<span class="name">Helen Candy</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Anna Cavan</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 hour ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-success"><i class="fa fa-user"></i></span>
<span class="name">Jenny Betty</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 day ago</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
<span class="name">Denise Peterson</span>
<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
<span class="time">1 year ago</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#message-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
<h2 class="popup-title">Your Notifications</h2>
<!-- /.popup-title -->
<div class="content">
<ul class="notice-list">
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
<span class="name">John Doe</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">10 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
<span class="name">Anna William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">15 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
<span class="name">Update Status</span>
<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
<span class="time">30 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
<span class="name">Jennifer</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">45 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
<span class="name">Michael Zenaty</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">50 min</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
<span class="name">Simon</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">1 hour</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
<span class="name">Account Contact Change</span>
<span class="desc">A contact detail associated with your account has been changed.</span>
<span class="time">2 hours</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
<span class="name">Helen 987</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Yesterday</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
<span class="name">Denise Jenny</span>
<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
<span class="time">Oct, 28</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
<span class="name">Thomas William</span>
<span class="desc">Like your post: “Facebook Messenger”</span>
<span class="time">Oct, 27</span>
</a>
</li>
</ul>
<!-- /.notice-list -->
<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
</div>
<!-- /.content -->
</div>
<!-- /#notification-popup -->
</div>
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
<div id="user-status" class="user-status js__toggle">
<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
<h5 class="position">用户</h5>
<!-- /.name -->
<div class="control-items">
<!-- <div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
</div>
<!-- /.control-items -->
</div>
<!-- /#user-status -->
</div>
<!-- /.ico-item -->
</div>
<!-- /.pull-right -->
</div>
<!-- /.container -->
</div>
<!-- /.header-top -->
<nav class="nav-horizontal">
<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
<div class="container">
<ul class="menu">
<li class="current">
<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
<ul class="sub-menu mega mega-3">
<li class="has-sub">
<h3 class="title">Components</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
<li><a href="ui-components.html">UI Components</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Icons</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
<li><a href="icons-fontello.html">Fontello</a></li>
<li><a href="icons-material-icons.html">Material Design Icons</a></li>
<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
<li><a href="icons-themify-icons.html">Themify Icons</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-range-slider.html">Range Slider</a></li>
<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
<li><a href="ui-treeview.html">Tree view</a></li>
<li><a href="ui-typography.html">Typography</a></li>
</ul>
<!-- /.child-list -->
</li>
</ul>
<!-- /.sub-menu mega -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
<ul class="sub-menu single">
<li><a href="chart-3d.html">3D Charts</a></li>
<li><a href="chart-chartist.html">Chartist Charts</a></li>
<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-knob.html">Knob Chart</a></li>
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
<li><a href="chart-other.html">Other Chart</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
<ul class="sub-menu single">
<li><a href="form-elements.html">General Elements</a></li>
<li><a href="form-advanced.html">Advanced Form</a></li>
<li><a href="form-fileupload.html">Form Uploads</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
<li><a href="form-xeditable.html">X-editable</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li>
<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
<ul class="sub-menu single">
<li><a href="page-starter.html">Starter Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="page-register.html">Register</a></li>
<li><a href="page-recoverpw.html">Recover Password</a></li>
<li><a href="page-lock-screen.html">Lock Screen</a></li>
<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
<li><a href="page-404.html">Error 404</a></li>
<li><a href="page-500.html">Error 500</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
<ul class="sub-menu single">
<li><a href="extras-contact.html">Contact list</a></li>
<li><a href="extras-email-template.html">Email template</a></li>
<li><a href="extras-faq.html">FAQ</a></li>
<li><a href="extras-gallery.html">Gallery</a></li>
<li><a href="extras-invoice.html">Invoice</a></li>
<li><a href="extras-maps.html">Maps</a></li>
<li><a href="extras-pricing.html">Pricing</a></li>
<li><a href="extras-projects.html">Projects</a></li>
<li><a href="extras-taskboard.html">Taskboard</a></li>
<li><a href="extras-timeline.html">Timeline</a></li>
<li><a href="extras-tour.html">Tour</a></li>
</ul>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
<ul class="sub-menu mega mega-2">
<li class="has-sub">
<h3 class="title">Tables</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
</ul>
<!-- /.child-list -->
</li>
<li class="has-sub">
<h3 class="title">Others</h3>
<!-- .title -->
<ul class="child-list">
<li><a href="calendar.html">Calendar</a></li>
宜春: [114.422683, 27.820089],
上饶: [117.950028, 28.460864],
自贡: [104.784891, 29.345379],
娄底: [112.001082, 27.703196],
丽江: [100.23357, 26.862521],
防城港: [108.361138, 21.693439],
淮北: [116.804878, 33.96064],
儋州: [109.587145, 19.527081],
怒江州: [98.863189, 25.823736],
焦作: [113.248557, 35.221493],
铁岭: [123.848797, 42.292573],
抚顺: [123.963595, 41.886078],
巢湖: [117.88049, 31.608733],
西双版纳: [100.803836, 22.013792],
德宏州: [98.591419, 24.438031],
恩施: [109.485727, 30.30089],
湘西州: [109.745507, 28.317399],
西昌: [102.269526, 27.900601],
阿坝州: [102.231186, 31.905609],
黔南州: [107.528663, 26.260586],
黔东南州: [107.990602, 26.589858],
黔西南州: [104.910858, 25.095974],
大理州: [100.274223, 25.612206],
红河州: [103.38215, 23.369914],
文山州: [104.221606, 23.404187],
楚雄州: [101.534082, 25.051226],
迪庆州: [99.70948, 27.825264],
山南地区: [91.779601, 29.24309],
那曲地区: [92.0578, 31.482375],
博尔塔拉蒙古自治州: [82.073064, 44.912168],
临夏州: [103.217303, 35.607475],
甘南州: [102.917605, 34.98901],
格尔木: [94.909745, 36.408588],
奎屯: [84.90832, 44.432645],
亳州: [115.7786, 33.8445],
崇左: [107.3647, 22.3765],
定安县: [110.3588, 19.6814],
东方: [108.6518, 19.0953],
贵港: [109.5989, 23.1115],
贺州: [111.5666, 24.4035],
嘉峪关: [98.2891, 39.7731],
金昌: [102.1880, 38.5200],
来宾: [109.2214, 23.7503],
乐东黎族自治县: [109.1730, 18.7502],
陵水黎族自治县: [110.0375, 18.5060],
眉山: [103.8485, 30.0754],
琼海: [110.4921, 19.2396],
台湾: [120.9605, 23.6978],
天门: [113.3169, 30.8657],
屯昌县: [110.1034, 19.3517],
万宁: [110.3816, 18.8078],
文昌: [113.8259, 25.8228],
五指山: [109.5169, 18.7751],
仙桃: [113.4234, 30.3608],
资阳: [104.6520, 30.1246],
安徽: [117.17, 31.52],
福建: [119.18, 26.05],
甘肃: [103.51, 36.04],
广东: [113.14, 23.08],
广西: [108.19, 22.48],
贵州: [106.42, 26.35],
海南: [110.20, 20.02],
河北: [114.30, 38.02],
河南: [113.40, 34.46],
黑龙江: [126.36, 45.44],
湖北: [114.17, 30.35],
湖南: [112.59, 28.12],
江苏: [118.46, 32.03],
江西: [115.55, 28.40],
辽宁: [123.25, 41.48],
内蒙古: [111.41, 40.48],
宁夏: [106.16, 38.27],
青海: [101.48, 36.38],
山东: [117.00, 36.40],
山西: [112.33, 37.54],
陕西: [108.57, 34.17],
四川: [104.04, 30.40],
西藏: [91.08, 29.39],
新疆: [87.36, 43.45],
云南: [102.42, 25.04],
浙江: [120.10, 30.16],
};
var convertData = function (data) {
var res = [];
// console.log(data);
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
// console.log(geoCoord + i);
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
console.log(res);
return res;
};
var option = {
visualMap: {
// {type: 'piecewise',}
dataRange: {
min: 0, // 只显示大于 50 的名称
max: 100 // 只显示小于或等于 100 的名称
}
},
scale: 0.1,
backgroundColor: "transparent",
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value[2]; // 显示地点名称和第三个数值
}
},
title: {
text: "省市分布数据",
subtext: "天气数据",
left: "center",
textStyle: {
color: "#fff",
},
},
//这个属性配置一定要有，要不然无法实现光圈效果
geo: {
show: true,
map: "china",
zoom: 1.25,
label: {
normal: {
show: true,
color: "white",
fontSize: "8",
},
emphasis: {
show: true,
textStyle: {
color: "white", //鼠标移入省份字体颜色变化
fontSize: "10px", //鼠标移入省份字体大小变化
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: "#1d84df",
borderColor: "#fff",
},
emphasis: {
areaColor: "#2B91B7",
},
},
},
//series就是地图上的数据（去掉就没有数据了）
series: [
//所有的市
{
name: "AQI值",
type: "effectScatter",
coordinateSystem: "geo",
data: convertData(data),
symbolSize: function (val) {
return val[2] / 5;
},
//这几个样式一定要加，加上才有那种光圈的效果
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
hoverAnimation: true,
label: {
formatter: "{b}",
position: "right",
show: false,
},
//圆点的样式
itemStyle: {
color: "#ddb926",
},
emphasis: {
label: {
show: true,
},
},
},
],
};
option && myChart.setOption(option);
</script>
<!-- Data Tables -->
<script src="/static/assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/static/assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
<script src="/static/assets/scripts/datatables.demo.min.js"></script>
</body>
</html>
15预测页面
编写predict.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>空气质量数据可视化分析系统</title>
<!-- Main Styles -->
<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
<!-- Material Design Icon -->
<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<!-- Waves Effect -->
<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
<!-- Sweet Alert -->
<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
<!-- Morris Chart -->
<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
<!-- FullCalendar -->
<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
<link rel="stylesheet" href="/static/assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/static/assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
</head>
<body>
<header class="fixed-header">
<div class="header-top">
<div class="container">
<div class="pull-left">
<a href="/myApp/index/" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
</div>
<!-- /.pull-left -->
<div class="pull-right">
<!-- /.ico-item -->
<!-- /.ico-item -->
<div class="ico-item">
<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
<div id="user-status" class="user-status js__toggle">
<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
<h5 class="position">用户</h5>
<!-- /.name -->
<div class="control-items">
<!-- <div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
</div>
<!-- /.control-items -->
</div>
<!-- /#user-status -->
</div>
<!-- /.ico-item -->
</div>
<!-- /.pull-right -->
</div>
<!-- /.container -->
</div>
<!-- /.header-top -->
<nav class="nav-horizontal">
<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
<div class="container">
<ul class="menu">
<li class="">
<a href="/myApp/index/"><i class="ico mdi mdi-home"></i><span>首页</span></a>
</li>
<li class="">
<a href="/myApp/selfInfo/"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
<!-- /.sub-menu mega -->
</li>
<li class="has-sub">
<a href="/myApp/table/"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="/myApp/airYearChart/"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
<!-- /.sub-menu single -->
</li>
<li>
<a href="/myApp/airMonthChart"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
</li>
<li class="has-sub">
<a href="/myApp/airChart/"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="/myApp/cityChart/"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
<!-- /.sub-menu single -->
</li>
<li class="has-sub">
<a href="/myApp/airCloud/"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
<!-- /.sub-menu mega -->
</li>
<li class="current">
<a href="/myApp/predict/"><i class="ico mdi mdi-star"></i><span>空
<script src="/static/assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/assets/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
<script src="/static/assets/scripts/datatables.demo.min.js"></script>
</body>
</html>
16总结
本文基于Spark构建的空气质量智能分析平台，打通数据采集、存储、分析、预测到可视化的全链路，以可扩展的现代化技术栈把大数据、机器学习与Web开发熔铸成一站式业务系统，实现技术价值向用户价值的完整转化。
更多推荐
4
0- 0
已为社区贡献3条内容
所有评论(0)