vue中的echarts自适应窗口

vue中的echarts自适应窗口

一开始沿用之前element表格高度自适应的思路用:style='chartStyle'，发现并不能实现根据浏览器窗口动态调整echarts的大小的功能。在网上查资料发现echarts自带resize（）方法，这让问题变得简单多了。

1.首先正常写一个echarts容器

<div id="lineChart" style='width:100%;height: 75vh'></div>

2.定义一个方法

resizeHandler() {
     
	this.myChart.resize()
},

3.然后和原来一样的监听和销毁该方法

    mounted () {
     
      //执行渲染chart程序
      this.init()
      //监听页面变化。
      window.addEventListener('resize',this.resizeHandler,false)
    },
    //销毁组件时移除监听
    destroyed(){
     
      window.removeEventListener("resize",this.resizeHandler,false);
    },

完成echarts的响应式布局