封装一个echarts 监听window窗体变化，更新echarts大小

最新推荐文章于 2024-04-03 12:19:01 发布

VIP文章晋级的小猴

最新推荐文章于 2024-04-03 12:19:01 发布

阅读量357

点赞数

分类专栏： vue+echarts+element 文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/m0_65047017/article/details/125178846

版权

import * as echarts from 'echarts';
import Vue from 'vue';
import elementResizeDetectorMaker from "element-resize-detector"

export var version = '0.0.1';
var compatible = (/^2\./).test(Vue.version);
if (!compatible) {
    Vue.util.warn('vue echarts resize directive ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
}
let HANDLER = "_vue_echarts_resize_handler"

function bind(el) {
    unbind(el);
    el[HANDLER] = function () {
        let chart = echarts.getInstanceByDom(el);
        if (!chart) {
            return;
        }
        chart.resize();
    }
    //监听window窗体变化，更新echarts大小
    //window.addEventListener("resize", el[HANDLER])
    //监听绑定的div大小变化，更新echarts大小
    elementResizeDetectorMaker().listenTo(el, el[HANDLER])

}
function unbind(el) {
    //window.removeEventListener("resize", el[HANDLER]);
    elementResizeDe