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