ResponsiveContainer

ResponsiveContainer 是一个容器型的组件，用来处理图表的宽高需要适配父节点宽高的问题。建议宽度、高度至少有一个属性是百分比，否则可以直接指定图表的宽度、高度。

显示数据格式

<ResponsiveContainer width={700} height="80%">
    <AreaChart data={data}
      margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip />
      <ReferenceLine x="Page C" stroke="green" label="Min PAGE" />
      <ReferenceLine y={4000} label="Max" stroke="red" strokeDasharray="3 3" />
      <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
    </AreaChart>
  </ResponsiveContainer>

子组件

• <AreaChart />
• <BarChart />
• <LineChart />
• <ComposedChart />
• <PieChart />
• <RadarChart />
• <RadialBarChart />
• <ScatterChart />
• <Treemap />

Properties

• aspect Number optional

宽高比。如果指定了这个值，我们会根据 heihgt = width / aspect 来计算高度。

• width Percentage | Number

指定容器的宽度为一个数值，或者父节点宽度的百分比值。

默认值：'100%'

• height Percentage | Number

指定容器的高度为一个数值，或者父节点高度的百分比值。

默认值：'100%'

• minWidth Number optional

指定容器的最小宽度。

• minHeight Number optional

指定容器的最小高度。

• debounce Number

如果该值是一个正数，我们会用 debounce 函数来处理 resize 事件，避免 resize 事件频繁触发的问题。

默认值：0