利用 Flask 動(dòng)態(tài)展示 Pyecharts 圖表數(shù)據(jù)方法小結(jié)

更新時(shí)間：2019年09月04日 08:50:27 作者：Python編程與實(shí)戰(zhàn)

本文將介紹如何在 web 框架 Flask 中使用可視化工具 pyecharts, 看完本教程你將掌握幾種動(dòng)態(tài)展示可視化數(shù)據(jù)的方法。感興趣的朋友跟隨小編一起看看吧

本文將介紹如何在 web 框架 Flask 中使用可視化工具 pyecharts, 看完本教程你將掌握幾種動(dòng)態(tài)展示可視化數(shù)據(jù)的方法，不會(huì)的話你來(lái)找我呀...

Flask 模板渲染

1. 新建一個(gè)項(xiàng)目 flask-echarts

在編輯器中選擇 New Project，然后選擇 Flask，創(chuàng)建完之后，Pycharm 會(huì)幫我們把啟動(dòng)腳本和模板文件夾都建好

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.渲染圖表

主要目標(biāo)是將 pyecharts 生成的圖表數(shù)據(jù)在視圖函數(shù)中返回，所以我們直接在 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="我是副標(biāo)題"))
  )
  return c
@app.route("/")
def index():
  c = bar_base()
  return Markup(c.render_embed())
if __name__ == "__main__":
  app.run()

直接運(yùn)行，在瀏覽器中輸入地址，直接將數(shù)據(jù)顯示出來(lái)了

這是一個(gè)很簡(jiǎn)單的靜態(tài)數(shù)據(jù)展示，別急好戲還在后頭~

Flask 前后端分離

前面講的是一個(gè)靜態(tài)數(shù)據(jù)的展示的方法，用 pyecharts 和 Flask 結(jié)合最主要是實(shí)現(xiàn)一種動(dòng)態(tài)更新數(shù)據(jù)，增量更新數(shù)據(jù)等功能！以上面講解的內(nèi)容為基礎(chǔ)，在 templates 文件夾中新建一個(gè) index.html 的文件，其中主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依賴。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>動(dòng)態(tài)更新數(shù)據(jù)</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 基礎(chǔ)的朋友應(yīng)該知道該代碼主要是向地址 "127.0.0.1:5000/barChart" 發(fā)送請(qǐng)求，所以在 app.py 中我們也需要做相應(yīng)的修改，添加該地址的路由函數(shù)，從而實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)更新。部分代碼如下：

@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 視圖函數(shù)中接收瀏覽器傳過(guò)來(lái)的參數(shù)，然后傳遞給 index.html。此處只是簡(jiǎn)單示例，所以未做參數(shù)校驗(yàn)。而另一個(gè)視圖函數(shù)主要是獲取參數(shù)，傳給圖表生成函數(shù) bar_base(), 從而實(shí)現(xiàn)根據(jù) url 地址傳過(guò)來(lái)的參數(shù)，動(dòng)態(tài)展示圖表數(shù)據(jù)。結(jié)果如下：

這里只是簡(jiǎn)單演示, 所以只將圖表標(biāo)題作為動(dòng)態(tài)傳參。此場(chǎng)景適用于第一次請(qǐng)求獲取我們想要的數(shù)據(jù)，然后將其展示出來(lái)。比如我之前寫的 NBA 球員數(shù)據(jù)可視化 mp.weixin.qq.com/s/WWCNf46Ch…

就是此方法，不同球員展示對(duì)應(yīng)球員數(shù)據(jù)！

定時(shí)全量更新圖表

該場(chǎng)景主要是前端主動(dòng)向后端進(jìn)行數(shù)據(jù)刷新，定時(shí)刷新的核心在于 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>

對(duì)應(yīng)的將 app.py 中 bar_base() 作相應(yīng)的修改，從而實(shí)現(xiàn)定時(shí)全量更新圖表

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()

運(yùn)行之后，在瀏覽器中打開(kāi)，效果如下：

看到這動(dòng)圖，有沒(méi)有一種...，如果我是 DJ DJ，琦你太美...

定時(shí)增量更新圖表

同樣的要對(duì) 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>

增量更新，后端代碼也需要相應(yīng)的修改

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="動(dòng)態(tài)數(shù)據(jù)"),
      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)})

走起，來(lái)看看效果吧

總結(jié)

以上所述是小編給大家介紹的利用 Flask 動(dòng)態(tài)展示 Pyecharts 圖表數(shù)據(jù)方法小結(jié),希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: