vue 监听某个容器大小变化（饼状图适应容器大小变化）

需求

echarts图表 根据容器大小改变大小 

主要应用了vue 监听 dom元素 尺寸的变化  

element提供的 element-resize-detector  可以轻松解决问题的存在

安装依赖

npm install element-resize-detector

require 引入使用，需要用到的页面 ***.vue 引入

phontoImage(){
        //渲染饼图调用的方法
              var echarts = require('echarts');
              var elementResizeDetectorMaker = require("element-resize-detector");//引入监听dom变化的组件
              var erd = elementResizeDetectorMaker();
              var worldMapContainer = document.getElementById('main4'); //获取 图标容器dom元素
               var that = this;
          //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
          var resizeWorldMapContainer = function () {
   
              worldMapContainer.style.width = worldMapContainer.scrollWidth+'