本指南會以一個小的 Flask 項目為例，說明如何在 Flask 中使用 pyecharts。請確保你已經安裝 Flask，還沒安裝請執行 pip install flask 或其他方式安裝。
Step 0: 首先建立一個 Flask 項目
Linux/macos 系統
$ mkdir flask-echarts$ cd flask-echarts$ mkdir templates
Windows 系統
建立一個 flask-echarts 檔案夾，在其下建立 templates 子檔案夾。
Step 1: 為項目提供自己的模板
將下面 html 模板代碼儲存為 pyecharts.html 檔案並移至上一步建立的 templates 檔案夾中。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Proudly presented by ECharts</title> {% for jsfile_name in script_list %} <script src="{{host}}/{{jsfile_name}}.js"></script> {% endfor %}</head><body> {{myechart|safe}}</body></html>
Step 2: 調用 chart_instance.render_embed() 方法渲染圖表
請將下面的代碼儲存為 server.py 檔案並移至項目的根目錄下。
import randomfrom pyecharts import Scatter3Dfrom pyecharts.constants import DEFAULT_HOSTfrom flask import Flask, render_templateapp = Flask(__name__)@app.route("/")def hello(): s3d = scatter3d() return render_template('pyecharts.html', myechart=s3d.render_embed(), host=DEFAULT_HOST, script_list=s3d.get_js_dependencies())def scatter3d(): data = [generate_3d_random_point() for _ in range(80)] range_color = [ '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] scatter3D = Scatter3D("3D scattering plot demo", width=1200, height=600) scatter3D.add("", data, is_visualmap=True, visual_range_color=range_color) return scatter3Ddef generate_3d_random_point(): return [random.randint(0, 100), random.randint(0, 100), random.randint(0, 100)]if __name__ == "__main__": #運行項目 app.run(debug = True)
script_list 是 Page() 類渲染網頁所需要依賴的 echarts js 庫，依賴的庫的數量取決於所要渲染的圖形種類。
host 是 echarts js 庫的地址，預設的地址為 http://chfw.github.io/jupyter-echarts/echarts 當然，如果你願意你也可以改變這個地址，先複製 https://github.com/chfw/jupyter-echarts 然後將 echarts 檔案夾掛載在你自己的伺服器上即可。
此時 flask-echarts 目錄下為
├── server.py
└── templates
└── pyecharts.html
Step 3: 運行項目
Linux/macos 系統
$ export FLASK_APP=server.py$ flask run* Serving Flask app "server"* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Windows 系統
$ set FLASK_APP=server.py$ flask run* Serving Flask app "server"* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
效果展示：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
