目录结构

models

__init__.py

from app.extensions import dbfrom .hot_work import HotWork
from .bigdata_work import BigDataWork
from .avg_money_city import AvgMoneyCity
from .avg_money_bigdata import AvgMoneyBigData
from .CityRestaurantNum import CityRestaurantNum

参考：https://www.jianshu.com/p/73f7fbf75183
我们可以在init.py 指定默认需要导入的模块

模型类.py

avg_money_bigdata.py

from app.extensions import dbclass AvgMoneyBigData(db.Model):__tablename__ = 'avg_money_bigdata'id = db.Column(db.Integer, primary_key=True)city = db.Column(db.String(255))avg_money = db.Column(db.String(255))def __repr__(self):return f"<AvgMoneyBigData id:{self.id},city:{self.city},avg_money{self.avg_money}>"

avg_money_city.py

from app.extensions import dbclass AvgMoneyCity(db.Model):__tablename__ = 'avg_money_city'id = db.Column(db.Integer, primary_key=True)city = db.Column(db.String(255))avg_money = db.Column(db.String(255))

bigdata_work.py

from app.extensions import dbclass BigDataWork(db.Model):__tablename__ = 'bigdata_work'id = db.Column(db.Integer, primary_key=True)job_name = db.Column(db.String(255))company_name = db.Column(db.String(255))city = db.Column(db.String(255))job_require = db.Column(db.Text)recruit_number = db.Column(db.String(255))money = db.Column(db.String(255))skill_require = db.Column(db.String(255))release_date = db.Column(db.String(255))sex = db.Column(db.String(255))company_detail = db.Column(db.String(255))education = db.Column(db.String(255))

CityRestaurantNum.py

from app.extensions import dbclass CityRestaurantNum(db.Model):__tablename__ = 'city_restaurant_num'id = db.Column(db.Integer, primary_key=True)restaurant_numb = db.Column(db.Integer)city = db.Column(db.String(20))

hot_work.py

from app.extensions import dbclass HotWork(db.Model):__tablename__ = 'hot_work'id = db.Column(db.Integer, primary_key=True)job_name = db.Column(db.String(255))job_number = db.Column(db.Integer)

static

存放静态资源

templates

存放html文件，用于flask使用render_template渲染数据到html

views

__init__.py

from .main import main# 蓝本配置DEFAULT_BLUEPRINT = ((main, ''),
)# 封装的函数完成蓝本注册def config_blueprint(app):for blueprint, prefix in DEFAULT_BLUEPRINT:app.register_blueprint(blueprint, url_prefix=prefix)

main.py

