Vue使用keep-alive導致echarts二次渲染空白的解決方案

原因：

通過檢查，發現空白時，控制台無報錯，但當前頁面的echart圖表的canvas height:0。

 

方法一：

在actived函數中，檢測echart的canvas是否為0，如果是，證明頁面渲染異常，就刷新瀏覽器。

mixin.js

// 選項合並——針對需要keep-alive的頁面組件

var mixin = {

    activated: function () {

      var canvasObj = document.getElementsByTagName("canvas");

      if(canvasObj && canvasObj.length>0){

          var canvasH = canvasObj[0].clientHeight;

        //   for(let i = canvasObj.length-1; i>=0;i--){

        //     console.log(canvasObj[i].parentNode.parentNode.id);

        //   }

          if(canvasH==0){

            location.reload();

          }

      }

    }

  }

  export {mixin}

 

.vue

<script>

import {mixin} from '@/js/mixin'

export default {

    mixins: [mixin],

}

</script>