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基于xml parse实现解析cdatasection数据
Sep 30 Python
Python中使用多进程来实现并行处理的方法小结
Aug 09 Python
深入浅出学习python装饰器
Sep 29 Python
单利模式及python实现方式详解
Mar 20 Python
利用pyinstaller打包exe文件的基本教程
May 02 Python
Python pip替换为阿里源的方法步骤
Jul 02 Python
django将网络中的图片,保存成model中的ImageField的实例
Aug 07 Python
Python定时发送天气预报邮件代码实例
Sep 09 Python
解决python 虚拟环境删除包无法加载的问题
Jul 13 Python
python调用私有属性的方法总结
Jul 24 Python
基于Python实现下载网易音乐代码实例
Aug 10 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
Feb 01 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
Jquery Ajax请求代码(2)
2011/01/07 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
React Native react-navigation 导航使用详解
2017/12/01 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python爬虫文件下载图文教程
2018/12/23 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
JDO的含义
2012/11/17 面试题
企业办公室岗位职责
2014/03/12 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL