利用 Flask 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法，不会的话你来找我呀...
Flask 模板渲染
1. 新建一个项目 flask-echarts
在编辑器中选择 New Project，然后选择 Flask，创建完之后，Pycharm 会帮我们把启动脚本和模板文件夹都建好
2. 拷贝 pyecharts 模板
将链接中的以下模板 ├── jupyter_lab.html ├── jupyter_notebook.html ├── macro ├── nteract.html ├── simple_chart.html ├── simple_page.html └── table.html 全部拷贝到 tempaltes 文件夹中 github.com/pyecharts/p…
3.渲染图表
主要目标是将 pyecharts 生成的图表数据在视图函数中返回，所以我们直接在 app.py 中修改代码，如下：
from flask import Flask
from jinja2 import Markup
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()
直接运行，在浏览器中输入地址，直接将数据显示出来了
这是一个很简单的静态数据展示，别急好戏还在后头~
Flask 前后端分离
前面讲的是一个静态数据的展示的方法，用 pyecharts 和 Flask 结合最主要是实现一种动态更新数据，增量更新数据等功能！以上面讲解的内容为基础，在 templates 文件夹中新建一个 index.html 的文件，其中主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依赖。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态更新数据</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 result_json = '{{ result_json|tojson }}';
// var result = JSON.parse(result_json);
var chart = echarts.init(document.getElementById('bar'), 'gray', {renderer: 'canvas'});
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/barChart",
dataType: 'json',
data: {result: result_json},
success: function (result) {
chart.setOption(result);
}
});
}
)
</script>
</body>
</html>
有 html 基础的朋友应该知道该代码主要是向地址 "127.0.0.1:5000/barChart" 发送请求，所以在 app.py 中我们也需要做相应的修改，添加该地址的路由函数，从而实现动态数据更新。 部分代码如下：
@app.route("/")
def index():
data = request.args.to_dict()
return render_template("index.html", result_json=data)
@app.route("/barChart")
def get_bar_chart():
args = request.args.to_dict()
result = eval(args.get("result"))
name = result.get("name")
subtitle = result.get("subtitle")
c = bar_base(name, subtitle)
return c.dump_options_with_quotes()
在 index 视图函数中接收浏览器传过来的参数，然后传递给 index.html。此处只是简单示例，所以未做参数校验。而另一个视图函数主要是获取参数，传给图表生成函数 bar_base(), 从而实现根据 url 地址传过来的参数，动态展示图表数据。结果如下：
这里只是简单演示, 所以只将图表标题作为动态传参。此场景适用于第一次请求获取我们想要的数据，然后将其展示出来。比如我之前写的 NBA 球员数据可视化 mp.weixin.qq.com/s/WWCNf46Ch…
就是此方法，不同球员展示对应球员数据！
定时全量更新图表
该场景主要是前端主动向后端进行数据刷新，定时刷新的核心在于 HTML 的 setInterval 方法。那么 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>
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
$(
function () {
fetchData(chart);
setInterval(fetchData, 2000);
}
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/barChart",
dataType: 'json',
success: function (result) {
chart.setOption(result);
}
});
}
</script>
</body>
</html>
对应的将 app.py 中 bar_base() 作相应的修改，从而实现定时全量更新图表
def bar_base() -> Bar:
c = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [random.randint(10, 100) for _ in range(6)])
.add_yaxis("商家B", [random.randint(10, 100) for _ in range(6)])
.set_global_opts(title_opts=opts.TitleOpts(title="", 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()
运行之后，在浏览器中打开，效果如下：
看到这动图，有没有一种...，如果我是 DJ DJ，琦你太美...
定时增量更新图表
同样的要对 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>
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
var old_data = [];
$(
function () {
fetchData(chart);
setInterval(getDynamicData, 2000);
}
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/lineChart",
dataType: "json",
success: function (result) {
chart.setOption(result);
old_data = chart.getOption().series[0].data;
}
});
}
function getDynamicData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/lineDynamicData",
dataType: "json",
success: function (result) {
old_data.push([result.name, result.value]);
chart.setOption({
series: [{data: old_data}]
});
}
});
}
</script>
</body>
</html>
增量更新，后端代码也需要相应的修改
from pyecharts.charts import Line
def line_base() -> Line:
line = (
Line()
.add_xaxis(["{}".format(i) for i in range(10)])
.add_yaxis(
series_name="",
y_axis=[randrange(50, 80) for _ in range(10)],
is_smooth=True,
label_opts=opts.LabelOpts(is_show=False),
)
.set_global_opts(
title_opts=opts.TitleOpts(title="动态数据"),
xaxis_opts=opts.AxisOpts(type_="value"),
yaxis_opts=opts.AxisOpts(type_="value"),
)
)
return line
@app.route("/")
def index():
return render_template("index.html")
@app.route("/lineChart")
def get_line_chart():
c = line_base()
return c.dump_options_with_quotes()
idx = 9
@app.route("/lineDynamicData")
def update_line_data():
global idx
idx = idx + 1
return jsonify({"name": idx, "value": randrange(50, 80)})
走起，来看看效果吧
相关推荐
-
利用 Flask 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀... Flask 模板渲染 1. 新建一个项目 flask-echarts 在编辑器中选择 New Project,然后选择 Flask,创建完之后,Pycharm 会帮我们把启动脚本和模板文件夹都建好 2. 拷贝 pyecharts 模板 将链接中的以下模板 ├── jupyter_lab.html ├── jupyter_notebook.h
-
Django动态展示Pyecharts图表数据的几种方法
目录 Django 模板渲染 1. 新建一个 Django 项目 2. 新建项目 urls 文件 3. 编写 Django 和 pyecharts 代码渲染图表 定时全量更新图表 定时增量更新图表 本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令行中输入以下命令 django-admin startproject pyecharts_django
-
如何利用Python动态展示排序算法
目录 前言 选择冒泡 插入排序 归并排序 希尔排序 总结 前言 经常看到这种算法可视化的图片,但往往做不到和画图的人心灵相通,所以想自己画一下,本文主要实现归并排序和希尔排序,如果想实现其他算法可参考这篇 C语言实现各种排序算法[选择,冒泡,插入,归并,希尔,快排,堆排序,计数] 选择冒泡 这两种排序方案简单到很难说是什么算法,其中选择排序通过遍历一次数组,选出其中最大(小)的值放在新数组的第一位,再从剩下的数里选出最大(小)的,放到第二位,依次类推:冒泡排序则是通过重复走访要排序的数组,比较相
-
Vue+elementUI实现动态展示列表的数据
目录 Vue elementUI动态展示列表的数据 需求描述 Vue elementUI注意事项 多选框对应List<object> 输入框判断条件 自定义弹窗格式 Vue elementUI动态展示列表的数据 需求描述 活动查看的时候,根据后台返回的数据,动态渲染列和每行数据. 后台返回的数据结构如下 html <!-- 弹出的查看数据 --> <el-dialog width="1200px" :title="activityName&quo
-
Flask中获取小程序Request数据的两种方法
Flask中获取小程序Request数据的两种方法 作为后端屌对于前端确实讳莫如深,JS中的类型Object竟然不能直接通过POST传入到后台Flask中,您会发现获取的是[object Object],这货在Flask中只是个Str,哈哈... 于是,开始寻求解决方案: 方案一,通过GET或者POST传参,将Object转换为Str请求数据: 1.在util.js中定义一个JS函数: function json2Form(json) { var str = []; for (var p in
-
AJAX 动态加载后台数据 绑定select的方法
直接上代码 是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 <select id="select" style="width : 80px;height : 30px;"> //下拉框数据动态加载 </select> js代码 $.ajax({ url: "", //后台webservice里的方法名称 contentType:
-
AJAX跨域请求数据的四种方法(实例讲解)
由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP"); 记住要进行兼容处理哦 在这里我就不写了 通过该对象进行获取 获取数据的四种状态 xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请
-
详细介绍在pandas中创建category类型数据的几种方法
在pandas中创建category类型数据的几种方法之详细攻略 T1.直接创建 category类型数据 可知,在category类型数据中,每一个元素的值要么是预设好的类型中的某一个,要么是空值(np.nan). T2.利用分箱机制(结合max.mean.min实现二分类)动态添加 category类型数据 输出结果 [NaN, 'medium', 'medium', 'fat'] Categories (2, object): ['medium', 'fat'] name ID
-
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
Apache Superset是一个强大的BI工具,它提供了查看和探索数据的方法.它在 ClickHouse 用户中也越来越受欢迎. 我们将介绍安装 Superset 的 2 种方法,然后展示如何从 Superset 连接到您的第一个 ClickHouse 数据库.代码示例基于 Ubuntu 18.04.Superset 1.1.0 和 clickhouse-sqlalchemy 0.1.6. 方法一:Python虚拟环境 第一种方法直接在您的主机上安装 Superset.我们将首先创建一个 P
-
ECharts调用接口获取后端数据的四种方法总结
目录 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) 方法二:在调用数据的时候调用图表(一个页面的所有数据都在这一个接口中) 方法三:使用chartes中的dataset数据集 方法四:在对应图表中,用ajax请求 注意 总结 使用eacharts做大屏,需要使用后端数据,下面的方法是自己试过有效的,有什么不对的,望各位大佬指点. 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) mounted (