Vue-22-通过flask接口提供的数据使用plotly.js绘图(一)
文章目录
- 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