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>