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

最新推荐文章于 2023-12-15 10:51:43 发布

原创

最新推荐文章于 2023-12-15 10:51:43 发布 · 935 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript

本文介绍了如何解决在移动端使用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 title=