Flask使用Pyecharts在单个页面展示多个图表的方法

更新时间：2019年08月05日 09:22:41 作者：码蚁编程

这篇文章主要介绍了Flask使用Pyecharts在单个页面展示多个图表的方法，在Flask页面展示echarts，主要有两种方法，文中给大家介绍的非常详细,需要的朋友可以参考下

在Flask页面展示echarts，主要有两种方法：

方法1、原生echarts方法

自己在前端引入echarts.js文件、自己创建div、自己初始化echarts对象、自己从官网复制并且配置图表、自己给echarts对象设置配置项实现绘制，这种方法的缺点是配置项都是js的形式比较繁琐，对于后端开发人员来说有点过于参与前端js部分的配置开发；

这种方式参照echarts官网的方式，其实跟flask没有多大关系，php/java不同后端语言都一样，地址

方法2：使用pyecharts

pyecharts主要是做了一件事情，把js的配置option，完全抽离使用Python代码配置，把js的数据结构使用python的代码结构实现，让后端开发只需要配置数据就能搞定图表，真的很像matplotlib，当然echarts的强大使得pyecharts更强大；

但是这里真的要吐槽pyecharts，因为它包含多种输出图表结果的方式，没有一种是能够和flask完美配合的：

render()方法：默认会在当前目录生成 render.html 文件；这是什么鬼，什么场景会用到这种方式，竟然是默认的方式？真是怪异；
render()方法传入路径参数：传入路径参数，如 bar.render(“mycharts.html”)，这种方法好一点，可以设定文件路径，但是为毛要输出一个HTML，另外一点，我做一个网页，难道这个网页上除了这个图表没有其他数据和展示了？只有一个大大的echarts图表？
render_notebook()方法：这个方法能用在notebook中，这个我不吐槽，因为如果使用notebook，这个方法很好用，但是我要用于flask网页展示；
render_embed()方法：来自pyecharts的flask一章中的Markup(c.render_embed())，我估计作者根本没写过flask代码，不然为毛flask网页中只能展示一个echarts图表，我其他的数据展示，怎么用这个方法设置？我试图把render_embed()的结果传递给flask模板，结果发现这个函数的返回是一个整个HTML；
chart.dump_options()方法：这个方法是唯一一个我觉得能和flask配合不错的方法，能够实现一个flask网页中绘制很多个图表；然而却依然需要自己引入echarts.js文件、自己设定div、自己初始化echarts对象、自己给echarts对象设置图表配置，唯一简化的就是图表配置是来自于python服务端；

最后给出使用chart.dump_options()方法给一个flask网页配置多个图表的方法代码：

Python代码：

@app.route("/show_pyecharts")
def show_pyecharts():
  bar = (
    Bar()
      .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
      .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
  )
  # print(bar.render_embed())
  # print(bar.dump_options())
  return render_template(
    "show_pyecharts.html",
    bar_data=bar.dump_options()
  )

Flask模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/echarts.min.js"></script>
</head>
<body>
<h1>柱状图</h1>
<div>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({{ bar_data | safe }});
  </script>
 
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main2" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'));
 
    // 指定图表的配置项和数据
    var option2 = {{ bar_data | safe }};
 
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
  </script>
</div>
 
</body>
</html>

展示输出：

总结

以上所述是小编给大家介绍的Flask使用Pyecharts在单个页面展示多个图表的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

Python程序打包成可执行文件exe详解流程
你是否也有希望过写一些自己所需要的工具程序来使用，可有不想或者没时间精力学别的语言，本篇文章教你如何将用python语言写的程序打包成可执行的exe文件
2021-11-11
python关于第三方日志的QA记录详解
这篇文章主要为大家介绍了python关于第三方日志的QA记录详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
Python入门教程(二十九)Python的RegEx正则表达式
这篇文章主要介绍了Python入门教程(二十九)Python的RegEx,RegEx 或正则表达式是形成搜索模式的字符序列。RegEx 可用于检查字符串是否包含指定的搜索模式,需要的朋友可以参考下
2023-04-04
pytorch实现逻辑回归
这篇文章主要为大家详细介绍了pytorch实现逻辑回归，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
Django记录操作日志与LogEntry的使用详解
我们既知道如何记录变更日志,也知道如何获取变更日志,那么如何才能够在admin后台方便地查看操作日志呢?这篇文章主要给大家介绍了关于Django记录操作日志与LogEntry使用的相关资料,需要的朋友可以参考下
2022-01-01
Python+Selenium定位不到元素常见原因及解决办法(报：NoSuchElementException)
这篇文章主要介绍了Python+Selenium定位不到元素常见原因及解决办法(报：NoSuchElementException),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
pyhton中__pycache__文件夹的产生与作用详解
这篇文章主要介绍了pyhton中__pycache__文件夹的产生与作用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
Python基于更相减损术实现求解最大公约数的方法
这篇文章主要介绍了Python基于更相减损术实现求解最大公约数的方法,简单说明了更相减损术的概念、原理并结合Python实例形式分析了基于更相减损术实现求解最大公约数的相关操作技巧与注意事项,需要的朋友可以参考下
2018-04-04
Python使用sqlalchemy实现连接数据库的帮助类
这篇文章主要为大家详细介绍了Python如何使用sqlalchemy实现连接数据库的帮助类,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考下
2024-02-02
关于python pycharm中输出的内容不全的解决办法
这篇文章主要介绍了关于python pycharm中输出的内容不全的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01