Flask使用Pyecharts在单个页面展示多个图表的方法
在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在单个页面展示多个图表的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
python flask安装和命令详解
Flask Web开发实战学习笔记 Flask简介 Flask是使用Python编写的Web微框架.Web框架可以让我们不用关 心底层的请求响应处理,更方便高效地编写Web程序.因为Flask核心简 单且易于扩展,所以被称作微框架(micro framework).Flask有两个主 要依赖,一个是WSGI(Web Server Gateway Interface,Web服务器网关 接口)工具集--Werkzeug(http://werkzeug.pocoo.org/),另一个是 Jinja2模
-
使用Docker部署Nginx+Flask+Mongo的应用
Nginx做为服务器,Mongo为数据库支持,Flask为Python语言的Web框架,利用Docker的容器特性,可以简单地部署在linux服务器上 项目准备 项目主要目录如下 __ project-name |__ docker-file |__ ningx |__ Dockerfile |__ conf |__ nginx.conf |__ flask |__ Dockerfile |__ requirements.txt |__ mongo |__ Dockerfile |__ setu
-
Flask框架踩坑之ajax跨域请求实现
业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应用. 问题: 前端ajax请求后端接口出现跨域问题,如下图. 翻译:因为响应头没有"Access-Control-Allow-Origin",所以接口拒绝把数据返回给前端. 什么是Access-Control-Allow-Origin? Access-Control-Allow-Origi
-
Flask使用Pyecharts在单个页面展示多个图表的方法
在Flask页面展示echarts,主要有两种方法: 方法1.原生echarts方法 自己在前端引入echarts.js文件.自己创建div.自己初始化echarts对象.自己从官网复制并且配置图表.自己给echarts对象设置配置项实现绘制,这种方法的缺点是配置项都是js的形式比较繁琐,对于后端开发人员来说有点过于参与前端js部分的配置开发: 这种方式参照echarts官网的方式,其实跟flask没有多大关系,php/java不同后端语言都一样,地址 方法2:使用pyecharts pyech
-
设置ASP.NET页面的运行超时时间详细到单个页面及站点
全局超时时间 服务器上如果有多个网站,希望统一设置一下超时时间,则需要设置 Machine.config 文件中的 ExecutionTimeout 属性值. Machine.config 文件位于 %SystemRoot%\Microsoft.NET\Framework\%VersionNumber%\CONFIG\ 目录中. 例如: 复制代码 代码如下: <httpRuntime executionTimeout="90" maxRequestLength="409
-
基于javascript的JSON格式页面展示美化方法
{"name": "monkey","age": "24","height": 164.0} 如果想让以上json字符串在页面上展示的比较易读,即变成下面的style: { "name": "monkey", "age": "24", "height": 164.0cm } 本文介绍的方法基于javascri
-
elementUI同一页面展示多个Dialog的实现
要实现的效果如下: 首先官方文档是这样描述的: 但是我写了个小demo发现并不能直接平级放置即可,一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog. 原因如下:因为dialog先后顺序不同z-index设置的层级不同,所以必定会覆盖遮挡 那么我们要实现一个这样的效果不仅仅平级放置即可,就要用到里面的一个属性:modal 下面贴上代码: 总的思路就是:dialog先后顺序重叠问题,使用便宜去让它们错开:然后就是遮罩层导致不能点击z-index层级低的弹框,就要用到moda
-
jqueryMobile 动态添加元素,展示刷新视图的实现方法
jQuery Mobile的是一个很好的移动开发框架,你可能已经知道,虽然它有很多难以解决的问题,但是我相信后续版本jquery会修复--我是很喜欢jquery的.这并不是说它很完美无暇,很多开发人员遇到的情况也都难解决,比如:尝试使用代码来添加,更新或删除元素,使用JavaScript的页面跳转.在这篇博客文章中,我列出了一些动态添加组建重新刷新的方法. 1.Textarea field $('body').prepend('<textarea id="myTextArea"&
-
layuiAdmin循环遍历展示商品图片列表的方法
主页面内容 <div class="layui-fluid layadmin-cmdlist-fluid"> <script id="demo2" type="text/html"> <div class="layui-col-md2 layui-col-sm4"> <div class="cmdlist-container"> <a lay-href=
-
Pyecharts V1和V0.5之间相互切换的方法
目录 1.背景 2.实现过程 1.V0.5-->V1 2.V1-->V0.5 3.总结 前言: Pyecharts这个可视化库火爆,关于它,官方如是说:Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可.而 Python 是一门富有表达力的语言,很适合用于数据处理.当数据分析遇上数据可视化时,pyecharts 诞生了. 1.背景 前几天在Python交流群里边,有人就遇到了Pyecharts库版本的问题,目前来看,Pyecharts分为V
-
JavaScript获得页面base标签中url的方法
本文实例讲述了JavaScript获得页面base标签中url的方法.分享给大家供大家参考.具体如下: 如果网页中定义了base标签,我们可以通过js代码获得base的url地址 <!DOCTYPE html> <html> <head> <base id="htmldom" href="http://www.jb51.net/"> </head> <body> <p>Base UR
-
Smarty实现页面静态化(生成HTML)的方法
本文实例讲述了Smarty实现页面静态化(生成HTML)的方法.分享给大家供大家参考,具体如下: 为了减少数据库读取次数,某些内容不经常被更改的页面,比如文章详细页面需要做成HTML静态页面. 在使用Smarty的情况下,也可以实现页面静态化.下面先简单说一下使用Smarty时通常动态读取的做法. 一般分这几步: 1.通过URL传递一个参数(ID): 2.然后根据此ID查询数据库: 3.取得数据后根据需要修改显示内容: 4.assign需要显示的数据: 5.display模板文件. Smarty
-
请求转发jsp页面乱码问题的快速解决方法
•在最近的项目中 使用了jsp+servlet来开发项目,但是由于后台的不太熟练 导致了困难重重.所幸 学习能力还可以 一边做一遍学吧. •今天的问题:请求转发后页面的乱码问题 •由于特殊原因--图片上传的form表单无法通过ajax提交 因此必须使用form表单直接提交.但是这样会导致一个问题:前后台交互的时候效果不好.为什么效果不好?这里说的不是功能的问题.作为web开发者,客户的体验我们要放在第一位.因此,我们必须将对客户的信息反馈放在一个比较重要的地位.说白了,就是上传个图片成没成功?我