文章目录
- models
- static
- templates
- views
- manage
- app子文件
- html
- error.html
- echarts.html
- echarts2.html
- main.html
- test2.html
目录结构
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
- 通过create_app(config_name)函数创建app，并设置各种配置
- 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>
