当前位置: 首页 > Web前端 > vue.js

echarts中flex布局可能会导致高度不能适应的问题

时间:2023-03-31 14:56:11 vue.js

echarts中的flex布局可能会导致高度无法适配Flex布局的问题,flex布局也是开发自适应网站时首选的布局方式。目前,最推荐的页面布局技术遇到了问题。在flex布局中,外层父div包裹了三个子div,三个子div的高度需要平均。设置子div的flex全部为1,这样高度就自动平均分配了。注意如果是垂直方向,父元素需要设置flex-direction:column;。页面全屏或缩小时,echarts的resize可能会造成一定的影响图表高度适配失败的预期效果分析原因我猜测:调用resize时echarts会重绘,如果你的childdiv没有设置高度,但只需设置flex:1;那么就会出现下面的场景:触发三个图表resize后,子元素的高度都为0,父元素的高度也为0,会导致第一次重绘图表所在的子div的高度located不清晰,可能会导致resize后第一个绘制的图表的高度仍然是默认高度解决方法是给每个childdiv设置一个默认的最小高度。这个高度不能与您的预期高度相差太大。您可以使用百分比,如下所示:parentdiv:.box{//parentdivheight:100%;显示:弹性;flex-direction:column;}childdiv:.item{//childdivflex:1;最小高度:计算(100%/3.33);}