Vue 保存数据时Echarts 获取的DOM无法访问！！！

Question

我将Vue项目中的Echarts图单独写成了一个组件，初始化没有任何问题！但是只要有数据更改并保存后就会导致Chart图，无法渲染，初步查看感觉是Vue实例更新后导致DOM过期（猜测）导致每次更改保存后图都会消失！！！

初始化

Vue 实例

饼图 chart

更改保存后

请问这种问题有没有解决方法感谢！！！

Answer 1

你做了延时加载没？

我把我这边类似需求整体操作过程逻辑分享给你。

1、初始化那一般放请求数据的方法。
当你保存数据后其实也就是一个保存再请求数据的动作（不知道你那逻辑是不是这样的）。
或用户查询操作后，直接可以看到渲染饼图。（不知道你需求，随便假设的）

2、逻辑

**--- 父页面.vue ---**
 初始化：
 created() {
   this.getYourData() // 指向你请求数据方法
 },

 用户查询浏览保存操作：
 methods: {
    saveBtn(){
      ...                 //你的存储方法
      this.getYourData()  //你请求数据方法
    }
  }
 
 
 
**--饼图组件.vue--**
 props: {
    data: arry, //接你父页面传到饼图组件的数据
 },
 
 watch: {
    data:function (newVal, oldVal) {
     if (newVal === oldVal) return  
     //....do something 这里你可以做个**监听数据**判断一定要等数据进来才能执行饼图数据渲染。
   }
 },
 
 data() {
   return {
     timer: '', 
   }
 },
  
 methods: {
    peiChartComp(data){
      ...
    }
 }
 
 mounted() {
    // echart自适应浏览器变化大小
    window.addEventListener('resize', () => {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
       this.peiChartComp.resize()
     }, 500) //延时渲染防止数据加载延时，dom无法渲染
    })
 }