Flask+Echarts实现数据可视化

Posted 2021-03-12 xmg520

任务说明：

1. 基于Flask-SQLAlchemy框架编写数据库映射模型，完成数据库表结构映射模型。
2. 编写可视化后台处理程序，按照三个数据统计图表的数据格式进行数据封装，并将封装后的数据传递到Jinja2模板的自定义变量中。
3. 在前端页面中，使用Jinja2模板引擎获取相关统计图表数据并传递给前端页面中相应的echarts组件。

4. 运行程序，访问本地可视化网页URL，查看数据可视化Web页面。

   完成echarts_front.html文件的以下函数编码实现如下功能：

5. 将2018最受欢迎的10个网站及其点击量，依照点击量绘制成一幅柱状图与一幅饼图，并显示在网页上。

6. 将王俊凯、王源和杨洋分别在2016年1月至2018年12月每个月的出现的F次数共三条折线绘制到同一幅图折线图中，并显示在网页。

项目结构：

1. init

from flask import Flask
from flask_sqlalchemy import SQLALchemy
from config import Config

app = Flask(__name__)
app.config.from_object(Config)
db = SQLALchemy(app)

2.config

class Config(Object):
  SQLALCHEMY_DATABASE_URI = ‘mysql+pymysql://root:root@localhost:3306/db_data_1’
  SQLALCHEMY_COMMIT_ON_TEARDOWN = True
  SQLALCHEMY_TRACK_MODIFICATIONS = True

1. models

#对应Url_top10表
class Url_top10(db.Model):
    __tablename__ = 'url_top10'
    url = db.Column(db.String(255),primary_key=True)
    count = db.Column(db.Integer)



#对应key_max表
class Key_max(db.Model):
    __tablename__ = 'key_max'
    year = db.Column(db.String(255),primary_key=True)
    count = db.Column(db.Integer)
    keyword = db.Column(db.String(255))

4.app

from flask import render_template
from models import Url_top10,Key_max
from __init__ import app,db

@app.route('/')
def my_echart():

    # 将2018最受欢迎的10个网站及其点击量
    url_topdata = Url_top10.query.order_by(Url_top10.count.desc()).all()
    url_tops = {}

    for i in range(len(url_topdata)):
        url_tops[url_topdata[i].url] = url_topdata[i].count

    # 王俊凯、王源和杨洋分别在2016年1月至2018年12月每个月的出现的次数
    data_count = Key_max.query.filter_by(keyword='王俊凯').all()
    # wjk_data = Key_max.query.filter(Key_max.keyword=='王俊凯').all()
    wjk_data = db.session.query(Key_max.year,Key_max.count).filter(Key_max.keyword=='王俊凯').all()
    wy_data = db.session.query(Key_max.year,Key_max.count).filter(Key_max.keyword=='王源').all()
    yy_data = db.session.query(Key_max.year,Key_max.count).filter(Key_max.keyword=='杨洋').all()
    wjk_vals = {}
    wy_vals = {}
    yy_vals = {}
    for i in range(len(wjk_data)):
        wjk_vals[wjk_data[i].year] = wjk_data[i].count
        wy_vals[wy_data[i].year] = wy_data[i].count
        yy_vals[yy_data[i].year] = yy_data[i].count
    return render_template('visual.html',url_tops=url_tops,wjk_vals=wjk_vals,wy_vals=wy_vals,yy_vals=yy_vals)

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

前端页面采用Echarts、Jinjia2实现

效果图：