当页面大小发生变化时自动重新渲染echarts图表

        <div class="right-content">
            <div class="produc-footage-statist" style="width: 100%;
                height: 500px; padding: 24px; box-sizing: border-box;
                margin-bottom: 24px;">
                <producFootageStatist n/>
            </div>
            <div class="produc-footage-statist" style="width: 100%;
                height: 500px; padding: 24px; box-sizing: border-box;
                margin-bottom: 24px;">
                <enginProjectStatist />
            </div>
            <div class="produc-footage-statist" style="width: 100%;
                height: 500px; padding: 24px; box-sizing: border-box;
                margin-bottom: 24px;">
                <keyProjectStatist />
            </div>
        </div>

上方为页面上当前的图表

通过自定义指令的方式，当包裹它的元素大小发生改变时触发方法。

  directives: {
    //v-resize 当被绑定元素大小发生变化时触发
    resize: { 
        bind(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__);
            el.__resizeInterval__ = null;
        }
    }
  },

 

通过key的方式实现组件重新渲染,但此时问题，触发频率过高，页面出现卡顿现象

    //当right-body大小发生变化时触发
    doResize(){
        console.log(this.key);
        this.key++ 
    },

另一种方法

在组件中添加定时器,通过监听resize方法重新渲染echarts图标实现功能

  methods: {
    initEchart(){
        const dom = document.getElementById('enginProjectStatist')
        this.myChart = echarts.init(dom)
        this.myChart.setOption(this.option)
    },
    resize(){
        if(this.myChart){
            this.myChart.resize()
        }
    }
  },
  mounted () {
    window.addEventListener('resize',this.resize)
    this.initEchart()
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.resize)
  }