【Vue】26.Vue中引入Echarts圖表tab切換時遇到的坑

最近在做Echarts圖表切換的時候遇到了一個坑，產品設計的需求是這樣，兩個tab，一個是疾病風險圖表，一個是意外風險圖表，tab切換時顯示不同的圖表，而且要根據不同角色的年齡動態的在圖表上打個座標點，頁面裏面用的是v-show，沒有用v-if，當時是這樣考慮的，頁面初始化進來加載的數據就直接都渲染了，因爲v-show不會隱藏dom結構，點擊tab切換就行了，但實際證明是我的想法太天真，這樣寫就會出現很多莫名其妙的問題。

 

首先來描述一下出現的不友好的問題：

（1）兩個tab來回切換的時候Echarts的座標線tooltip有時候顯示，有時候不顯示

（2）當年齡比較大的時候，比如說57歲，tooltip描述就會顯示到表格外面，超出手機屏幕，不會友好的適配顯示到座標線的左側

（3）兩個tab切換的時候，兩個圖標傳入的值不一樣，縱座標的間隔卻不會變

最開始的時候，產品那邊提到這些問題，自己以爲是圖表插件本身的問題，覺得是不是圖表本身對手機端適配的不好，後來好好的研究了一番，發現是圖表渲染高度的問題，找到了問題的所在，就有辦法解決了，網上搜了各種辦法，說是高度要重新設置什麼的，因爲我項目用的預編譯器是stylus，適配用的vw方式，如果在調用圖表加載的方法的時候動態加個高度，這樣樣式就不走預編譯器，達不到適配手機屏幕的效果了，所以我想了想，既然問題的本質就是要重新渲染圖表，那我就重新換一種方式，藉助vue的v-if標籤來重新渲染dom結構。

解決方案：

（1）把兩個tab的v-show切換方式換成v-if，因爲v-if能夠重新渲染dom結構

            <div class="risk-chart-content" v-if="isShowTabLeft">
              <p class="risk-chart-title">疾病風險分析</p>
              <div id="myChat" ref="pieEchartsleft"></div>
            </div>
            <div class="risk-chart-content" v-if="isShowTabRight">
              <p class="risk-chart-title">意外風險分析</p>
              <div id="myChatRight" ref="pieEchartsRight"></div>
            </div>

（2）在tab切換觸發的函數下面用$nextTick()加載圖表渲染

          <div class="risk-tab">
            <div class="risk-tab-public"
                 v-bind:class="{riskTabLight: isShowTabLeft}"
                 @click="changeTab(1)">疾病風險
            </div>
            <div class="risk-tab-public"
                 v-bind:class="{riskTabLight: isShowTabRight}"
                 @click="changeTab(2)">意外風險
            </div>
          </div>

      changeTab(tab) {
        if (tab === 1) {
          this.isShowTabLeft = true;
          this.isShowTabRight = false;
            this.$nextTick(() => {
              this.drawLine(); // 加載疾病風險圖表
            });
        } else {
          this.isShowTabLeft = false;
          this.isShowTabRight = true;
            this.$nextTick(() => { 
              this.drawLineRight(); // 加載意外風險圖表
            });
        }
      },

這樣就完美的解決了圖表顯示的問題。

另外：產品還要求年齡tooltip在圖表上的位置不能動，打的座標點，初始化進來要固定到圖表上，我查了一下圖表的配置文檔，也沒有找到合適的方式，如果有知道方法的，可以告知我一下，我這裏用了一個極端的方式，添加了一個css樣式禁止點擊，成功的解決了這個問題。

          #myChat
            wh(686px, 400px)
            padding 0
            margin 0
            margin-bottom 20px
            pointer-events none  // 禁止觸發事件
          #myChatRight
            wh(686px, 400px)
            padding 0
            margin 0
            margin-bottom 20px
            pointer-events none // 禁止觸發事件