本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法，不会的话你来找我呀…
Flask 模板渲染
1. 新建一个项目 flask-echarts
在编辑器中选择 New Project，然后选择 Flask，创建完之后，Pycharm 会帮我们把启动脚本和模板文件夹都建好
2. 拷贝 pyecharts 模板
将链接中的以下模板 ├── jupyter_lab.html ├── jupyter_notebook.html ├── macro ├── nteract.html ├── simple_chart.html ├── simple_page.html └── table.html 全部拷贝到 tempaltes 文件夹中 github.com/pyecharts/p…
3.渲染图表
主要目标是将 pyecharts 生成的图表数据在视图函数中返回，所以我们直接在 app.py 中修改代码，如下：
from flask import Flask
from jinja2 import Markup
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()
直接运行，在浏览器中输入地址，直接将数据显示出来了
这是一个很简单的静态数据展示，别急好戏还在后头~
Flask 前后端分离
前面讲的是一个静态数据的展示的方法，用 pyecharts 和 Flask 结合最主要是实现一种动态更新数据，增量更新数据等功能！以上面讲解的内容为基础，在 templates 文件夹中新建一个 index.html 的文件，其中主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依赖。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>动态更新数据</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 result_json = ‘{{ result_json|tojson }}’;
// var result = JSON.parse(result_json);
var chart = echarts.init(document.getElementById(‘bar’), ‘gray’, {renderer: ‘canvas’});
$.ajax({
 本文来源gao@!dai!ma.com搞$$代^@码5网@; type: “GET”,
url: “http://127.0.0.1:5000/barChart”,
dataType: ‘json’,
data: {result: result_json},
success: function (result) {
chart.setOption(result);
}
});
}
)
</script>
</body>
</html>
转载请注明原文链接：利用 Flask 动态展示 Pyecharts 图表数据的几种方法
