vue项目中监听div宽高变化,并且重新加载图表

  1. 安装依赖插件
npm install element-resize-detector --save
  1. 当前页面引入或者全局引入
import elementResizeDetectorMaker from "element-resize-detector";
  1. 使用:在mounted()函数中获取当前div的宽高,重置echarts图表。
mounted() {
    const  that = this;
    const erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById("div的id名"), element => {
    let width = element.offsetWidth;//当前div的宽度
    let height = element.loffsetHeight;//当前div的高度
      that.$nextTick(() => {
        //监听到事件后执行的业务逻辑
        //使echarts尺寸重置
        that.$echarts.init(document.getElementById("div的id名")).resize();
      });
    });
  },

你可能感兴趣的:(javascript,前端,es6)