vue-echarts高度縮小時autoresize失效的原因和解決辦法

更新時間：2024年12月13日 10:53:21 作者：llh_fzl

Vue-Echarts是一個基于ECharts封裝的輕量級、易用的圖表組件庫,它允許你在Vue.js應用中方便地集成ECharts,這是一個強大而直觀的數(shù)據(jù)可視化庫,本文給大家介紹了vue-echarts高度縮小時autoresize失效的原因和解決辦法,需要的朋友可以參考下

背景

項目中采用動態(tài)給x-vue-echarts style賦值width，height的方式實現(xiàn)echarts圖表尺寸的改變

在這里插入圖片描述

  <v-chart
	...
    autoresize
  ></v-chart>

給v-chart添加autoresize后，在圖表寬度變化，高度增加時無異常，高度減小時圖表并未縮小，反而被截斷了

先說結論

添加全局樣式進行覆蓋

div.vue-echarts-inner {
  height: 100% !important;
}

原理

查看vue-echarts源碼

在這里插入圖片描述

這里的inner以及useAutoresize中的root值為該dom節(jié)點

在這里插入圖片描述

所以實際上是在監(jiān)聽div.vue-echarts-inner這個dom節(jié)點的尺寸變化，從而去給inner的子盒子設置width和height

在這里插入圖片描述

下面是父盒子的css屬性

在這里插入圖片描述

下面是inner的css屬性

在這里插入圖片描述

問題就在于flex和height auto

父盒子為flex盒且flex-direction為column，子盒子設置flex-grow:1，那么子盒子會填滿父盒子的高度
父盒子設置高度為height:auto，那么高度會以其子盒子內(nèi)容高度為準，也就是子盒子是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>

結論：

父盒子高度大于孫盒子時，子盒子高度跟隨父盒子

在這里插入圖片描述