from flask import Blueprint, render_template
from sqlalchemy import *from app.extensions import db
from app.models import HotWork, BigDataWork, AvgMoneyCity, AvgMoneyBigData
from app.models import CityRestaurantNummain = Blueprint('main', __name__)  # 实例化路由def get_city_sale_vol():apri_rs = db.session.query(CitySaleApri.city, func.sum(CitySaleApri.sale_month).label('sales')).group_by(CitySaleApri.city)may_rs = db.session.query(CitySaleMay.city, func.sum(CithSaleMay.sale_month).label('sales')).group_by(CitySale.city)gcsv_rs = [apri_rs, may_rs]return gcsv_rs# 没用到
def get_score_interval():gsi_rs = RestaurantScoreNum.query.all()return gsi_rsdef get_city_restaurant_number():gcrn_rs = CityRestaurantNum.query.order_by(desc('restaurant_numb')).all()return gcrn_rsdef get_total_foodtype_count(rs_sql):data_dict = {}numbers = []for rs in rs_sql:numbers.append(int(rs.number))data_dict['value'] = numbersdata_dict['name'] = rs.cityreturn data_dictdef get_foodtype_number():gfn_yt = db.session.query(RestaurantTypeCount).filter(RestaurantTypeCount.city == '烟台',RestaurantTypeCount.foodtype.in_(['小吃快餐', '甜点饮品', '火锅', '烧烤烤肉', '西餐'])).all()gfn_ly = db.session.query(RestaurantTypeCount).filter(RestaurantTypeCount.city == '临沂',RestaurantTypeCount.foodtype.in_(['小吃快餐', '甜点饮品', '火锅', '烧烤烤肉', '西餐'])).all()gfn_qd = db.session.query(RestaurantTypeCount).filter(RestaurantTypeCount.city == '青岛',RestaurantTypeCount.foodtype.in_(['小吃快餐', '甜点饮品', '火锅', '烧烤烤肉', '西餐'])).all()gfn_jn = db.session.query(RestaurantTypeCount).filter(RestaurantTypeCount.city == '济南',RestaurantTypeCount.foodtype.in_(['小吃快餐', '甜点饮品', '火锅', '烧烤烤肉', '西餐'])).all()gfn_sql = [gfn_yt, gfn_ly, gfn_qd, gfn_jn]gfn_rs = []for rs_sql in gfn_sql:result = get_total_foodtype_count(rs_sql)gfn_rs.append(result)return gfn_rs@main.route('/index/')
def display():rs_gcsv = get_city_sale_vol()rs_gsi = get_score_interval()rs_gcrn = get_city_restaurant_number()rs_gfn = get_foodtype_number()return render_template('/main/echarts.html', rs_gcsv=rs_gcsv, rs_gsi=rs_gsi, rs_gcrn=rs_gcrn, rs_gfn=rs_gfn)# @main.route('/')
# def index():
#     return render_template('/main/echarts.html')
#
#
# @main.route('/test')
# def test():
#     avg_money_bigdata_list = db.session.query(AvgMoneyBigData.avg_money).all()
#     avg_money_city_list = db.session.query(AvgMoneyCity.avg_money).all()
#     print(avg_money_bigdata_list)
#     print(avg_money_city_list)
#     return render_template('/main/main.html', test_value='test', avg_money_bigdata_list=avg_money_bigdata_list,
#                            avg_money_city_list=avg_money_city_list, data=[1, 2, 3, 4, 5])
#
#
# @main.route('/test2')
# def test2():
#     bar_data_object = AvgMoneyCity.query.group_by(AvgMoneyCity.avg_money).all()[0:5]
#     bigData_object = AvgMoneyBigData.query.group_by(AvgMoneyBigData.avg_money).all()[0:5]
#
#     bar_data = []
#     for data in bar_data_object:
#         bar_data.append(data.avg_money)
#     print(bar_data)
#     return render_template('/main/test2.html', bar_data=bar_data, bigData_object=bigData_object)# @main.route('/index/')
# def display():
#     rs_ghw = get_hot_work()
#     rs_gbdw = get_big_data_work()
#     rs_gamc = get_avg_money_city()
#     rs_gamb = get_avg_money_BigData()
#
#     return render_template('/main/echarts.html', rs_ghw=rs_ghw, rs_gbdw=rs_gbdw, rs_gamc=rs_gamc, rs_gamb=rs_gamb)
## 统计招聘数量最多的前十热门职位 获取结果：
# def get_hot_work():
#     # sql: select * from hot_work = group by job_name limit 10
#     ghw_rs = HotWork.query.order_by(desc('job_name')).limit(10)
#     print(ghw_rs)
#     return ghw_rs
#
#
# # 所有城市招聘数据的平均工资
# def get_avg_money_city():
#     # sql: select * from avg_money_city
#     gamc_rs = AvgMoneyCity.query.all()
#     print('所有城市招聘数据的平均工资获取结果成功')
#     return gamc_rs
#
#
# # “大数据”相关职位所有城市招聘数据的平均工资
# def get_avg_money_BigData():
#     # sql: select * from avg_money_big_data
#     gamb_rs = AvgMoneyBigData.query.all()
#     print('“大数据”相关职位所有城市招聘数据的平均工资获取结果成功')
#     return gamb_rs
#
#
# # 对相同职位进行数量汇总，"大数据"相关职位招聘数量比较
# def get_big_data_work():
#     # sql: select job_name, count(*) from bigdata_work where job_name like '%大数据%' GROUP BY job_name
#     gbdw_rs = db.session.query(BigDataWork.job_name, func.count('*').label('job_count')) \
#         .group_by(BigDataWork.job_name).order_by(desc('job_count')).all()
#     print('"大数据"相关职位招聘数量：' + str(gbdw_rs))
#     return gbdw_rs

manage

import os
from app import create_app
from flask_script import Manager, Server
from flask_migrate import MigrateCommand# 获取配置config_name = os.environ.get('FLASK_CONFIG') or 'default'# 创建flask 实例app = create_app(config_name)# 创建命令行启动控制对象manager = Manager(app)manager.add_command("runserver", Server(use_debugger=True))# 添加数据库迁徙命令manager.add_command('db', MigrateCommand)# 启动项目if __name__ == '__main__':manager.run()

