vue watch 动态监听echart的变化的需要注意的一个坑

最近公司分配一个任务给我开发一个数据大屏，开始研究起echart的使用，用vue的框架进行开发。
要求半个小时刷新一次

效果如下：

返回的数据放在store里面的：
用的是计算属性和watch配合监听

 computed: {
    watchData () {
      return this.$store.state.crmData.month_revenue
    },
    curData () {
      return this.$store.state.crmData.month_drain_conversion
    }
  },
 watch: {
    watchData: {
      async handler (list) {
        if (list && list.length > 0) {
          this.achieveShow = true
          // 获取当前月份
          const month = list[0].date.substr(5, 2)
          this.curMonth = Number(month)
          // 业绩趋势图
          const achieveOption = await this.getAchieveTendency(list)
          const achieveTendency = window.echarts.init(
            document.getElementById('achieveTendency')
          )
          achieveTendency.setOption(achieveOption) // 绘制图表s
        } else {
          this.achieveShow = false
        }
      },
      deep: true
    },
    }
    

echart的配置就自己百度，这里不讲。

const achieveOption = await this.getAchieveTendency(list)

一定要放在init echart的前面，否则会出现报错信息

折磨了几个小时的，作为警戒吧