Description
Version
4.5.0
Steps to reproduce
Check it please: https://jsfiddle.net/6s4odwtu/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<style>
.container {
/* width: 500px; */
display: flex;
border: 1px solid red;
padding: 5px;
}
.left {
position: relative;
height: 300px;
flex: 0.5;
border: 1px solid green;
}
.right {
position: relative;
height: 300px;
flex: 1;
border: 1px solid blue;
}
.chart {
width: 100%;
height: 100%;
/* left: 0;
top: 0; */
position: relative;
}
#info {
position: fixed;
background: #000;
border: 2px solid #eee;
right: 10px;
top: 10px;
padding: 5px;
width: 130px;
height: 100px;
color: #fff;
box-shadow: 0 0 5px #000;
font-size: 12px;
z-index: 9999;
}
</style>
<button id="expand">container: 700px</button>
<button id="collapse">container: 500px</button>
<div id="container" class="container">
<div class="left" id="main0-box">
<div id="main0" class="chart">
</div>
</div>
<div class="right" id="main1-box">
<div id="main1" class="chart">
</div>
</div>
</div>
<script>
var expandBtn = document.getElementById('expand');
var collapseBtn = document.getElementById('collapse');
var container = document.getElementById('container');
expandBtn.onclick = function () {
container.style.width = '700px';
resize();
};
collapseBtn.onclick = function () {
container.style.width = '500px';
resize();
};
var option;
option0 = {
xAxis: {},
yAxis: {},
series: {
type: 'line',
data: [[11, 22], [33, 44]]
}
};
option1 = {
xAxis: {},
yAxis: {},
series: {
type: 'line',
data: [[11, 22], [33, 44]]
}
};
var main0 = document.getElementById('main0');
var main1 = document.getElementById('main1');
var main0Box = document.getElementById('main0-box');
var main1Box = document.getElementById('main1-box');
var chart0 = echarts.init(main0);
var chart1 = echarts.init(main1);
function resize() {
console.log('before resize, main0Box', main0Box.offsetWidth);
console.log('before resize, main1Box', main1Box.offsetWidth);
chart0.resize();
chart1.resize();
console.log('after resize, main0Box', main0Box.offsetWidth);
console.log('after resize, main1Box', main1Box.offsetWidth);
};
chart0.setOption(option0);
chart1.setOption(option1);
</script>
</body>
</html>What is expected?
Resize correct.
What is actually happening?
Resize not correct.
The reason seams to be:
echarts(zrender) set the "width/height" manually on its root dom element,
and try to set domRoot.style.display = 'none'; in Painter.js#resize.
That does not work in the case above:
If there are more than one echarts instance and the echarts element is position: relative,
set width/height and display:none one by one influence the layout of flex box.
In the above case, it firstly call chart.resize() on the first chart. And then the chart set its
domRoot.style.display = 'none';. But the second chart still have its width/height set on
its dom root. Thus the offsetWidth the first chart fetched is different from the final width of its parent dom.
So, do we really need to manually set width/height on echarts root dom in zrender?
If we do it, it might influence the layout in some cases.