如何在ReCharts中缩小Area Chart面积图以适配指定显示区域

核心修复步骤 #

• 修正数据源格式：你提供的示例数组首项为字符串"0"，不符合ReCharts要求的全对象数组结构，会导致坐标轴坐标计算异常，是图表溢出的核心原因，先对数据做过滤处理：

// 过滤非对象的无效数据项
const validData = (chartdata.length > 1 ? chartdata : data).filter(item => typeof item === 'object' && item?.ykey)

• 配置Y轴约束：未明确Y轴范围时，异常值会导致Y轴被大幅拉伸，可根据数据特性选择配置：

  • 自动适配有效数据范围：添加domain参数限制取值区间
  • 大跨度指数型数据优化：添加scale="log"启用对数缩放，大幅降低数值差带来的高度拉伸（注意y值不能为0）

• 调整外层容器宽度：将外层Box的固定宽度w="5xl"改为maxW="5xl"+w="100%"，避免固定宽度超出父级容器范围

• 兜底溢出隐藏：给ResponsiveContainer的父div添加overflow: hidden属性，避免极端情况撑开外层容器

修正后完整代码 #

<Box
  w="100%"
  maxW="5xl"
  py={4}
  px={8}
  rounded="lg"
  bg={useColorModeValue("white", "gray.900")}
  shadow="lg"
>
  <Flex justify="center">
    <Select mb="1.5" width="47%" variant="filled" onChange={addOpt}>
      <option defaultValue>选择一个选项</option>
      <option>确诊</option>
      <option>治愈</option>
      <option>死亡</option>
    </Select>
  </Flex>
  <div style={{ overflow: 'hidden' }}>
    <ResponsiveContainer width="100%" height={500}>
      <AreaChart data={validData}>
        <Area dataKey="ykey"/>
        <XAxis dataKey="data"/>
        {/* 根据需要选择domain或scale配置 */}
        <YAxis dataKey="ykey" domain={['dataMin - 100', 'dataMax + 100']} />
        {/* 大跨度数据可改用对数缩放：<YAxis dataKey="ykey" scale="log" /> */}
      </AreaChart>
    </ResponsiveContainer>
  </div>
</Box>

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