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

在这里插入图片描述

 

解决方法:

通过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="招聘趋势">
          <div
            class="trend"
            ref="trend"
          >
          </div>
        </van-tab>
        <van-tab title="招聘趋势镜像">
        </van-tab>
      </van-tabs>
onclick(name, title) {
      // console.log(name+";"+title);
      this.$nextTick(() => {
        const myChart2 = this.$echarts.init(this.$refs.trend);
        if (myChart2 != null) {
          // 如果不存在,就进行初始化

          myChart2.setOption({
            grid: {
              // left: "3%",
              left: "-6%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            }, // grid 设置图标位置
            xAxis: {
              data: ["A", "B", "C", "D", "E"],
            },
            yAxis: {},
            series: [
              {
                data: [10, 22, 28, 23, 19],
                type: "line",
                areaStyle: {},
              },
              {
                data: [25, 14, 23, 35, 10],
                type: "line",
                areaStyle: {
                  color: "#ff0",
                  opacity: 0.5,
                },
              },
            ],
          });
        }
      });
    },