脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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失效的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • mpvue中使用flyjs全局拦截的实现代码

    mpvue中使用flyjs全局拦截的实现代码

    这篇文章主要介绍了mpvue中使用flyjs全局拦截的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue2.0 组件传值通讯的示例代码

    Vue2.0 组件传值通讯的示例代码

    本篇文章主要介绍了Vue2.0 组件传值通讯的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue项目中使用html2canvas解决截图不全的问题

    vue项目中使用html2canvas解决截图不全的问题

    本文主要介绍了vue项目中使用html2canvas解决截图不全的问题
    2023-11-11
  • 一文详解vue中侦听器的使用

    一文详解vue中侦听器的使用

    这篇文章主要为大家详细介绍了vue中侦听器使用的相关知识，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学习一下
    2007-02-02
  • Vue2中使用axios的3种方法实例总结

    Vue2中使用axios的3种方法实例总结

    axios从功能上来说就是主要用于我们前端向后端发送请求,是基于http客户端的promise,面向浏览器和nodejs,下面这篇文章主要给大家介绍了关于Vue2中使用axios的3种方法,需要的朋友可以参考下
    2022-09-09
  • VueJS 取得 URL 参数值的方法

    VueJS 取得 URL 参数值的方法

    form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。本文给大家简单介绍了VueJS U取得RL 参数值的方法，详细给大家介绍了vue自定义表单生成器可根据json参数动态生成表单效果，感兴趣的朋友一起看看吧
    2019-07-07
  • Vue Router修改query参数url参数没有变化问题及解决

    Vue Router修改query参数url参数没有变化问题及解决

    这篇文章主要介绍了Vue Router修改query参数url参数没有变化问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue页面中引入img图片的方法

    Vue页面中引入img图片的方法

    本文主要介绍了Vue页面中引入img图片的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue3+ts+Vuex中使用websocket协议方式

    vue3+ts+Vuex中使用websocket协议方式

    这篇文章主要介绍了vue3+ts+Vuex中使用websocket协议方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue el-table实现多选框回填的示例代码

    vue el-table实现多选框回填的示例代码

    摘要：Vue多选框回填是实现表单数据高效处理的常见需求,本文主要介绍了vue el-table实现多选框回填的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01

最新评论