移动端vant的tab标签切换结合echarts图获取不到元素问题解决

七彩猫猫虫

于 2021-10-11 16:24:15 发布

阅读量929

点赞数

CC 4.0 BY-SA版权

分类专栏：工作中的小问题文章标签： echarts javascript

本文链接：https://blog.csdn.net/SDAW_1/article/details/120705901

本文介绍了如何解决在移动端使用Vant Tab组件进行标签切换时，Echarts图表获取不到元素的问题。通过监听Tab的click事件，在切换后初始化DOM元素，并利用Vue的nextTick确保数据在DOM更新后正确渲染到图表上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

解决方法：

通过tab提供的click事件,点击一次,则初始化一次dom元素,之后再拿数据去画图,这个时候还是要用到nextTick,以保证dom更新完毕后再把数据渲染上去(因为数据在created就已经拿到)

<van-tabs
        @click="onclick()"
        v-model="active"
        swipeable
        color="rgb(41,135,223)"
        :lazy-render="false"
      >
        <van-tab title="招聘漏斗">
          <div
            class="funnel"
            ref="funnel"
          >
          </div>
        </van-tab>
        <van-tab titl

最低0.47元/天解锁文章