React项目嵌入Power BI报表时如何设置宽高优化显示效果

我正在开发一个React项目，已实现Power BI嵌入功能来展示报表，目前遇到UI端生成的报表尺寸异常问题，需要增大图表的显示尺寸，缩小红色标注的空白区域。
相关嵌入代码如下：

{selectedModel.AuthenticationMode !== null ? (
  <div className="iframe-container-powerbi">
    {generatedPowerBiToken && (
      <PowerBIEmbed
        embedConfig={{
          type: "report",
          id: generatedPowerBiToken.id,
          embedUrl: generatedPowerBiToken.embedUrl,
          accessToken: generatedPowerBiToken.accessToken,
          tokenType: models.TokenType.Embed,
          settings: {
            layoutType: models.LayoutType.Custom,
            customLayout: {
              displayOption: models.DisplayOption.FitToPage,
            },
            panes: {
              filters: {
                expanded: true,
                visible: true,
              },
            },
            //background: models.BackgroundType.Transparent,
          },
        }}
        eventHandlers={
          new Map([
            [
              "loaded",
              function () {
                console.log("Report loaded");
              },
            ],
            [
              "rendered",
              function () {
                console.log("Report rendered");
              },
            ],
            [
              "error",
              function (event) {
                console.log(event.detail);
              },
            ],
          ])
        }
        cssClassName={"report-style-class"}
      />
    )}
  </div>
) : (
  <div className="iframe-container">
    <Iframe
      url={ifActiveUrl}
      width="100%"
      height="100%"
      id="modelIframe"
      className="model-iframe"
      display={ifUrlOpen ? "initial" : "none"}
      position="relative"
    />
  </div>
)}

报表渲染效果：

• 调整布局展示配置
  你当前使用的FitToPage模式会等比缩放报表以完整放入容器，容易产生大量留白，可替换为FitToWidth让报表优先适配容器宽度，高度自适应，也可以选择ActualSize按实际尺寸展示，同时可以在customLayout中添加边距配置强制压缩内置留白：

customLayout: {
  displayOption: models.DisplayOption.FitToWidth,
  margin: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  }
}

• 隐藏非必要面板
  你当前开启了筛选面板展示，若无需筛选功能可将panes.filters.visible设为false，即可收回右侧筛选栏的空间，也可补充隐藏导航栏、操作栏等自带UI元素：

settings: {
  navContentPaneEnabled: false,
  bars: {
    actionBar: { visible: false },
    statusBar: { visible: false }
  },
  panes: {
    filters: { expanded: false, visible: false }
  },
  // 保留原有其他配置
}

• 优化容器CSS样式
  给外层容器和Power BI嵌入组件添加宽高强制样式，确保容器占满预留展示区域：

.iframe-container-powerbi {
  width: 100%;
  min-height: 800px;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.report-style-class {
  width: 100%;
  height: 100%;
  border: none;
}

• 渲染完成后主动刷新布局
  在rendered事件回调中调用Power BI JS API主动更新布局配置，避免初始化渲染异常：

["rendered", async function () {
  console.log("Report rendered");
  const report = powerbi.get(document.querySelector(".report-style-class"));
  await report.updateSettings({
    customLayout: {
      displayOption: models.DisplayOption.FitToWidth
    }
  });
}]

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