网站建设公司网站源码,如何免费申请自己的网站,交友深圳网站建设,西安专业做网站的背景
项目中采用动态给x-vue-echarts style赋值width#xff0c;height的方式实现echarts图表尺寸的改变 v-chart...autoresize/v-chart给v-chart添加autoresize后#xff0c;在图表宽度变化#xff0c;高度增加时无异常#xff0c;高度减小时图表并未缩…背景
项目中采用动态给x-vue-echarts style赋值widthheight的方式实现echarts图表尺寸的改变 v-chart...autoresize/v-chart给v-chart添加autoresize后在图表宽度变化高度增加时无异常高度减小时图表并未缩小反而被截断了
先说结论
添加全局样式进行覆盖
div.vue-echarts-inner {height: 100% !important;
}原理
查看vue-echarts源码 这里的inner以及useAutoresize中的root值为该dom节点 所以实际上是在监听div.vue-echarts-inner这个dom节点的尺寸变化从而去给inner的子盒子设置width和height 下面是父盒子的css属性 下面是inner的css属性 问题就在于flex和height auto
父盒子为flex盒且flex-direction为column子盒子设置flex-grow:1那么子盒子会填满父盒子的高度父盒子设置高度为height:auto那么高度会以其子盒子内容高度为准也就是子盒子是300px就会把该盒子高度撑到300px
但两者在一块就有冲突 这里分为父子孙三个盒子
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.father {display: flex;flex-direction: column;background-color: red;width: 500px;height: 500px;}.me {flex: 1;width: 300px;background-color: green;height: auto;}.son {width: 100px;background-color: blue;height: 500px;}/style
/headbodydiv classfatherdiv classmediv classson/div/div/div
/body/html结论 父盒子高度大于孙盒子时子盒子高度跟随父盒子 父盒子高度小于孙盒子时子盒子高度跟随孙盒子 回到vue-echarts场景所以在高度减少时inner的父盒子高度减少但inner子盒子高度不变所以inner盒子高度不会变不会触发resize
解决办法inner设置height: 100%这样inner的高度会跟随其父盒子高度而变化而不会受其子盒子影响
