pyecharts结合flask架构的应用

介绍

作为一个本际云服务器推荐网的小编，今天为大家介绍pyecharts结合flask架构的应用。通过实例编码，为大家展示在Flask架构下如何使用pyecharts。

pyecharts结合flask架构的应用

Flask模版3D渲染

首先，建立一个flask项目，目录结构较低，但是需要注意模板文件需存放在templates文件夹下。下述是flask项目的简易目录结构：

.├──server.py
└──templates

在这里介绍一个实例代码：

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()-&gt;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依赖。

<!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生成图表。下面是server.py中的后端代码。目录结构和模板渲染一致，但需要注意一点，由于json数据类型的问题，无法将pyecharts中的JSCode类型的数据转换成json数据格式返回到前端页面中使用。因此，尽量避免在使用前后端分离时使用JSCode进行画图。

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()-&gt;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()