vue tab切换时echarts不显示问题解决方案

最新推荐文章于 2024-08-15 14:53:09 发布

置顶瓜子妹

最新推荐文章于 2024-08-15 14:53:09 发布

阅读量4k

点赞数 4

分类专栏： vue 文章标签： vue.js tabs echarts

本文链接：https://blog.csdn.net/thankna/article/details/117021595

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用 vuetify UI，其他UI也是同理。

一、echarts不显示问题原因：

1.tab的绑定事件onChange还是onClick

2.找不到对应id的Dom

二、解决方案

1.看下面的代码，两个事件应该分别在两个标签里加载。这个是我加debugger硬试出来的。

<v-tabs
                          v-model="tab"
                          align-with-title
                          background-color="blue lighten-3"
                          @change="tabsChange(tab)"
                  >

<v-tab
                              v-for="(item,i) in tabItems"
                              :key="i"
                              @click="tabClick(i)"
                      >

事件的执行顺序：click事件才是你点击标签时能触发的方法，之后标签把model里的tab值给改了，再触发change事件。

① 如果只有点击标签tab的情况下才切换，可以只写click事件。

②除了点击标签tab，还有从A标签的画面进去B标签的情况，就需要追加change事件，标记flag从哪里跳转过来的。

③如果有哪个tab不能通过点击进去，只能从其他tab的画面进。tab的写法如下“disable”

                      <v-tab @click="tabClick(2)" disabled>
                          <div
                                  :class="[`text-h6`,'font-weight-medium']"
                                  v-text="tabItems[2]">
                          </div>
                      </v-tab>

      let myecharts = this.$echarts.init(document.getElementById('subecharts0'));
      // tab第二页打开
      myecharts.on('click', (params) => {
        this.km1Index = params.dataIndex;
        this.tab = 1;
        this.tabClickFlg = false;
        this.tabClick(this.tab);
      });

2.图形的渲染一定要在div的Dom加载之后

①一般情况下，每次画echarts之前调用“this.$nextTick”，相当于setTimeout延时执行。

this.$nextTick(() => {
          this.zhutu1wei('subecharts0', stitle, xdata, sdata);
        })

②有tab情况下，需要tab内组件在加载时渲染。组件如果比画图早渲染就显示不出新的图形。利用“v-tab-item”中的“eager” ，作用是将强制组件内容在加载时呈现，如果存在内容的话，则不会在 DOM 中渲染。

 <v-tabs-items v-model="tab">
                      <v-tab-item
                              v-for="(item,i) in tabItems"
                              :key="i"
                              eager
                      >
                          <v-card flat color="blue lighten-5">
                              <v-card-text>
                                
                                      <v-row>
                                          <v-col>
                                              <div :id="'subecharts'+i"
                                                   :style="{width: '900px', height: '500px'}"></div>
                                          </v-col>
                                      </v-row>
                              </v-card-text>
                          </v-card>
                      </v-tab-item>
                  </v-tabs-items>

以上。