vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-echarts缩小时autoresize失效

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

作者：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

但两者在一块就有冲突
这里分为父，子，孙三个盒子

<!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失效的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文