pyecharts结合flask框架的使用
作者:程序媛小庄 发布时间:2022-12-01 18:37:25
介绍
本文主要介绍如何在Flask框架中使用pyecharts
,关于Flask框架使用这里不做具体说明~
Flask模板渲染
首先需要创建一个flask项目,flask项目对目录结构要求不高,但是如果是前后端混合项目的话,模板文件必须存放在templates
文件夹下,否则视图函数返回模板文件时会提示找不到对应的文件。下面是flask项目的简单目录结构:
.
├── server.py
└── templates
下述代码是server.py
中的示例的代码:
from flask import Flask
from jinja2 import Markup, Environment, FileSystemLoader
from pyecharts import options as opts
from pyecharts.charts import Bar
app = Flask(__name__, static_folder="templates")
def bar_base() -> Bar:
c = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
)
return c
@app.route("/")
def index():
c = bar_base()
return Markup(c.render_embed())
if __name__ == "__main__":
app.run()
运行上述代码,使用浏览器打开http://127.0.0.1:5000 即可访问服务,具体效果如下图所示:
Flask前后端分离
创建flask项目和上述文件目录保持一致,前后端分离的情况下,就需要后端将pyecharts生成的图表返回给前端,方法就是可以将图表生成到一个html文件中,然后返回给前端即可。
需要新建 HTML 文件保存位于项目根目录的 templates 文件夹,这里以如下 index.html 为例. 主要用到了 jquery
和 pyecharts
管理的 echarts.min.js
依赖。
下述是index.html
中的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="bar" style="width:1000px; height:600px;"></div>
<script>
$(
function () {
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/barChart",
dataType: 'json',
success: function (result) {
chart.setOption(result);
}
});
}
)
</script>
</body>
</html>
然后就需要编写后端的代码了,包括flask服务以及pyecharts
生成图表,目录结构和模板渲染一致,这里需要注意一个问题,目前由于 json 数据类型的问题,无法将 pyecharts 中的 JSCode 类型的数据转换成 json 数据格式返回到前端页面中使用。因此在使用前后端分离的情况下尽量避免使用 JSCode 进行画图。
下面是server.py
中的后端代码:
from random import randrange
from flask import Flask, render_template
from pyecharts import options as opts
from pyecharts.charts import Bar
app = Flask(__name__, static_folder="templates")
def bar_base() -> Bar:
c = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
.add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
)
return c
@app.route("/")
def index():
return render_template("index.html")
@app.route("/barChart")
def get_bar_chart():
c = bar_base()
return c.dump_options_with_quotes()
if __name__ == "__main__":
app.run()
同样运行该项目,使用浏览器打开 http://127.0.0.1:5000 即可访问服务。
来源:https://juejin.cn/post/7114474794183032868
猜你喜欢
- 对range()逆序的解释在 Python3.6 中,range() 函数返回一个可迭代的范围对象,范围类型表示不可变的数字序列,一般用在
- 方法一 <%dim total(7,3) total(1,0)="ASP之家"&n
- 说下整体思路1、服务器安装ffmpeg2、使用ffmpeg -i 指令来转换amr为mp3格式(这个到时候写在PHP代码中,使用exec函数
- ERROR 2003:Can't connect to MySQL server on 'localhost' (1
- 存储过程的定义,存储过程(Stored Procedure),是一组为了完成特定功能的SQL 语句,集经编译后存储在数据库中,用户通过指定存
- 朴素贝叶斯估计朴素贝叶斯是基于贝叶斯定理与特征条件独立分布假设的分类方法。首先根据特征条件独立的假设学习输入/输出的联合概率分布,然后基于此
- element换肤所有主题色和基础色均可自主配置1.element-ui官方提供的动态切换主题方法换肤 但此方法只可修改$&ndas
- 以下内容给大家c#连接数据库的方法的相关介绍,本文非常具有参考借鉴价值,具体详情如下所示。ASP.NET连接数据库的技术叫ADO.NET,它
- 这里再重复一下标题为什么是"使用"而不是"实现":首先,专业人士提供的算法比我们自己写的算法无论是效
- 全栈即指的是全栈工程师,指掌握多种技能,并能利用多种技能独立完成产品的人。就是与这项技能有关的都会,都能够独立的完成。全栈只是个概念,也分很
- UltraEdit简介UltraEdit 是一套功能强大的文本编辑器,可以编辑文本、十六进制、ASCII 码,完全可以取代记事本(如果电脑配
- b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用,甚至是反对使用的,因为认为他们只是“表现”粗体和斜体,而没有任何“语义”。更多的
- 测试的目录如下:root ├── module_root.py ├── package_a&
- (可能只有最后一句命令有用,可能全篇都没用)(小白方法,可能只适用于本人情况)安装matplotlib时,出现的三种失败情况1、read t
- 在 jupyter notebook参数化运行python 时,怕输出太多文件太大,想及时清除 notebook 的输出。在别人代码里看到用
- Vuex 中有以下几个核心概念:State:应用程序的状态存储在单一的状态树中,即 State。State 可以通过 store.state
- 本文实例为大家分享了python学生管理系统开发的具体代码,供大家参考,具体内容如下学生管理系统(基础版)#定义一个函数,显示可以使用的功能
- 一般在卸载完数据库时,大家都希望能够将注册表信息完全删干净,下面就将教您彻底删除SQL Server注册表的方法,供您参考。在卸载SQL S
- Python是一种计算机程序设计语言,一种面向对象的动态类型语言,一种脚本语言。最初被设计用于编写自动化脚本(shell)的,常用于各种服务
- π是一个无数人追随的真正的神奇数字。我不是很清楚一个永远重复的无理数的迷人之处。在我看来,我乐于计算π,也就是计算π的值。因为π是一个无理数