Flask 前后端分離
Step 1: 新建一個 Flask 項目
$ mkdir pyecharts-flask-demo $ cd pyecharts-flask-demo $ mkdir templates
Step 2: 新建一個 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>
Step 3: 編寫 flask 和 pyecharts 代碼渲染圖表
請將下面的代碼保存為 app.py 文件並移至項目的根目錄下。
目錄結構如下
sunhailindeMacBook-Pro:pyecharts_flask sunhailin$ tree -L 1
.
├── app.py
└── templates
注: 目前由於 json 數據類型的問題，無法將 pyecharts 中的 JSCode 類型的數據轉換成 json 數據格式返回到前端頁面中使用。因此在使用前后端分離的情況下盡量避免使用 JSCode 進行畫圖。
app.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()
Step 4: 運行項目
$ python app.py