Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Chart resize is not correct in some case of flex box layout.
See original GitHub issueVersion
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.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:6
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I’ve temporally solved this by setting
width: auto!importantfrom my CSS to override the width from the dynamically created CSS rule.Faced the same issue: Work around (simplified):