app子文件

app下面的__init__.py

1. 通过create_app(config_name)函数创建app，并设置各种配置
2. config_errorhandler(app)函数，设置404页面

from flask import Flask, render_template
from app.config import config
from app.extensions import config_extensions
from app.views import config_blueprint# 封装一个方法，专门用于创建Flask实例
def create_app(config_name): # development# 创建应用实例app = Flask(__name__)# 初始化配置app.config.from_object(config.get(config_name) or config['default'])# 调用初始化函数config[config_name].init_app(app)# 配置扩展config_extensions(app)# 配置蓝本config_blueprint(app)# 错误页面定制config_errorhandler(app)# 返回应用实例app.app_context().push()return appdef config_errorhandler(app):# 如果在蓝本定制，只针对本蓝本的错误有效，# 可以使用app_errorhandler定制全局有效的错误显示@app.errorhandler(404)def page_not_found(e):return render_template('errors/404.html')

config.py

import osbase_dir = os.path.abspath(os.path.dirname(__file__))# 通用配置
class Config:# 秘钥SECRET_KEY = os.environ.get('SECRET_KEY') or '123456'# 数据库SQLALCHEMY_COMMIT_ON_TEARDOWN = TrueSQLALCHEMY_TRACK_MODIFICATIONS = False# 额外的初始化操作，即使什么内容都没有写，也是有意义的@staticmethoddef init_app(app):pass# 开发环境   语法：mysql+pymysql://用户名：密码@ip：端口/数据库名
class DevelopmentConfig(Config):# SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:P@ssw0rd@172.16.1.2:3306/test2'SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:123456@192.168.162.100:3306/visiondata'# 测试环境
class TestingConfig(Config):SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:root@192.168.172.101:3306/visiondata'# 生产环境
class ProductionConfig(Config):SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:root@192.168.172.102:3306/visiondata'# 配置字典
config = {'development': DevelopmentConfig,'testing': TestingConfig,'production': ProductionConfig,'default': DevelopmentConfig
}

extensions.py

# 导入类库
from flask_bootstrap import Bootstrap
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_moment import Moment# 创建对象bootstrap = Bootstrap()
db = SQLAlchemy()
moment = Moment()
migrate = Migrate(db=db)# 初始化
def config_extensions(app):bootstrap.init_app(app)db.init_app(app)moment.init_app(app)migrate.init_app(app)

sql_exercise.py

from sqlalchemy import *
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmakerfrom app.models import AvgMoneyBigData
from app.extensions import dbfrom app import create_app
app = create_app("development")Base = declarative_base()
# 创建连接数据库的引擎，session连接数据库需要
engine = create_engine('mysql+pymysql://root:123456@192.168.162.100:3306/visiondata')Session = sessionmaker(bind=engine)session = Session()def test_query():print(f"base is => {Base}")  # <class 'sqlalchemy.orm.decl_api.Base'># 查询全部query_all = db.session.query(AvgMoneyBigData).all()print(query_all)# hujingprint(db.session.execute("select * from avg_money_bigdata").all())# 通过id 单查query_one = session.query(AvgMoneyBigData).get(1)print(query_one)# hujingprint(session.execute("select * from avg_money_bigdata limit 1").all())# filter# query_filter = session.query(AvgMoneyBigData.avg_money).filter(AvgMoneyBigData.avg_money == 12000).all()query_filter = session.query(AvgMoneyBigData.avg_money).filter(AvgMoneyBigData.avg_money == 5000).all()print(query_filter)# hujingprint(session.execute("select avg_money from avg_money_bigdata where avg_money = 5000").all())# countquery_count = session.query(AvgMoneyBigData).count()print(query_count)# hujingprint(session.execute("select count(*) from avg_money_bigdata").first()[0])# limitquery_limit = session.query(AvgMoneyBigData).limit(5).all()print(query_limit)# hujingprint(session.execute("select * from avg_money_bigdata limit 5").all())# order_byquery_order_by = session.query(AvgMoneyBigData).order_by(AvgMoneyBigData.avg_money.desc()).all()print(query_order_by)print(session.execute("select * from avg_money_bigdata order by avg_money desc ").fetchone())if __name__ == '__main__':test_query()

html

error.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
404
</body>
</html>

main

