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

197 浏览量更新于2023-03-03 评论 6 收藏 106KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了Flask使用Pyecharts在单个页面展示多个图表的方法，在Flask页面展示echarts，主要有两种方法，

文中给大家介绍的非常详细,需要的朋友可以参考下

在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>

<head>

<title>Title</title>

</head>

<body>

<div>

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 使用刚指定的配置项和数据显示图表。

myChart.setOption({{ bar_data | safe }});

</script>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38544781

粉丝: 9
资源: 941

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

flask_echarts:使用flask和echarts绘制图表的示例

利用 django 及 pyecharts 做一个简单dashboard 展示页面

利用 Flask 动态展示 Pyecharts 图表数据的几种方法

echarts 一个页面 多图表

单个页面使用多个ckeditor4

python使多个图表出现在同一个界面

pytorch 使用单个gpu与多个gpu进行训练与测试的方法

python pyqt5ui界面设计单个窗口多个页面

pyecharts 卡片图

vue 单个数据复制成多个

screenfull可以单个页面全屏嘛

ssm框架如何根据单个id查询多个数据

linux用命令zip压缩单个文件和多个文件有何不同

echarts如何布局

Android 对单个页面 uimode 设置监听

echarts中单个的圆柱形图表是什么

springboot写一个方法接收单个文件、多个文件、字符串、List、Map、BigDecimal、Float、Long的完整案例

数据库中，试分析哪些完整性约束只针对单个属性，哪些完整性约束可以针对多个属性？ 哪些只针对一个表，哪些针对多个表？

那为什么sqoop在用单个map时就算数据量与用多个map时一样的数据量，也没有超过单个map的分配限制，反而多个map就会呢

vue单个页面设置背景图片

会员权益专享

最新资源

echarts 一个页面多图表

数据库中，试分析哪些完整性约束只针对单个属性，哪些完整性约束可以针对多个属性？哪些只针对一个表，哪些针对多个表？