pyecharts结合flask架构的应用

AI 摘要 / TL;DR

pyecharts结合flask架构的应用 来源: https://www.ucloud.cn/yun/128769.html 作者: 89542767 发布日期: 发布于2022 12 24 14:42 此篇文章通常是详细介绍了pyecharts结合flask架构,通常是详细介绍怎样在Flask架构使得用pyecha

来源: 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

  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模块某些简易应用,在官方文档中还有一些升阶应用,常常开展数据分析图表的开发者们可以参考一下官方文档开展学习。