echarts的图表根据父容器大小的改变而改变（弹窗easy-ui的window窗口）

1.echarts的图表只绘制一次，所以要想大小随着父容器变化就得调方法重新绘制。所以把绘制图表的方法提出来。

<div class="echart">
    <div  :id="id" style="height: 100%;width: 100%;"></div>
</div>

data(){
   return{
        chart:""
   }
},

methods:{
   init(){
     let _width=$("#"+this.id).width();
     let _height=$("#"+this.id).height();
     this.chart=this.$echarts.init(document.getElementById(this.id));
     console.log(this.option);
    this.chart.resize({    //根据父容器的大小设置大小
       width:_width,
       height:_height
     });
     this.chart.setOption(this.option,true);
   }
}
2.用window窗口改变大小是调用的方法来调用echarts中的init方法（win和echarts组件是非父子组件）
 win组件中：

$("#" + _this.id).window({
  title: _this.data.title,
  width:_this.data.width,
  height:_this.data.height,
  top:_this.data.top,
  left:_this.data.left,
  cls:_this.class,
  collapsible:false,
  minimizable:false,
  maximizable:_this.data.maximizable,
  closable:true,
  modal: false,
  shadow: false,
  draggable: true,
  resizable:_this.data.resizable,
  onBeforeClose: function () {  //点击窗口关闭按钮的时候触发
    if (this) {
      $(this).window('destroy');
    }
    _this.$store.commit("win/win_close", {win_id: _this.id});
  },
  onResize:function (){            //窗口大小改变时触发
   _this.bus.$emit("echart")   //通过echarts调用echarts里的方法
  }
});

echarts组件中:

mounted() {
   setTimeout(()=>{   //做异步是为了先获取到父容器的宽高之后再进行绘制canvas，设置时长为2000ms是为了保留动画效果
     this.init();
   }，2000);
  this.bus.$on("echart",()=>{
    this.init();
  })
},