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求素数示例分享
Feb 16 Python
Python open()文件处理使用介绍
Nov 30 Python
Python全局变量操作详解
Apr 14 Python
Python远程桌面协议RDPY安装使用介绍
Apr 15 Python
Python多线程同步---文件读写控制方法
Feb 12 Python
在Python中使用Neo4j的方法
Mar 14 Python
Python实现代码统计工具
Sep 19 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
Apr 07 Python
基于Python 的语音重采样函数解析
Jul 06 Python
Python之字典添加元素的几种方法
Sep 30 Python
Python基于tkinter canvas实现图片裁剪功能
Nov 05 Python
如何利用python 读取配置文件
Jan 06 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
进一步了解Python中的XML 工具
2015/04/13 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
python numpy元素的区间查找方法
2018/11/14 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
python 命令行传入参数实现解析
2019/08/30 Python
pytorch梯度剪裁方式
2020/02/04 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
中专生自荐信
2013/10/12 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
工程质量承诺书
2014/03/27 职场文书
中秋晚会策划方案
2014/06/12 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
2014年信访工作总结
2014/11/17 职场文书