Vue Echarts自动适配父容器大小问题（element-resize-detector）

Vue Echarts自动适配父容器大小问题（element-resize-detector）

vue用来监控元素尺寸大小变化插件

npm i element-resize-detector

import elementResizeDetectorMaker from 'element-resize-detector' // 尺寸监听组件

monted(){
  	var mainChart = document.getElementById(this.pieName);
    let charts = this.$echarts.init(mainChart); // 图标ID初始化--使用它的resize()
    // 初始化element-resize-detector组件
    let erd = elementResizeDetectorMaker({
      strategy: "scroll", // <- 推荐监听滚动，提升性能
      callOnAdd: true // 添加侦听器时是否应调用,默认true
    })
    //监听id的元素 大小变化 参数element
    erd.listenTo(mainChart, function(element) {
      //let width = element.offsetWidth;
      //let height = element.offsetHeight;
      //console.log("Size: " + width + "x" + height);
      charts.resize(); // 当元素尺寸发生改变是会触发此事件，刷新图表
    });
}