自适应父容器宽高

Echarts 自适应父容器的宽高需要满足父容器有明确的宽高,这里的明确宽高包括以下类型:

1. 固定尺寸类型

• 像素值：最直接的方式

  css

  .parent {
    width: 800px;
    height: 600px;
  }

2. 动态计算类型

• 视窗单位：

  css

  .parent {
    width: 80vw;  /* 视窗宽度的80% */
    height: 60vh; /* 视窗高度的60% */
  }

• calc计算：

  css

  .parent {
    height: calc(100vh - 200px);
  }

3. 布局约束类型

• Flex布局：

  css

  .grandparent {
    display: flex;
    height: 100vh;
  }
  .parent {
    flex: 1; /* 占据剩余所有空间 */
  }

• Grid布局：

  css

  .grandparent {
    display: grid;
    grid-template-rows: auto 1fr auto; /* 中间行自适应 */
    height: 100vh;
  }
  .parent {
    grid-row: 2;
  }

4. 继承类型

• 继承上级尺寸：

  css

  html, body {
    height: 100%;
  }
  .parent {
    height: 100%;
  }

5. 定位类型

• 绝对定位：

  css

  .grandparent {
    position: relative;
    height: 100vh;
  }
  .parent {
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
  }

6. 特殊约束类型

• aspect-ratio（宽高比）：

  css

  .parent {
    width: 100%;
    aspect-ratio: 16/9; /* 保持16:9比例 */
  }

• max-width/height约束：

  css

  .parent {
    width: 100%;
    max-width: 1200px;
    height: 70vh;
    max-height: 800px;
  }