echarts.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>招聘信息统计</title><script type="text/javascript" src="/static/js/echarts.js"></script><script type="text/javascript" src="/static/js/jquery.min.js"></script><script type="text/javascript" src="/static/js/js2wordcloud.js"></script>
</head>
<style>html , body , .content {width:100%;height:100%;padding: 0;margin: 0;box-sizing: border-box;background-color: #ccc;
}
.content {padding: 40px;
}
.header {height: 10%;width: 100%;font-size: 24px;font-weight: 700;line-height: 60px;text-align: center;
}
.body {height: 100%;width: 100%;text-align: center;
}
.chartBox {width: 100%;height: 60%;margin-bottom:40px;
}
</style>
<body><div class="content"><div class="header"></div><div class="body"><div class="chartBox" id="hotWork"></div><div class="chartBox" id="bigDataWork"></div><div class="chartBox" id="pieAvgMoneyCity"></div></div></div>
</body>
<script>//折线图   招聘数量最多的前十热门职位var hotWork = echarts.init(document.getElementById('hotWork'));     //获取div的id   实例化echarts组件var data_name = [{% for r in rs_ghw %} "{{r.job_name}}", {% endfor %}]     //将职位名job_name存放在一个数组中作为x轴数据var data_y = [{% for r in rs_ghw %}"{{r.job_number}}",{% endfor %}]     //将职位数量job_number存放在一个数组中作为y轴数据console.log('十大热门职位:' + data_name);console.log('数据分别为:' + data_y);console.log('最大值: ' + Math.max.apply(null, data_y) + '，    最小值:' + Math.min.apply(null, data_y));workOption = {title: {text: '职位分析',   //主标题subtext: '            ---10大热门职位分析',  //副标题x: '45%'    //设置标题位置},xAxis: {type: 'category',name: '岗位名称',data: data_name,axisLabel : {interval: 0,rotate: "25"    //x轴字体的旋转度}},yAxis: {name: '招聘数量',type: 'value'},series: [{data: data_y,type: 'line',   //设置图形为折线图label: {normal: {show: true,position: 'top'  //折线图顶部显示对应的x轴数值}}}]};hotWork.setOption(workOption);   //设置echarts的option参数  加载并显示图形//南丁格尔玫瑰图var pieAvgMoneyCity = echarts.init(document.getElementById('pieAvgMoneyCity'));var city = [{% for r in rs_gamc %}"{{r.city}}",{% endfor %}]var avg_money_pie_city =  [{% for r in rs_gamc %}{value:"{{r.avg_money}}", name:"{{r.city}}"},{% endfor %}]var avg_money_city = [{% for r in rs_gamc %} "{{r.avg_money}}", {% endfor %}]var avg_money_pie_bigdata =  [{% for r in rs_gamb %}{value:"{{r.avg_money}}", name:"{{r.city}}"},{% endfor %}]var avg_money_big_data = [{% for r in rs_gamb %}"{{r.avg_money}}",{% endfor %}]var dataInt_city = [];var dataInt_big_data = [];dataInt_city.forEach(function(data){avg_money_city.push(+parseInt(data));   ///遍历数组   将每个元素变成整型});dataInt_big_data.forEach(function(data){avg_money_big_data.push(+parseInt(data));   ///遍历数组   将每个元素变成整型});console.log('所有城市平均薪资:' + city);console.log('数据分别为:' + avg_money_city);console.log("所有城市最大平均薪资为" + Math.max.apply(null, avg_money_city));console.log("“大数据”相关职位城市招聘数据的平均工资" + city);console.log('数据分别为:' + avg_money_big_data);console.log("“大数据”相关职位最大平均薪资为" + Math.max.apply(null, avg_money_big_data));pieAvgMoneyCityOption = {title : {text: '所有城市招聘数据的平均工资 vs “大数据”相关职位所有城市招聘数据的平均工资',subtext: '南丁格尔玫瑰图',x:'center'},tooltip : {trigger: 'item',formatter: "{b}:{c}({d}%)"      //当鼠标移动到图形 显示数据(格式): 佛山（1111） 10%},legend: {x : 'center',y : 'bottom',data:city},color:['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#668ffe','#00ca54','#00dbfa','#f3006a','#60C0DD','#d714b7','#84433c','#f490f3','#000000','#26C0C0'],series : [{type:'pie',radius : [20, 110],     //图像的大小center : ['25%', '50%'],    //图形的位置roseType : 'radius',        //南丁格尔玫瑰图的参数data:avg_money_pie_city},{type:'pie',radius : [30, 110],center : ['75%', '50%'],roseType : 'area',data:avg_money_pie_bigdata}]};pieAvgMoneyCity.setOption(pieAvgMoneyCityOption);//柱状图   "大数据"相关职位招聘数量var bigDataWork = echarts.init(document.getElementById('bigDataWork'));var job_name = [{% for r in rs_gbdw %} "{{r.job_name}}", {% endfor %}]var quantity = [{% for r in rs_gbdw %}"{{r.job_count}}",{% endfor %}]  // 获取元组中的第二个元素('AI大数据工程师', 1095)console.log('招聘职位:  ' + job_name);console.log('对应职位招聘数量:  ' + quantity);console.log('岗位需求量最大:  ' + Math.max.apply(null, quantity) + '，  岗位需求量最少：' +  Math.min.apply(null, quantity));bigdataworkOption = {title: {text: '大数据相关职位招聘数量',subtext: '               ----职位招聘对比',x: '45%',//modified 0523textStyle:{//文字颜色color:'#f30008',//字体风格,'normal','italic','oblique'fontStyle:'oblique',//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...fontWeight:'bold',//字体系列fontFamily:'FangSong'//fontFamily: 'KaiTi'//字体大小//fontSize:18}//modified end},xAxis: {type: 'category',name: '职位名称',data: job_name,axisLabel : {interval: 0,rotate: "15"    //x轴字体的旋转度}},yAxis: {type: 'value',name: '招聘数量'},series: [{data: quantity,type: 'bar',label: {normal: {show: true,position: 'top'}},//modified0523itemStyle: {normal: {color: 'black'}}//modified end}]};bigDataWork.setOption(bigdataworkOption);</script></html>

echarts2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>charts2</title><script type="text/javascript" src="/static/js/echarts.js"></script><script type="text/javascript" src="/static/js/jquery.min.js"></script><script type="text/javascript" src="/static/js/js2wordcloud.js"></script>
</head>
<style>html, body, .content {width: 100%;height: 100%;padding: 0;margin: 0;box-sizing: border-box;background-color: #ccc;}.content {padding: 40px;}.header {height: 10%;width: 100%;font-size: 24px;font-weight: 700;line-height: 60px;text-align: center;}.body {height: 100%;width: 100%;text-align: center;}.chartBox {width: 100%;height: 60%;margin-bottom: 40px;}
</style>
<body>
<div class="content"><div class="header"></div><div class="body"><div class="chartBox" id="cityMonthSale"></div><div class="chartBox" id="scoreInterval"></div><div class="chartBox" id="cityRestaurantNum"></div><div class="chartBox" id="restaurantTypeCount"></div></div>
</div>
</body>
<script>//双柱状图 4月5月餐饮销量var cityMonthSale = echarts.init(document.getElementById('cityMonthSale'))var city = [ {%for r in rs_gcsv[0] %} "{{r.city}}", {% endfor %}]var sales_apri = [{%for r in rs_gcsv[0] %}"{{r.sales}},{% endfor %}]var sales_may = [{%for r in rs_gcsv[1] %}"{{r.sales}},{% endfor %}]cityMonthSale_option = {title: {text: "四月五月餐饮销量",textStyle: {color: '#f30008',//字体风格 oblique normal italictextFont: 'oblique',//字体粗细 bold border lighter//字体系列 仿宋fontFamily: 'FangSong',fontWeight: 'bold'}},legend: {x: '15%',data: ['四月', '五月']},xAxis: {name: '城市',type: 'category',value: []},yAxis: {name: '销量',type: 'value'},series: {type: 'bar',data: [{name: '四月',data: [100, 200, 300, 400, 500]}, {name: '五月',data: [150, 250, 350, 450, 550]}]}}cityMonthSale.setOption(cityMonthSale_option)</script>
<script>//柱状图var city_restaurant = [{% for r in rs_gcrn %}"{{r.city}}",{% endfor %}]var restaurant_numb = [{% for r in rs_gcrn %}"{{r.restaurant_numb}}",{% endfor %}]var scoreInterval = echarts.init(document.getElementById(scoreInterval))scoreInterval_option = {title: {x: '45%',text: "四月五月餐饮销量",textStyle: {color: '#f30008',//字体风格 oblique normal italictextFont: 'oblique',//字体粗细 bold border lighter//字体系列 仿宋fontFamily: 'FangSong',fontWeight: 'bold'}},xAxis:{x: '15%',name: '城市',type: 'category'},yAxis:{name:'店铺数量',type: 'value'},series:{type:'bar',data:[100,200,300,400]}}scoreInterval.setOption(scoreInterval_option)</script>
<script>//饼图var cityRestaurantNum = echarts.init(document.getElementById('cityRestaurantNum'))var cityRestaurantNum_option = {title: {text: "四月五月餐饮销量",},series:{type:'pie',data:[100,300]}}cityRestaurantNum.setOption(cityRestaurantNum_option)</script>
<script>//雷达图var restaurant_number = {{ rs_gfn|tojson|safe }}var restaurantTypeCount = echarts.init(document.getElementById('restaurantTypeCount'))var restaurantTypeCount_option = {title:{text:'test'},tooltip:{},legend:{y:'bottom',data:['青岛','烟台','临沂','济南']},radar:{indicator:{{name:'小吃快餐'},{name:'火锅'},{name:'烧烤烤肉'},{name:'甜点饮品'},{name:'西餐'}},center:['50%','55%'],name:{textStyle:{color:'#fff',backgroundColor:'#999',borderRadius:3,padding:[3,5]}}},series:[{name:'',type:'radar',data:$.parseJSON(restaurant_number)}]}restaurantTypeCount.setOption(restaurantTypeCount_option)</script>
</html>

main.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>echarts</title><script type="text/javascript" src="/static/js/echarts.js"></script><script type="text/javascript" src="/static/js/jquery.min.js"></script><script type="text/javascript" src="/static/js/js2wordcloud.js"></script>
</head>
<style>html , body , .content {display: flex;justify-content: center;flex-wrap: wrap;width:100%;height:100%;padding: 0;margin: 0;
}
.content {padding: 40px;
}
.header {height: 10%;width: 100%;font-size: 24px;font-weight: 700;line-height: 60px;text-align: center;
}.chart{width:600px;
height:400px;
}</style>
<body>
<div class="content"><div class="header"></div><div class="body"><div>{{test_value}}{% for i in data %}{{i}}{% endfor %}{% if test_value %}{{test_value}}{% endif %}</div><div class="chart" id="test1"></div><div class="chart" id="test2"></div><div class="chart" id="test3"></div><div class="chart" id="test4" ></div><div class="chart" id="test5" ></div></div>
</div>
</body>
<script>var chartDom = document.getElementById('test1');var myChart = echarts.init(chartDom);var option;option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]};option && myChart.setOption(option);
</script>
<script>var avg_money_bigdata_list = {{ avg_money_bigdata_list|tojson }}var avg_money_city_list = {{ avg_money_city_list|tojson }}var data_list = []var data_list2 = []for(var i in avg_money_bigdata_list){//console.log(avg_money_bigdata_list[i][0])data_list.push(parseInt(avg_money_bigdata_list[i][0]))}for(var i in avg_money_city_list){//console.log(avg_money_city_list[i][0])data_list2.push(parseInt(avg_money_city_list[i][0]))}console.log(data_list2)var chart_test2 = echarts.init(document.getElementById('test2'))chartOption2 = {title:{text: '大数据平均工资&平均城市工资(堆叠柱状图)',},xAxis: [{type: 'category',data: ['城市1', '城市2', '城市3', '城市4', '城市5', '城市6', '城市7','城市8','城市9','城市10','城市11']}],yAxis: [{type: 'value'}],series: [{name: '大数据平均工资',type: 'bar',stack:"bigData",emphasis: {focus: 'series'},data: data_list},{name: '平均城市工资',type: 'bar',stack:"bigData",emphasis: {focus: 'series'},data: data_list2}]}chart_test2.setOption(chartOption2)
</script>
<script>var avg_money_bigdata_list = {{ avg_money_bigdata_list|tojson }}var avg_money_city_list = {{ avg_money_city_list|tojson }}var data_list = []var data_list2 = []for(var i in avg_money_bigdata_list){//console.log(avg_money_bigdata_list[i][0])data_list.push(parseInt(avg_money_bigdata_list[i][0]))}for(var i in avg_money_city_list){//console.log(avg_money_city_list[i][0])data_list2.push(parseInt(avg_money_city_list[i][0]))}var chart_test3 = echarts.init(document.getElementById('test3'))chartOption3 = {title:{text: '大数据平均工资&平均城市工资',},xAxis: [{type: 'category',data: ['城市1', '城市2', '城市3', '城市4', '城市5', '城市6', '城市7','城市8','城市9','城市10','城市11']}],yAxis: [{type: 'value'}],series: [{name: '大数据平均工资',type: 'bar',emphasis: {focus: 'series'},data: data_list},{name: '平均城市工资',type: 'bar',emphasis: {focus: 'series'},data: data_list2}]}chart_test3.setOption(chartOption3)</script>
<script>var chart_test4 = echarts.init(document.getElementById('test4'))var avg_money_bigdata_list = {{ avg_money_bigdata_list|tojson }}var avg_money_city_list = {{ avg_money_city_list|tojson }}var data_list = []var data_list2 = []for(var i in avg_money_bigdata_list){if(i<=5)data_list.push(parseInt(avg_money_bigdata_list[i][0]))}for(var i in avg_money_city_list){if(i<=5)data_list2.push(parseInt(avg_money_city_list[i][0]))}option4 = {title:{text:'工资分布'},darkMode:true,radar:{indicator:[{name:'test1',max:15000},{name:'test2',max:15000},{name:'test3',max:15000},{name:'test4',max:15000},{name:'test5',max:15000},]},series:[{name:'test',type:'radar',data:[{value:data_list},{value:data_list2}]}]}chart_test4.setOption(option4)
</script>
<script>
//jinjin2取值方式
var arr = [{% for i in data %} "{{i}}", {% endfor %}]
var arr2 = {{ data|tojson }}
arr.forEach(function(v,i,arr){console.log(v)
})
var chart_test5 = echarts.init(document.getElementById('test5'))
option5 = {title:{text:'test'}}
chart_test5.setOption(option5)
</script>
</html>

test2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test2</title><script type="text/javascript" src="/static/js/echarts.js"></script><script type="text/javascript" src="/static/js/jquery.min.js"></script><script type="text/javascript" src="/static/js/js2wordcloud.js"></script>
</head>
<style>html , body , .content {display: flex;justify-content: center;flex-wrap: wrap;width:100%;height:100%;padding: 0;margin: 0;
}
.content {padding: 40px;
}
.header {height: 10%;width: 100%;font-size: 24px;font-weight: 700;line-height: 60px;text-align: center;
}.chart{width:600px;
height:400px;
}</style>
<body>
<div class="content"><div class="header"></div><div class="body"><div class="chart" id="test1"></div><div class="chart" id="test2"></div><div class="chart" id="test3"></div></div>
</div>
</body>
<script>var data_list = [{% for r in bar_data %} "{{r}}", {% endfor %}]var data_list2 = [{% for i in bigData_object %}"{{i.avg_money}}",{% endfor %}]var test1 = document.getElementById('test1')var chart1 = echarts.init(test1)var option1 = {title:{text: '双柱状图',},xAxis: [{type: 'category',data: ['城市1', '城市2', '城市3', '城市4', '城市5']}],yAxis: [{type: 'value'}],series: [{name: '大数据平均工资',type: 'bar',emphasis: {focus: 'series'},data: data_list},{name: '平均城市工资',type: 'bar',emphasis: {focus: 'series'},data: data_list2}]}chart1.setOption(option1)</script>
<script>var data_list = [{% for r in bar_data %} "{{r}}", {% endfor %}]var data_list2 = [{% for i in bigData_object %}"{{i.avg_money}}",{% endfor %}]var test2 = document.getElementById('test2')var chart2 = echarts.init(test2)option2 = {title:{text:'雷达图'},radar:{indicator:[{name:'city1',max:18000},{name:'city2',max:18000},{name:'city3',max:18000},{name:'city4',max:18000},{name:'city5',max:18000}]},series:[{name:'avg VS bigdata',type:'radar',data:[{value:data_list,name:'avg'},{value:data_list2,name:'bigdata'}]}]}chart2.setOption(option2)</script>
<script>var data_list = [{% for r in bar_data %} "{{r}}", {% endfor %}]var data_list2 = [{% for i in bigData_object %}"{{i.avg_money}}",{% endfor %}]var test3 = document.getElementById('test3')var chart3 = echarts.init(test3)option3 = {title:{text:'南丁格尔图'},series:[{type:'pie',radius:[50,80]}]}chart3.setOption(option3)</script>
</html>

Flask框架可视化模板相关推荐

1. Flask框架之模板继承与案例05

   Flask框架之模板继承与案例05 一,模版继承 二,静态文件的配置 1.这里列举一个小例子: 三,模版案例(制作豆瓣评分页面) 1.效果图: 2.数据准备: 3.代码链接 一,模版继承 Flask中 ...

2. Flask框架Jinjia模板中常用语法

   文章目录 1.变量表示 2.判断 3.for循环 4.继承 5.块 6.url链接 7.加载静态文件 1.变量表示 {{ args }} 2.判断 {% if a == 1 %}{% endif %} ...

3. flask html 模板继承,Flask框架模板继承实现方法分析

   Flask框架模板继承实现方法分析 本文实例讲述了Flask框架模板继承实现方法.分享给大家供大家参考,具体如下: 在模板中,可能会遇到以下情况: 多个模板具有完全相同的顶部和底部内容 多个模板中具有 ...

4. flask框架中的Jinja2模板引擎

   简介 在flask框架中通常使用Jinja2模板引擎来实现复杂页面的渲染. 本章主要介绍Jinja2模板引擎的基本结构和使用方法. 如何使用flask框架渲染模板 在模板中传递一个或者多个参数 if语 ...

5. Flask框架基础入门教程

   文章目录 前言 Flask 基础概念和安装 Flask 快速入门小应用 Flask 之模板的使用 后续,待更新.... 前言 最近开始学习flask 框架,本文用于flask 框架的基础入门学习,版本 ...

6. 用Pycharm开发Flask框架设置debug模式没有效果的解决办法

   debuge模式 在app.run()中传入一个关键字参数debug ,app.run(debug=True),就设置当前项目为debug模式 debug模式的两大功能: 1.当程序出现问题的时候,可 ...

7. 通过plotly.express库和Flask框架部署企鹅数据可视化的网页

   这里不废话,直接入主题. 1.企鹅数据表下载网址 说明:阿里云天池提供大量免费的数据表,学习数据可视化的朋友可以自己去下载. 南极洲企鹅数据表下载地址 2.Flask框架的项目的文件目录如图 这里主要 ...

8. Python+Flask框架搭建可视化网站

   Python+Flask框架搭建可视化网站 一.项目结构 二.app.py from flask import Flask,render_template import sqlite3app = Fl ...

9. flask mysql项目模板渲染_Flask框架模板渲染操作简单示例

   本文实例讲述了Flask框架模板渲染操作.分享给大家供大家参考,具体如下: from flask import render_template from flask import Flask from ...

最新文章

1. 使用终端建立自己需要工程
2. Linux服务器通过rz/sz轻松上传下载文件
3. Matlab并行编程方法
4. 【直播】如何设计性能更强大的深度卷积神经网络
5. 【转】Google Maps Android API V2的使用及问题解决
6. （81）FPGA复位激励（task）
7. 如何用JS实现泛玉米解析
8. matlab与计量经济模型,计量经济学和matlab.pdf
9. Lumen开发：结合Redis实现消息队列（3）
10. 2016国内移动广告平台排行榜
11. 常见内网穿透工具使用总结
12. mysql gay锁_MySQL事务（二） - osc_gay6i4ve的个人空间 - OSCHINA - 中文开源技术交流社区...
13. Unity性能优化之物理引擎的优化（三）
14. 无人机基础知识：多旋翼无人机自动控制原理与算法
15. Git对G码云上项目的上传及同步
16. 运维的一些日常知识点
17. 成成你好呀笔记整理（知识点合集二）
18. 《利用python进行数据分析》读书笔记--第十一章 金融和经济数据应用（一）
19. WEB——07JDBC
20. 这是什么一个可以升级的系统 可为什么没有说明书 自己摸索 你玩儿我吧 一个得到了一套可以升级的军事系统的年轻人，以后路就应该坑到底

热门文章

1. MySQL输入密码闪退的解决办法
2. 致力打造下一代云原生分布式消息系统，StreamNative 完成源码资本数百万美元 Pre-A 轮融资，红杉中国种子基金跟投...
3. 小程序反编译 g is not defined_身边程序用的IDA Pro for Mac(静态反编译软件)
4. 如何攻克数据库应用头号难题？数位产学研大咖这样解读
5. 网友传秘方：解决新版SP1中BT下载慢问题
6. 五十七、爬取链家网北京二手房信息，并进行线性回归建模
7. 《网络攻防技术》黑客与工具
8. 漫画商城的设计与实现
9. MATLAB写歌曲（艺术与科学的 MEET）
10. 为什么安装office后,xls文件不显示excel图标