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

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

初始化

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

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

更改保存后

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

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


回答:

你做了延时加载没?

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

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无法渲染

})

}

以上是 Vue 保存数据时Echarts 获取的DOM无法访问!!! 的全部内容, 来源链接: utcz.com/p/935794.html

回到顶部