Vue项目中Axios获取后端数据后vue-plotly图表无法显示数据的问题排查求助

你遇到的核心问题是对dataA的结构理解有误，导致数据赋值的路径不正确，进而图表无法获取到更新后的有效数据。

先看你的初始数据定义：

dataA: [{ x: [], y: [], }],

这里dataA是一个包含单个对象的数组，x和y属性属于数组里的第一个对象元素。但你在Axios回调里的赋值逻辑是直接给dataA数组本身添加x、y属性：

this.dataA.x = res.data.x;
this.dataA.y = res.data.y;

这显然不符合初始的结构设计，而且Vue的响应式系统也无法追踪这种错误的赋值操作，图表自然拿不到正确的数据。

修正后的代码 #

只需要调整getScreePlot方法里的赋值逻辑，把数据赋给数组的第一个对象即可：

getScreePlot() {
  const path = 'http://localhost:5000/Diagramm';
  axios.get(path)
    .then((res) => {
      // 修正：访问数组的第一个元素，再赋值x和y属性
      this.dataA[0].x = res.data.x;
      this.dataA[0].y = res.data.y;
    })
    .catch((error) => {
      console.error(error);
    });
},

额外优化建议 #

• 如果后端返回的数据格式刚好是{x: [...], y: [...]}，你也可以直接替换整个dataA数组，这种方式更直观，且同样能被Vue响应式系统正确识别：

  this.dataA = [res.data];
  

• 建议在回调里先打印res.data确认后端返回的数据结构是否和你预期一致，避免因为数据格式不匹配导致的隐性问题。

内容的提问来源于stack exchange，提问作者Steffen