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脚本实现下载合并SAE日志
Feb 10 Python
Python3 伪装浏览器的方法示例
Nov 23 Python
Python实现的计算马氏距离算法示例
Apr 03 Python
pow在python中的含义及用法
Jul 11 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
Nov 28 Python
在 Python 中接管键盘中断信号的实现方法
Feb 04 Python
Python实现Word表格转成Excel表格的示例代码
Apr 16 Python
Python 如何展开嵌套的序列
Aug 01 Python
python如何实现word批量转HTML
Sep 30 Python
如何用python批量调整视频声音
Dec 22 Python
Python深度学习之实现卷积神经网络
Jun 05 Python
怎么用Python识别手势数字
Jun 07 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
项目实践之javascript技巧
2007/12/06 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python 画图 图例自由定义方式
2020/04/17 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
全国道德模范事迹
2014/02/01 职场文书
小学数学教学反思
2014/02/02 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书