如何让MUI X复合图表在数据集为空时显示无数据覆盖层

通过条件渲染就能实现空状态提示，核心逻辑是判断数据集是否为空：为空时展示提示文本，非空时渲染图表组件。

修改后的代码示例 #

import { Typography, Box } from '@mui/material';

// 你的数据集
const dataset = [];

// 独立的空状态组件
const EmptyChartState = () => (
  <Box 
    display="flex" 
    justifyContent="center" 
    alignItems="center" 
    height="300px"
    border="1px solid #e0e0e0"
    borderRadius={8}
  >
    <Typography variant="body1" color="text.secondary">
      No data to display
    </Typography>
  </Box>
);

// 页面渲染部分
{dataset.length === 0 ? (
  <EmptyChartState />
) : (
  <ChartContainer
    dataset={dataset}
    xAxis={[
      {
        id: "x-axis-id",
        scaleType: "band",
        dataKey: "name",
        height: 100,
      },
    ]}
    series={[
      { type: "bar", dataKey: "hours" },
      { type: "line", curve: "step", dataKey: "limit" },
    ]}
  >
    <BarPlot />
    <LinePlot />
    <ChartsXAxis axisId="x-axis-id" />
    <ChartsTooltip />
  </ChartContainer>
)}

可选优化 #

• 空状态组件可抽离到单独文件，方便全局复用
• 样式可根据项目设计规范调整，比如使用MUI主题色替换硬编码的边框色
• 若数据集是异步加载，可额外增加加载状态的判断逻辑

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