echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起


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

chartContainer用来存放Echart图,设置宽高100%时出现Echart图没有铺满div

 

 

 需要强行设置宽高px

<div id="chartContainer" style="height:450px;width:1030px;"></div>

 

 

 

echarts的源码中计算宽度时:

Painter.prototype._getWidth = function() {
var root = this.root;
var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
};

原因在于echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM