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的响应式布局