一个简单的flask、echarts可视化实例

最新推荐文章于 2023-09-26 15:34:07 发布

ybqdren

最新推荐文章于 2023-09-26 15:34:07 发布

阅读量1.2k

点赞数 1

分类专栏：其他语言大学积累

本文链接：https://blog.csdn.net/qq_43795348/article/details/108865588

版权

flask sqlite html 数据可视化

大学积累同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

其他语言

18 篇文章 0 订阅

订阅专栏

进阶版本见博客：从0开始搭建Flask-Echarts数据可视化项目

一、项目结构

在这里插入图片描述

二、代码

1.app.py

# -*- coding:utf-8 -*-
# Created by ZhaoWen on 2020/9/28

from flask import Flask
from flask import render_template
from flask_sqlalchemy import SQLAlchemy


app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///game.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
db = SQLAlchemy(app)


class Tbl_Video_Game_Sales(db.Model):
    __tablename__ = 't_video_game_sales'
    Rank = db.Column(db.String(255),primary_key=True)   #销售排名
    Name = db.Column(db.String(255))     #游戏名称
    Platform = db.Column(db.String(255))    #该游戏发布平台
    Year = db.Column(db.Integer)    #发布年份（1980-2016）
    Genre = db.Column(db.String(255))   #游戏类型
    Publisher = db.Column(db.String(255))    #出版公司
    NA_Sales = db.Column(db.DECIMAL(255,2))  #北美区域销量（以百万为单位计数）
    EU_Sales = db.Column(db.DECIMAL(255,2))  #欧美区域销量（以百位为单位计数）
    JP_Sales = db.Column(db.DECIMAL(255,2))  #日本区域销量（以百位为单位计数）
    Other_Sales = db.Column(db.DECIMAL(255,2))   #其他国家销量（以百位为单位计数）
    Global_Sales = db.Column(db.DECIMAL(255,2))   #全球销量（以百位为单位计数）


@app.route('/line')
def line_show():
    db.create_all()
    db.session.commit()

    game = dict()
    for y in range(2009,2016,1):
        game[y] = Tbl_Video_Game_Sales.query.filter(Tbl_Video_Game_Sales.Year == y).count()
    return render_template('line-chart.html',game = game)


if __name__ == '__main__':
    app.run(debug=True)

2.templates/line-chart.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script src="/static/echarts.min.js"></script>
        <style>
            #main{
                width: 1000px;
                height: 500px;
                margin-left: auto;
                margin-right: auto;
                margin-top:20px;
            }

            #content-id{
                text-align: center;
                font-size: 30px;
                padding-top: 20px;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
    </body>
    <script>
        var line_chart = echarts.init(document.getElementById('main'));
        var option = {
            title:{
                text:'2010年~2015年发行游戏数量增长趋势',
                subtext:'单位：个 (数据纯属虚构)'
            },
            tooltip:{},
            xAxis:{
                type:'category',
                data:[{%for g in game%}'{{ g }}',{% endfor %}]
            },
            yAxis:{},
            series:[{
                type:'line',
                data:[{% for g in game%}{{game[g]}},{% endfor %}]
            }]
        };
        line_chart.setOption(option);
    </script>
</html>

三、效果展示

在这里插入图片描述

上述代码以及数据我已经打包传到csdn上了，有需要自行下载：flask、echarts可视化小实例

ybqdren

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
一个简单的flask、echarts可视化实例

项目结构如下：app.py# -*- coding:utf-8 -*-# Created by ZhaoWen on 2020/9/28from flask import Flaskfrom flask import render_templatefrom flask_sqlalchemy import SQLAlchemyapp = Flask(__name__)app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:66666
复制链接

扫一扫

专栏目录