echart 多图表调用resize时宽高不正确

旋转前端皮塔牙

已于 2023-05-06 10:01:43 修改

阅读量851

点赞数 1

文章标签： echarts javascript 前端

于 2023-05-05 17:29:11 首次发布

本文链接：https://blog.csdn.net/xzhlg57656/article/details/130511178

版权

文章描述了一个使用flex布局时，Echarts图表在窗口大小改变时出现高度异常的情况。问题在于Echarts对flex布局的不完全兼容。解决方法包括为flexitem设置最小宽度和高度，或者切换到百分比布局。同时，提供了三种不同的resize事件监听写法来确保图表能正确调整大小。

摘要由CSDN通过智能技术生成

场景与问题

在页面中，我使用了 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>