文章目錄
- 1 任務背景
- 2 Flask提供接口(server.py)
-
- 2.1 原始代碼
- 2.2 跨域問題
- 3 Vue3獲取數據并渲染Plotly圖表
-
- 3.1 新建工程
- 3.2 程序
-
- 3.2.1 index.html(入口)
- 3.2.2 cpmponents/Plot.vue(子組件)
- 3.2.3 App.vue(父組件)
- 3.2.4 main.ts
- 3.3 展示
- 4 選擇圖表類型繪圖
-
- 4.1 App.vue
- 4.2 index.js
- 4.3 Plots.vue
- 4.4 展示
- 5 根據數據項的個數推薦圖表
-
- 5.1 App.vue
- 5.2 Recommand.vue
- 5.3 展示
- 6 參考附錄
使用Vue3，獲取數據并渲染Plotly.js圖表，可以選擇圖表類型繪圖，還可以通過預置的推薦邏輯，根據數據項的個數推薦合適的圖表。
1 任務背景
在Vue 3中通過Flask接口獲取數據，并使用Plotly.js繪圖，可以按照以下步驟實現：
(1)Flask提供API接口(返回 JSON 數據)。
(2)Vue 3使用Axios或Fetch請求數據。
(3)使用Plotly.js渲染圖表。
2 Flask提供接口(server.py)
2.1 原始代碼
from flask import Flask, jsonifyapp = Flask(__name__)@app.route('/api/data', methods
 的用法與實戰案例)
