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

posted @ 2019-12-12 16:00  景恩  阅读(6234)  评论(3编辑  收藏  举报