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


Posted in Python onAugust 05, 2019

在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在单个页面展示多个图表的方法

总结

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

Python 相关文章推荐
python文件和目录操作方法大全(含实例)
Mar 12 Python
python使用电子邮件模块smtplib的方法
Aug 28 Python
python实现二维码扫码自动登录淘宝
Dec 27 Python
Django框架的中的setting.py文件说明详解
Oct 15 Python
python+selenium 鼠标事件操作方法
Aug 24 Python
django认证系统实现自定义权限管理的方法
Aug 28 Python
Python class的继承方法代码实例
Feb 14 Python
Python的in,is和id函数代码实例
Apr 18 Python
Python基于pandas爬取网页表格数据
May 11 Python
使用OpenCV去除面积较小的连通域
Jul 05 Python
Python实现自动整理文件的脚本
Dec 17 Python
python中sys模块的介绍与实例
Apr 17 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
Aug 05 #Python
用django设置session过期时间的方法解析
Aug 05 #Python
基于python 微信小程序之获取已存在模板消息列表
Aug 05 #Python
Python中typing模块与类型注解的使用方法
Aug 05 #Python
Python及Pycharm安装方法图文教程
Aug 05 #Python
python redis连接 有序集合去重的代码
Aug 04 #Python
Django中URL的参数传递的实现
Aug 04 #Python
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
详解php反序列化
2020/06/10 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
在web中js实现类似excel的表格控件
2016/09/01 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python 的 Socket 编程
2015/03/24 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
python模拟实现分发扑克牌
2020/04/22 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
Python 语言实现六大查找算法
2021/06/30 Python