脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-echarts缩小时autoresize失效

vue-echarts高度缩小时autoresize失效的原因和解决办法

 更新时间：2024年12月13日 10:53:21   作者：llh_fzl  
Vue-Echarts是一个基于ECharts封装的轻量级、易用的图表组件库,它允许你在Vue.js应用中方便地集成ECharts,这是一个强大而直观的数据可视化库,本文给大家介绍了vue-echarts高度缩小时autoresize失效的原因和解决办法,需要的朋友可以参考下

背景

项目中采用动态给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>

结论：

父盒子高度大于孙盒子时，子盒子高度跟随父盒子

在这里插入图片描述

父盒子高度小于孙盒子时，子盒子高度跟随孙盒子

在这里插入图片描述

回到vue-echarts场景，所以在高度减少时，inner的父盒子高度减少，但inner子盒子高度不变，所以inner盒子高度不会变，不会触发resize

解决办法：inner设置height: 100%，这样inner的高度会跟随其父盒子高度而变化，而不会受其子盒子影响

以上就是vue-echarts高度缩小时autoresize失效的原因和解决办法的详细内容，更多关于vue-echarts缩小时autoresize失效的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory

    解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory

    这篇文章主要介绍了解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • el-upload 文件上传组件的使用讲解

    el-upload 文件上传组件的使用讲解

    Upload 上传文件这个功能是我们在企业实际开发当中使用频率是非常高的这样一个文件上传的功能,element ui组件组也给我们提供了上传的组件,本文给大家介绍el-upload 文件上传组件的使用,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • 前端vue2使用国密SM4进行加密、解密具体方法

    前端vue2使用国密SM4进行加密、解密具体方法

    SM4是一种对称加密算法,类似于AES,主要用于数据的批量加密,如文件加密、数据库加密、网络通信数据加密等,这篇文章主要给大家介绍了关于前端vue2使用国密SM4进行加密、解密的相关资料,需要的朋友可以参考下
    2024-07-07
  • 对vue生命周期的深入理解

    对vue生命周期的深入理解

    这篇文章主要给大家介绍了关于对vue生命周期的深入理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Vue中的匿名插槽与具名插槽详解

    Vue中的匿名插槽与具名插槽详解

    这篇文章主要为大家介绍了Vue中的匿名插槽与具名插槽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • Vue element-ui表格内嵌进度条功能实现方法

    Vue element-ui表格内嵌进度条功能实现方法

    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,下面这篇文章主要给大家介绍了关于Vue element-ui表格内嵌进度条功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • VUE+Element UI实现简单的表格行内编辑效果的示例的代码

    VUE+Element UI实现简单的表格行内编辑效果的示例的代码

    这篇文章主要介绍了VUE+Element UI实现简单的表格行内编辑效果的示例的代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue组件实践之可搜索下拉框功能

    vue组件实践之可搜索下拉框功能

    这篇文章主要介绍了vue实现可搜索的下拉菜单组件功能，在文中通过实例代码给大家补充介绍了vue组件实践-可搜索下拉框，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11
  • Element-UI 使用el-row 分栏布局的教程

    Element-UI 使用el-row 分栏布局的教程

    这篇文章主要介绍了Element-UI 使用el-row 分栏布局的教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue使用ElementUI时导航栏默认展开功能的实现

    vue使用ElementUI时导航栏默认展开功能的实现

    这篇文章主要介绍了vue使用ElementUI时导航栏默认展开功能的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-07-07

最新评论