Vue中v-show/v-if切换后echarts宽高问题和不显示问题

最新推荐文章于 2023-11-21 09:50:30 发布

Igiveufireworks

最新推荐文章于 2023-11-21 09:50:30 发布

阅读量3.7k

点赞数

文章标签： echarts vue.js javascript 前端 vue

本文链接：https://blog.csdn.net/igiveufireworks/article/details/126647504

版权

在Vue项目中遇到使用v-show切换tab时Echarts图表宽高异常，改用v-if后图表空白。原因在于v-if不会触发生命周期函数，导致无法获取DOM。解决方案是利用Vue的nextTick()方法，在切换后确保DOM更新再初始化Echarts。通过watch监听并配合nextTick()更新图表。

摘要由CSDN通过智能技术生成

在项目中发现，tab切换页面使用v-show时，echarts图表的宽高变成100px，因此改为用v-if切换。

但是v-if切换后echarts图表为空白，不显示。

这是因为在切换后并没有触发生命周期函数，没有获取到dom结构。

解决方法：

用vue的nextTick()方法，

nextTick()：在下次 DOM 更新循环结束之后执行延迟回调。为了在修改数据之后获取更新后的 DOM，就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码。可以理解为：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。

监听tab切换，并在切换后执行的方法内使用：

    watch: {
      orgNoValue: 'updateCity',
    },    
    updateCity() {
      this.$nextTick(() => {
        this.initFunc()  // 包括获取echarts的option的方法
      })
    },