脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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开发移动端管理后台的注意事项

    使用vue开发移动端管理后台的注意事项

    这篇文章主要介绍了使用vue开发移动端管理后台的注意事项,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 解决vue报错:Do not mutate vuex store state outside mutation handlers问题

    解决vue报错:Do not mutate vuex store state outside mutati

    这篇文章主要介绍了解决vue报错:Do not mutate vuex store state outside mutation handlers问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • 详解Vue+elementUI build打包部署后字体图标丢失问题

    详解Vue+elementUI build打包部署后字体图标丢失问题

    这篇文章主要介绍了详解Vue+elementUI build打包部署后字体图标丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue中全局限制输入特殊字符方式

    Vue中全局限制输入特殊字符方式

    这篇文章主要介绍了Vue中全局限制输入特殊字符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue打印功能实现的两种方法总结

    vue打印功能实现的两种方法总结

    在项目中,有时需要打印页面的表格,所以下面这篇文章主要给大家介绍了关于vue打印功能实现的两种方法,以及批量打印的完整代码,需要的朋友可以参考下
    2021-06-06
  • Vue CompositionAPI中watch和watchEffect的区别详解

    Vue CompositionAPI中watch和watchEffect的区别详解

    这篇文章主要为大家详细介绍了Vue CompositionAPI中watch和watchEffect的区别，文中的示例代码简洁易懂，希望对大家学习Vue有一定的帮助
    2023-06-06
  • antd vue 如何调整checkbox默认样式

    antd vue 如何调整checkbox默认样式

    这篇文章主要介绍了antd vue 如何调整checkbox默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • Vue监听器简单使用及注意事项说明

    Vue监听器简单使用及注意事项说明

    这篇文章主要介绍了Vue监听器简单使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 基于Element封装一个表格组件tableList的使用方法

    基于Element封装一个表格组件tableList的使用方法

    这篇文章主要介绍了基于Element封装一个表格组件tableList的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue实现多条件和模糊搜索功能

    vue实现多条件和模糊搜索功能

    这篇文章主要为大家详细介绍了vue实现多条件和模糊搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论