如何在Flask中使用Pyecharts實現(xiàn)在單個頁面展示多個圖表-創(chuàng)新互聯(lián)

如何在Flask中使用Pyecharts實現(xiàn)在單個頁面展示多個圖表？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)公司是一家以網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、品牌設(shè)計、軟件運(yùn)維、seo優(yōu)化、小程序App開發(fā)等移動開發(fā)為一體互聯(lián)網(wǎng)公司。已累計為雨棚定制等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

方法1、原生echarts方法

自己在前端引入echarts.js文件、自己創(chuàng)建div、自己初始化echarts對象、自己從官網(wǎng)復(fù)制并且配置圖表、自己給echarts對象設(shè)置配置項實現(xiàn)繪制，這種方法的缺點是配置項都是js的形式比較繁瑣，對于后端開發(fā)人員來說有點過于參與前端js部分的配置開發(fā)；

這種方式參照echarts官網(wǎng)的方式，其實跟flask沒有多大關(guān)系，php/java不同后端語言都一樣，地址

方法2：使用pyecharts

pyecharts主要是做了一件事情，把js的配置option，完全抽離使用Python代碼配置，把js的數(shù)據(jù)結(jié)構(gòu)使用python的代碼結(jié)構(gòu)實現(xiàn)，讓后端開發(fā)只需要配置數(shù)據(jù)就能搞定圖表，真的很像matplotlib，當(dāng)然echarts的強(qiáng)大使得pyecharts更強(qiáng)大；

但是這里真的要吐槽pyecharts，因為它包含多種輸出圖表結(jié)果的方式，沒有一種是能夠和flask完美配合的：

render()方法：默認(rèn)會在當(dāng)前目錄生成 render.html 文件；這是什么鬼，什么場景會用到這種方式，竟然是默認(rèn)的方式？真是怪異；
render()方法傳入路徑參數(shù)：傳入路徑參數(shù)，如 bar.render(“mycharts.html”)，這種方法好一點，可以設(shè)定文件路徑，但是為毛要輸出一個HTML，另外一點，我做一個網(wǎng)頁，難道這個網(wǎng)頁上除了這個圖表沒有其他數(shù)據(jù)和展示了？只有一個大大的echarts圖表？
render_notebook()方法：這個方法能用在notebook中，這個我不吐槽，因為如果使用notebook，這個方法很好用，但是我要用于flask網(wǎng)頁展示；
render_embed()方法：來自pyecharts的flask一章中的Markup(c.render_embed())，我估計作者根本沒寫過flask代碼，不然為毛flask網(wǎng)頁中只能展示一個echarts圖表，我其他的數(shù)據(jù)展示，怎么用這個方法設(shè)置？我試圖把render_embed()的結(jié)果傳遞給flask模板，結(jié)果發(fā)現(xiàn)這個函數(shù)的返回是一個整個HTML；
chart.dump_options()方法：這個方法是唯一一個我覺得能和flask配合不錯的方法，能夠?qū)崿F(xiàn)一個flask網(wǎng)頁中繪制很多個圖表；然而卻依然需要自己引入echarts.js文件、自己設(shè)定div、自己初始化echarts對象、自己給echarts對象設(shè)置圖表配置，唯一簡化的就是圖表配置是來自于python服務(wù)端；

最后給出使用chart.dump_options()方法給一個flask網(wǎng)頁配置多個圖表的方法代碼：

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>
<h2>柱狀圖</h2>
<div>
  <!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -->
  <div id="main" ></div>
  <script type="text/javascript">
    // 基于準(zhǔn)備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));
    // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
    myChart.setOption({{ bar_data | safe }});
  </script>
 
  <!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -->
  <div id="main2" ></div>
  <script type="text/javascript">
    // 基于準(zhǔn)備好的dom，初始化echarts實例
    var myChart2 = echarts.init(document.getElementById('main2'));
 
    // 指定圖表的配置項和數(shù)據(jù)
    var option2 = {{ bar_data | safe }};
 
    // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
    myChart2.setOption(option2);
  </script>
</div>
 
</body>
</html>

展示輸出：

如何在Flask中使用Pyecharts實現(xiàn)在單個頁面展示多個圖表

看完上述內(nèi)容，你們掌握如何在Flask中使用Pyecharts實現(xiàn)在單個頁面展示多個圖表的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：如何在Flask中使用Pyecharts實現(xiàn)在單個頁面展示多個圖表-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://redsoil1982.com.cn/article4/dggcoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、面包屑導(dǎo)航、動態(tài)網(wǎng)站、建站公司、網(wǎng)站維護(hù)、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容