echarts自适应大小


图表




自定义指令

import Vue from "vue"
// 全局自定义指令

Vue.directive("chartsWeith",{
    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__);
    }
})

mian.js

import "@/directives"//引入自定义指令(针对左侧导航栏收起展开)