vue关于echarts子组件数据渲染失败

用echarts组件时，echarts子组件数据渲染失败，代码重现：

在这里插入代码片
父组件：
//dom元素
<div class="AllAreaGDPTrand">
   <div class="AllAreaGDPTrandHeader">全区GDP总额趋势</div>
      <all-areatrand :data="data" />
</div>
//获取数据
    async getJCKZEQS (params) {
      let res = await api.getJCKZEQS(params)
      this.data= res.data.data
    },

分析：数据未渲染到echarts图表上，拿到数据后再去渲染就能解决问题。

解决办法一：

父组件：
//dom元素
<div class="AllAreaGDPTrand">
   <div class="AllAreaGDPTrandHeader">全区GDP总额趋势</div>
      <all-areatrand v-if="flag"//设置一个开关
          :data="data" />
</div>
//获取数据
    async getJCKZEQS (params) {
      let res = await api.getJCKZEQS(params)
      this.data= res.data.data
      this.flag = true //设置一个开关，控制是否渲染子组件，数据请求完成后再去渲染子组件，
    },

解决办法二：使用watch监听，确保数据拿到后再渲染

子组件echarts
props: {
  data: {
    type: Array,
    default() {
      return []
    }
  }
},

watch: {
    data: {
      initData(newval, oldval) {
        if(newval) {
          this.initChart()//渲染echarts的函数
        }
        return newval
      }
    }
  },