如何让页面中同一行的饼图与折线图保持相同高度？

• 固定容器高度+统一图表内部配置
  先给两个图表的容器元素设置相同的CSS高度，确保布局容器的基础高度一致：

  .pie-chart, .line-chart {
    height: 320px;
    width: calc(50% - 10px);
    display: inline-block;
    margin-right: 10px;
  }
  

  再在图表的初始化配置里，统一设置内部网格、边距参数，避免因内部布局差异导致视觉高度不同。以ECharts为例：

  // 饼图配置
  const pieInstance = echarts.init(document.querySelector('.pie-chart'));
  pieInstance.setOption({
    grid: { top: '15%', bottom: '15%', left: '5%', right: '5%' },
    // 其他饼图专属配置
  });
  
  // 折线图配置
  const lineInstance = echarts.init(document.querySelector('.line-chart'));
  lineInstance.setOption({
    grid: { top: '15%', bottom: '15%', left: '5%', right: '5%' },
    // 其他折线图专属配置
  });
  

• 用Flexbox布局强制等高
  把两个图表的父容器设置为Flex布局，子容器会自动填充父容器的高度，实现强制等高：

  .charts-wrapper {
    display: flex;
    gap: 10px;
    height: 320px;
  }
  .charts-wrapper > div {
    flex: 1;
  }
  

  这种方式无需单独给子容器设高度，只要父容器高度固定，两个图表就会保持一致的视觉高度。

• 覆盖第三方图表库默认样式
  若使用Chart.js这类库，部分图表类型（如饼图）默认有特殊的内边距比例，需要手动统一：

  // Chart.js 饼图配置
  new Chart(document.getElementById('pie-chart'), {
    type: 'pie',
    options: {
      maintainAspectRatio: false,
      responsive: true,
      layout: {
        padding: { top: 20, bottom: 20 }
      }
    },
    // 数据配置项
  });
  
  // Chart.js 折线图配置
  new Chart(document.getElementById('line-chart'), {
    type: 'line',
    options: {
      maintainAspectRatio: false,
      responsive: true,
      layout: {
        padding: { top: 20, bottom: 20 }
      }
    },
    // 数据配置项
  });
  

  开启maintainAspectRatio: false后，图表会完全遵循容器的尺寸设置，避免默认比例干扰高度。

内容的提问来源于stack exchange，提问作者feno noga