# pyecharts结合flask架构的应用 > 作者/来源: UCloud 运营管理员 > 发布时间: 2022-12-24T06:42:00.000Z > 分类: 解决方案 > 标签: AI, CDN, Java > 原文链接: http://117.50.162.249:3000/yun/articles/1936 --- # pyecharts结合flask架构的应用 > 来源: https://www.ucloud.cn/yun/128769.html > 作者: 89542767 > 发布日期: 发布于2022-12-24 14:42 此篇文章通常是详细介绍了pyecharts结合flask架构，通常是详细介绍怎样在Flask架构使得用pyecharts，文中根据实例编码为大家介绍得非常详尽,需用的小伙伴可以参考一下 　　详细介绍 　　文中通常是详细介绍怎样在Flask架构使得用pyecharts，有关Flask架构应用这儿不去做详细详细说明~ 　　Flask模版3D渲染 　　首先要建立一个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即可访问服务，具体效果如下图所示： ![01.png](https://ucloud-blog.cn-bj.ufileos.com/articles/128769/images/128769_000.png) 　　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() ``` 　　汇总 　　两篇仅仅详细介绍了pyecharts模块某些简易应用，在官方文档中还有一些升阶应用，常常开展数据分析图表的开发者们可以参考一下官方文档开展学习。