如何让react-e-charts图表填充父容器剩余空间？

我使用react-e-charts.js制作折线图，代码如下，但渲染后图表无法填满标题下方的父容器剩余空间，已经尝试了flexbox和h-full属性，问题仍未解决。

import "../index.css";
import colorConst from "./constant/color.js";
import ReactEcharts from "echarts-for-react";
import PropTypes from "prop-types";

const LineChart = ({
  xData = [],
  yData = [],
  title,
  seriesData = [],
  width,
  height,
}) => {
  const vw = (1920 * width) / 100;
  const vh = (1080 * height) / 100;
  const vwpx = vw.toString() + "px";
  const vhpx = vh.toString() + "px";

  const option = {
    xAxis: {
      data: xData,
      type: "category",
    },
    yAxis: {
      type: "value",
    },
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: true,
        itemStyle: {
          opacity: 0,
          color: "black",
        },
        lineStyle: {
          color: "black",
        },
      },
      {
        data: yData,
        type: "line",
        smooth: true,
        itemStyle: {
          opacity: 0,
          color: "black",
        },
        lineStyle: {
          color: "blue",
        },
      },
    ],
  };

  return (
    <div
      className="flex flex-col bg-primary p-[15px]"
      style={{ width: vwpx, height: vhpx }}
    >
      <h1 className="text-[25px]">{title}</h1>
      <ReactEcharts option={option} className="bg-[red] h-full w-full" />
    </div>
  );
};

解决方案 #

问题核心是Flex布局中未设置子项的空间分配规则，以及ReactEcharts组件的高度继承逻辑。按以下方式修改代码：

1. 给ReactEcharts的容器添加flex-1类（对应CSS的flex-grow:1），让它自动填充父容器的剩余高度；
2. 确保ReactEcharts组件的高度完全继承容器高度，可通过style={{ height: '100%' }}强化设置；

修改后的返回部分代码：

return (
  <div
    className="flex flex-col bg-primary p-[15px]"
    style={{ width: vwpx, height: vhpx }}
  >
    <h1 className="text-[25px]">{title}</h1>
    {/* 添加flex-1确保容器占满剩余空间，同时设置height:100%让ECharts继承高度 */}
    <ReactEcharts 
      option={option} 
      className="bg-[red] flex-1 w-full"
      style={{ height: '100%' }}
    />
  </div>
);

补充说明 #

• flex-1会让该子项在flex布局中占据所有可用的剩余空间，而标题部分会保持自身高度；
• ReactEcharts组件需要明确的高度才能渲染全屏，通过style={{ height: '100%' }}可以确保它完全填充父容器的高度；
• 如果仍有问题，可以检查父容器的vh计算是否准确，或者移除可能干扰的内边距/外边距样式。

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