Flask 前后端分离
Step 0: 新建一个 Flask 项目
$ mkdir pyecharts-flask-demo $ cd pyecharts-flask-demo $ mkdir templates
Step 1: 拷贝 pyecharts 模板
将 pyecharts 模板,位于 pyecharts.render.templates
拷贝至刚新建的 templates 文件夹
chenjiandongx@DESKTOP-E83NUHA:/mnt/d/Python/pyecharts-flask-demo/templates$ tree . ├── jupyter_lab.html ├── jupyter_notebook.html ├── macro ├── nteract.html ├── simple_chart.html ├── simple_page.html └── table.html
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