pyecharts結合flask框架的使用

2022-06-29 18:02:32

介紹

本文主要介紹如何在Flask框架中使用pyecharts，關於Flask框架使用這裡不做具體說明~

Flask模板渲染

首先需要建立一個flask專案，flask專案對目錄結構要求不高，但是如果是前後端混合專案的話，模板檔案必須存放在templates資料夾下，否則檢視函數返回模板檔案時會提示找不到對應的檔案。下面是flask專案的簡單目錄結構：

.
├── 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="我是副標題"))
    )
    return c
@app.route("/")
def index():
    c = bar_base()
    return Markup(c.render_embed())
if __name__ == "__main__":
    app.run()

執行上述程式碼，使用瀏覽器開啟http://127.0.0.1:5000 即可存取服務，具體效果如下圖所示：

Flask前後端分離

建立flask專案和上述檔案目錄保持一致，前後端分離的情況下，就需要後端將pyecharts生成的圖表返回給前端，方法就是可以將圖表生成到一個html檔案中，然後返回給前端即可。

需要新建 HTML 檔案儲存位於專案根目錄的 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服務以及pyecharts生成圖表，目錄結構和模板渲染一致，這裡需要注意一個問題，目前由於 json 資料型別的問題，無法將 pyecharts 中的 JSCode 型別的資料轉換成 json 資料格式返回到前端頁面中使用。因此在使用前後端分離的情況下儘量避免使用 JSCode 進行畫圖。

下面是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="我是副標題"))
    )
    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()

同樣執行該專案，使用瀏覽器開啟 http://127.0.0.1:5000 即可存取服務。

總結

兩篇文章只是介紹了pyecharts模組的一些簡單使用，在官方檔案中還有很多進階使用，經常進行圖表分析的開發人員們可以參考官方檔案進行學習。

到此這篇關於pyecharts結合flask框架的使用的文章就介紹到這了,更多相關pyecharts flask框架內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

pyecharts結合flask框架的使用

目錄

介紹

Flask模板渲染

Flask前後端分離

總結

熱門文章