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();
  })
},