Flask框架可视化模板

一条java闲鱼

已于 2022-08-27 23:33:52 修改

阅读量420

点赞数

分类专栏： echarts flask 文章标签： flask python

于 2021-11-14 17:52:23 首次发布

本文链接：https://blog.csdn.net/m0_46522108/article/details/121320439

版权

echarts 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

flask

2 篇文章 0 订阅

订阅专栏

文章目录

目录结构

models

__init__.py

from app.extensions import db

from .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 db

class 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 db


class 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 db


class 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 db


class 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 db


class 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 CityRestaurantNum

main = 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_rs


def get_city_restaurant_number():
    gcrn_rs = CityRestaurantNum.query.order_by(desc('restaurant_numb')).all()
    return gcrn_rs


def get_total_foodtype_count(rs_sql):
    data_dict = {}
    numbers = []
    for rs in rs_sql:
        numbers.append(int(rs.number))
        data_dict['value'] = numbers
        data_dict['name'] = rs.city
    return data_dict


def 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 app


def config_errorhandler(app):
    # 如果在蓝本定制，只针对本蓝本的错误有效，
    # 可以使用app_errorhandler定制全局有效的错误显示
    @app.errorhandler(404)
    def page_not_found(e):
        return render_template('errors/404.html')

config.py

import os

base_dir = os.path.abspath(os.path.dirname(__file__))


# 通用配置
class Config:
    # 秘钥
    SECRET_KEY = os.environ.get('SECRET_KEY') or '123456'
    # 数据库
    SQLALCHEMY_COMMIT_ON_TEARDOWN = True
    SQLALCHEMY_TRACK_MODIFICATIONS = False

    # 额外的初始化操作，即使什么内容都没有写，也是有意义的
    @staticmethod
    def 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 sessionmaker

from app.models import AvgMoneyBigData
from app.extensions import db

from 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)
    # hujing
    print(db.session.execute("select * from avg_money_bigdata").all())


    # 通过id 单查
    query_one = session.query(AvgMoneyBigData).get(1)
    print(query_one)
    # hujing
    print(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)
    # hujing
    print(session.execute("select avg_money from avg_money_bigdata where avg_money = 5000").all())


    # count
    query_count = session.query(AvgMoneyBigData).count()
    print(query_count)
    # hujing
    print(session.execute("select count(*) from avg_money_bigdata").first()[0])

    # limit
    query_limit = session.query(AvgMoneyBigData).limit(5).all()
    print(query_limit)
    # hujing
    print(session.execute("select * from avg_money_bigdata limit 5").all())

    # order_by
    query_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 0523
            textStyle:{
                //文字颜色
                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'
                }
            },
            //modified0523
            itemStyle: {
               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 italic
                textFont: '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 italic
                textFont: '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>

一条java闲鱼

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Flask框架可视化模板

目录结构models__init__.pyfrom app.extensions import dbfrom .hot_work import HotWorkfrom .bigdata_work import BigDataWorkfrom .avg_money_city import AvgMoneyCityfrom .avg_money_bigdata import AvgMoneyBigDatafrom .CityRestaurantNum import CityRestaur
复制链接

扫一扫

专栏目录