根据 vue-grid-layout 动态设置Echarts尺寸大小

---

前言

此文背景是根据 vue-grid-layout 动态拖拽组件大小里面包含 Echarts 组件情景，也可以单独把监听动态设置Echarts 尺寸抽离出来，以便方便大家食用，闲言少叙，直接上

---

一、vue-grid-layout 是什么？

一个类似于Gridster的栅格布局系统, 适用于Vue.js。灵感源自于React-Grid-Layout。使用步骤不再赘述，无脑点它，官网：猛戳我

二、正文

1.引入vue-grid-layout

业务需求是基于可编辑页面组件元素，所以使用动态组件动态导入，当然很多业务逻辑都已经抽离，包括了动态全局注册通用组件等，本文只是代码大致思路。

<template>
	<grid-layout :layout.sync="componentCfg.layout" :col-num="clientWidth" :row-height="1" @layout-updated="layoutUpdatedEvent">
       <grid-item :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" v-for="item in layout" :key="item.i">
           <component :is="item.type" :new-layout-component="newLayoutComponent"></component>
       </grid-item>
    </grid-layout>
</template>

<script>
import VueGridLayout from 'vue-grid-layout';

export default {
	components: {
		GridLayout: VueGridLayout.GridLayout
	},
	data() {
		return {
			layout: [{ x: 0, y: 0, w: 250, h: 200, type: 'myEcharts' }],
			newLayoutComponent : []
		}
	},

	methods: {
		layoutUpdatedEvent(newLayout) {
            this.newLayoutComponent = newLayout;
        }
	}
}
</script>

2.myEcharts组件

<template>
	<div id="myChart"></div>
</template>

<script>
import * as Utils from '@/utils/common';
export default {
	props: {
		newLayoutComponent: {
            type: Array,
            default: () => []
        }
	},
	watch: {
		newLayoutComponent: {
            handler(newVal) {
            	// 直接调用监听函数
                this.debounceWatch(newVal);
            },
            // 因为是数组数据格式，所以需要深度监听
            deep: true
        }
	},
	created() {
        // 根据自定义拉伸外框重置echarts尺寸大小
        this.debounceWatch = Utils.debounce((newVal) => {
            const { w, h } = newVal[0];
            const myChart = this.$echarts.getInstanceByDom(document.getElementById('myChart'));
            // 这里就是基于实际调试，再对echarts canvas画板大小进行微调
            const BASE_INFO = 80;
            myChart.resize({
                width: w - BASE_INFO,
                height: h + BASE_INFO
            });
        }, 500);
    },
	
    // 组件销毁前注销事件
    beforeDestroy() {
        this.debounceWatch = null;
    }
}
</script>

首先，先会在created钩子中声明 debounceWatch 函数，考虑到性能问题，调用 debounce 防抖去改变 echarts 尺寸大小；同时，在组件销毁前注销事件，防止内存泄漏。

---

3. Utils中的debounce防抖函数

这里用最简单的实现方式实现的防抖函数，供大家学习，在座读者大佬若有更好的方案，欢迎评论区探讨，互相学习共同进步！

// 防抖函数
export const debounce = (fn, timeout = 200) => {
    let timer = null;
    return function (...arg) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, arg);
        }, timeout);
    };
};

总结

以上，就是程序猿本猿的动态设置Echarts尺寸大小实现方案，欢迎大家探讨学习。