快捷導(dǎo)航

pyecharts結(jié)合flask框架的使用

更新時間：2022年06月29日 14:13:02 作者：程序媛小莊

這篇文章主要介紹了pyecharts結(jié)合flask框架，主要是介紹如何在Flask框架中使用pyecharts，本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

介紹

本文主要介紹如何在Flask框架中使用pyecharts，關(guān)于Flask框架使用這里不做具體說明~

Flask模板渲染

首先需要創(chuàng)建一個flask項(xiàng)目，flask項(xiàng)目對目錄結(jié)構(gòu)要求不高，但是如果是前后端混合項(xiàng)目的話，模板文件必須存放在templates文件夾下，否則視圖函數(shù)返回模板文件時會提示找不到對應(yīng)的文件。下面是flask項(xiàng)目的簡單目錄結(jié)構(gòu)：

.
├── server.py
└── templates

下述代碼是server.py中的示例的代碼：

from flask import Flask
from jinja2 import Markup, Environment, FileSystemLoader?
from pyecharts import options as opts
from pyecharts.charts import Bar?
app = Flask(__name__, static_folder="templates")?
def bar_base() -> Bar:
    c = (
        Bar()
        .add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
        .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
        .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副標(biāo)題"))
    )
    return c?
@app.route("/")
def index():
    c = bar_base()
    return Markup(c.render_embed())?
if __name__ == "__main__":
    app.run()

運(yùn)行上述代碼，使用瀏覽器打開http://127.0.0.1:5000 即可訪問服務(wù)，具體效果如下圖所示：

Flask前后端分離

創(chuàng)建flask項(xiàng)目和上述文件目錄保持一致，前后端分離的情況下，就需要后端將pyecharts生成的圖表返回給前端，方法就是可以將圖表生成到一個html文件中，然后返回給前端即可。

需要新建 HTML 文件保存位于項(xiàng)目根目錄的 templates 文件夾，這里以如下 index.html 為例. 主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依賴。

下述是index.html中的代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
        $(
            function () {
                var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/barChart",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )
    </script>
</body>
</html>

然后就需要編寫后端的代碼了，包括flask服務(wù)以及pyecharts生成圖表，目錄結(jié)構(gòu)和模板渲染一致，這里需要注意一個問題，目前由于 json 數(shù)據(jù)類型的問題，無法將 pyecharts 中的 JSCode 類型的數(shù)據(jù)轉(zhuǎn)換成 json 數(shù)據(jù)格式返回到前端頁面中使用。因此在使用前后端分離的情況下盡量避免使用 JSCode 進(jìn)行畫圖。

下面是server.py中的后端代碼：

from random import randrange?
from flask import Flask, render_template?
from pyecharts import options as opts
from pyecharts.charts import Bar??
app = Flask(__name__, static_folder="templates")?
def bar_base() -> Bar:
    c = (
        Bar()
        .add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
        .add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
        .add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副標(biāo)題"))
    )
    return c?
@app.route("/")
def index():
    return render_template("index.html")?
@app.route("/barChart")
def get_bar_chart():
    c = bar_base()
    return c.dump_options_with_quotes()?
if __name__ == "__main__":
    app.run()

同樣運(yùn)行該項(xiàng)目，使用瀏覽器打開 http://127.0.0.1:5000 即可訪問服務(wù)。