当前位置：首页 > news >正文

vue-echarts高度缩小时autoresize失效

news 2025/7/7 1:48:03

背景

项目中采用动态给x-vue-echarts style赋值width，height的方式实现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 lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.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>
</head><body><div class="father"><div class="me"><div class="son"></div></div></div>
</body></html>