Flask使用Pyecharts在单个页面展示多个图表的方法
作者:码蚁编程 发布时间:2021-10-12 18:16:35
在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在单个页面展示多个图表的方法,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:http://www.crazyant.net/2419.html?utm_source=tuicool&utm_medium=referral
猜你喜欢
- 强大的group by 代码如下:select stdname, isnull(sum( case stdsubject whe
- 与前面一样我们会用fso来对文件或文件夹进行创建与删除操作了,其实fso有强大的功能但非常危险的哦,下面我们不来看看删除实例吧,在这些例子,
- 接触python已有一段时间了,下面针对python基础知识的使用做一完整梳理:1)避免‘\n'等特殊字符的两种方式:a)利用转义字
- 1. tensorflow模型文件打包成PB文件import tensorflow as tffrom tensorflow.python.
- 印象中最早看老外个人网站就挺纳闷,怎么人家都没有www,这样也可以?经过不断尝试,我发现确实不录入www要快捷的多,但不清楚怎么能做到。几年
- php中可以使用 mb_detect_encoding() 函数来判断字符串是什么编码的。当在php中使用mb_detect_encodin
- 项目信号处理和提取部分用到了matlab,需要应用到工程中方便研究。用具有万能粘合剂之称的“Python”。具体方法如下:1.python中
- 背景:准备给长辈买个手机,有关手机大小,网购平台基本只有手机尺寸和分辨率的文本数据,因而对手机屏幕大小没有直观感受,虽然网上有比较手机大小的
- 1.func Copy(dst Writer, src Reader) (written int64, err error)这个函数是从一个
- 首先说说什么是内存泄露,在一个进程中,如果某一块内存无法访问,且直到进程结束为止也无法释放,那么就发生了内存泄露。通常这种情况发生在C++之
- 今天为大家介绍几个Python“装逼”实例代码,python绘制樱花、玫瑰、圣诞树代码实例,主要使用了turtle库Python绘制樱花代码
- 如何通过表单创建一个Word?举个例子吧,我们先创建一个表单文件docform.htm,再用ASP程序(doccreate.asp)来处理表
- 采集中 或者 在线添加文章中 都可以用到此功能俺自己在baidu上搜索的保存远程图片到本地的代码 感觉比较难用点 而且没有现成的比较全的代码
- 以前讲过利用phantomjs做爬虫抓网页 https://www.jb51.net/article/55789.htm 是配合选择器做的利
- 一朋友委托我帮他投票,地址在: http://publish.sina.com.cn/04/13/413/search.php 投票的链接是
- 下面的这个函数实现的功能是列出某文件夹下的所有文件,以文件名字母排序,先数字后字母再到中文。<%
- 前言在做项目中,网站前台或者后台有些数据需要在多个视图页面使用,例如用户基本信息数据,菜单展示数据。首先想到的是在每个控制器里传入这些需要的
- 质数(Prime number),又称素数,指在大于1的自然数中,除了1和该数自身外,无法被其他自然数整除的数(也可定义为只有1与该数本身两
- 目录1.列表2.使用格式3.一些很有用的函数4.元组 tuple5.元组的常用函数1.列表python没有数组,而是引入了列表(list),
- LoadRunner监控MySQLhttp://www.docin.com/p-92272846.htmlAdvanced MySQL Pe