首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

利用 Flask 动态展示 Pyecharts 图表数据方法小结

Posted in Python onSeptember 04, 2019

本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法，不会的话你来找我呀...

Flask 模板渲染

1. 新建一个项目 flask-echarts

在编辑器中选择 New Project，然后选择 Flask，创建完之后，Pycharm 会帮我们把启动脚本和模板文件夹都建好

利用 Flask 动态展示 Pyecharts 图表数据方法小结

利用 Flask 动态展示 Pyecharts 图表数据方法小结

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 前后端分离

前面讲的是一个静态数据的展示的方法，用 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 地址传过来的参数，动态展示图表数据。结果如下：

利用 Flask 动态展示 Pyecharts 图表数据方法小结 

这里只是简单演示, 所以只将图表标题作为动态传参。此场景适用于第一次请求获取我们想要的数据，然后将其展示出来。比如我之前写的 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()

运行之后，在浏览器中打开，效果如下：

利用 Flask 动态展示 Pyecharts 图表数据方法小结 

看到这动图，有没有一种...，如果我是 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 图表数据方法小结 

总结

以上所述是小编给大家介绍的利用 Flask 动态展示 Pyecharts 图表数据方法小结,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

利用 Flask 动态展示 Pyecharts 图表数据方法小结

- Author -

Python编程与实战

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python之wxPython应用实例
Sep 28 Python
浅谈python jieba分词模块的基本用法
Nov 09 Python
Python拼接字符串的7种方法总结
Nov 01 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
Sep 15 Python
pandas按行按列遍历Dataframe的几种方式
Oct 23 Python
python3 webp转gif格式的实现示例
Dec 10 Python
使用keras实现Precise, Recall, F1-socre方式
Jun 15 Python
win10安装python3.6的常见问题
Jul 01 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
Jul 03 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
Jul 28 Python
Python 匹配文本并在其上一行追加文本
May 11 Python
Python Flask实现进度条
May 11 Python
python3实现微型的web服务器
Sep 03 #Python
Python面向对象之Web静态服务器
Sep 03 #Python
Python字符串和正则表达式中的反斜杠('\')问题详解
Sep 03 #Python
Django中间件拦截未登录url实例详解
Sep 03 #Python
如何为Python终端提供持久性历史记录
Sep 03 #Python
Python openpyxl读取单元格字体颜色过程解析
Sep 03 #Python
python xlwt如何设置单元格的自定义背景颜色
Sep 03 #Python
表扬信(62) 创业计划书(312) 思想汇报(404) 介绍信(57) 演讲稿(869) 心得体会(660) 道歉信(39) 职业生涯规划书(234) 证婚词(21) 欢迎词(65)
You might like
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
javascript新手语法小结
2008/06/15 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
数字漫画：comiXology
2020/06/13 全球购物
员工培训邀请函
2014/02/02 职场文书
春节联欢会主持词
2014/03/24 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang