vue 之 折线图挤压
当tab标签栏变动时,echarts图会发生挤,这种情况,发现是html容器的width=100%这个设置,变成了width=100px。
解决方式:
1.设置一个最小宽度,获取width的值,当这个值小于最小宽度时,赋值给它。
2.使用window.innerWidth获取值,在tab未激活时也可以获取得到页宽。
document.getElementById("LineCharts").style.width=(window.innerWidth-60)+'px';
//html <div id="LineCharts" style="width:100%;height:400px"></div> //js let pieCharts = document.getElementById("LineCharts"); let chartsOffetWidth = document.getElementById("LineCharts").offsetWidth; if(chartsOffetWidth === 0 ){ let parentWidth = document.documentElement.clientWidth - 285; if(parentWidth < 1035){ parentWidth = 1035; } pieCharts.style.width = parentWidth + 'px'; } this.myLineCharts = echarts.init(pieCharts); this.myLineCharts.clear();
工作如同河川,自闲暇的深海觅得圆满。