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

不知道鸭
  • 1
新手上路,请多包涵

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

初始化

image.png
image.png
Vue 实例
image.png

饼图 chart
image.png

更改保存后

image.png
image.png
image.png
image.png

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

回复
阅读 539
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无法渲染
    })
 }
 
 
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