Flask+Echarts實現數據可視化(一)

任務說明：

1. 基於Flask-SQLAlchemy框架編寫數據庫映射模型，完成數據庫表結構映射模型。
2. 編寫可視化后台處理程序，按照三個數據統計圖表的數據格式進行數據封裝，並將封裝后的數據傳遞到Jinja2模板的自定義變量中。
3. 在前端頁面中，使用Jinja2模板引擎獲取相關統計圖表數據並傳遞給前端頁面中相應的echarts組件。
4. 運行程序，訪問本地可視化網頁URL，查看數據可視化Web頁面。

完成echarts_front.html文件的以下函數編碼實現如下功能：

1. 將2018最受歡迎的10個網站及其點擊量，依照點擊量繪制成一幅柱狀圖與一幅餅圖，並顯示在網頁上。
2. 將王俊凱、王源和楊洋分別在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

3. 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實現

效果圖：