场景与问题
在页面中,我使用了 flex 布局,使得图表模块宽高都自适应。给两个图表绑定了 resize 事件,该事件可以使得图表会根据浏览器的变化而自适应 。
问题:窗口从小到大变化时,图表大小正常,但是从大变小时,第一个图表的高度异常(如图)。多方排查之后,才发现是 echarts 没有兼容 flex 布局的原因。
解决方法
给 flex 的 item 设置最小宽度 min-width
和最小高度 min-height
。
.flex-item {
flex: 1;
min-width: 20%;
min-height: 50%;
}
如果不生效,试一下将 flex 改为百分比布局,如上例子,将图表的高度设置为 height: 50%
。
resize 监听代码:
<script>
// 写法一
window.addEventListener("resize",function (){
myChart.resize();
myChartA.resize();
});
// 写法二
window.onresize = function(){
myChart.resize();
myChartA.resize();
}
// 写法三
window.onresize = myChart.resize;
</script>