【vue项目练习】通过axios调用本地json使用element玫瑰图

1.报错如下：

[Vue warn]: Error in mounted hook: "Error" found in

查询了各种方法，有说是生命周期问题，但是似乎和我的并不一致，不能解决我的问题。

最后发现问题所在是在于数据的格式定义错误，

data() {
    return {
      roseData: [],
    };
  },

我之前定义成了{}，自然返回数据时可能不对应，就产生报错。

另外，在mounted中的顺序似乎也有一些问题，在此之前我的获取数据和构造图表顺序先后颠倒了，调整回来后就变成了如上的问题。

2.

没有报错，但是获取不到数据，但是控制台能输出数据。

经过别人指点后问题得到了解决，就是和上面提到的执行顺序有关，虽然上面第一次的时候注意到了执行顺序问题，但是没有注意到根本问题。

mounted() {
    // try {
      
      this.getrosedata();
      this.dataEcharts(this.chartID);
    // } catch (err) {
    //   console.log(err);
    // }
  },

上面是我调整前的执行顺序，下面是后来成功的代码

mounted() {
    // try {
      
      this.getrosedata();
      // this.dataEcharts(this.chartID);
    // } catch (err) {
    //   console.log(err);
    // }
  },

getrosedata() {
      this.$axios.get("./static/rose.json").then((roseData) => {
        this.rose = roseData.data.result;
        // console.log(this.rose)
        // console.log(roseData.data.result);
        this.dataEcharts(this.chartID);
        // console.log(1)
      });
    },

将构造图标函数放到获取数据的函数中去，这样就保证了它的执行顺序，成功实现玫瑰图，实在是太开心了！