在vue中使用axios请求动态数据到echarts中，显示不出来，不知什么原因

Question

然后这是获取到的数据

有点长，纠结了两天，不知道哪里出了问题。新人发帖，谢谢大佬解答

Answer 1

myChart.setOption() 用早了，你的数据是异步的

Axios.post(xxx).then(res => {
  // this.xxx = xxx
  // this.yyy = yyy
  
  // 数据改变之后，在nextTick刷新chart
  this.$nextTick(() => {
    myChart.setOption()
  })
})

Answer 2

在Axios.post的返回数据里，你只把返回值处理加工，赋值给了 xAxisdata 和 seriesData ,并没有看到将改变后的 option 赋值给 myChart。
想要维护好这份代码，建议你：
1.option 做计算属性，方便异步请求后，及时更新，记得deep属性设置为 true
2.在Axios.post的成功函数里，将改变后的 option 赋值给 myChart，也就是 myChart.setOption(option)

Answer 3

this.$nextTick(()=>mtChart.setOption())

数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中