echarts页面切换,导致图缩成一团（解决办法）

问题图：

页面使用了下面代码，无效

window.addEventListener("resize", () => {
              this.pieChart.resize();
           });

个人亲测有效解决办法：

1.main.js添加指令：

// 定义全局指令
Vue.directive('resize', { // 使用局部注册指令的方式
  // 指令的名称
  bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
    let width = '',
      height = '';

    function isReize() {
      const style = document.defaultView.getComputedStyle(el);
      if (width !== style.width || height !== style.height) {
        binding.value(); // 关键
      }
      width = style.width;
      height = style.height;
    }
    el.__vueSetInterval__ = setInterval(isReize, 300);
  },
  unbind(el) {
    clearInterval(el.__vueSetInterval__);
  }

})

2.echarts组件页面部分关键代码

<div id="pieChart" ref="pieChart"  v-resize="resize"></div>

resize() {
            this.pieChart = this.$echarts.init(this.$refs.pieChart);
            this.pieChart.resize();
 },

<style lang='less' scoped>
#pieChart {
    width: 100%;
    height: 100%;
}
</style>