API - 笛卡尔坐标系组件 - Area - 《Recharts 开发者手册》

Area

Area

父组件

子组件

<LabelList />

Properties

type 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | Function

曲线的插值类型，可以接收自定义的函数。折线对应的 type 为 "linear"。

默认值：'linear'

示例：

dataKey String | Number

每个区域图对应一个唯一的 key，需要在 AreaChart 中保证唯一。

xAxisId String | Number

区域图对应的 x 轴的 id 。

默认值：0

yAxisId String | Number

区域图对应的 y 轴的 id 。

默认值：0

legendType 'line' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none' optional

对应的图例 icon 的类型。

默认值：'line'

dot Boolean | Object | ReactElement | Function

曲线上的点，接收多种配置。当值为 false ，不渲染点。当值为 true ，点会继承 Area 的属性配置，例如配置了 Area 的 stroke 为 "red"，点会继承这个属性。当值为一个对象的时候，会把这个对象解析为点的属性，来覆盖默认属性。当值是一个 React Element ，会克隆这个 React Element 来渲染“点”。当值是函数时，会调用这个函数去渲染自定义的“点”。

默认值：false

格式：

<Area dataKey="value" dot={false} />
<Area dataKey="value" dot={{ stroke: 'red', strokeWidth: 2 }} />
<Area dataKey="value" dot={<CustomizedDot />} />
<Area dataKey="value" dot={renderDot}/>

activeDot Boolean | Object | ReactElement | Function

当图表触发 mouseenter 事件，并且需要展示 Tooltip 的时候，会展示一个“激活状态的点”。当值为 false ，不渲染“激活状态的点”。当值为 true ，点会继承 Area 的属性配置，例如配置了 Area 的 stroke 为 "red"，点会继承这个属性。当值为一个对象的时候，会把这个对象解析为点的属性，来覆盖默认属性。当值是一个 React Element ，会克隆这个 React Element 来渲染“点”。当值是一个函数时，会调用这个函数去渲染自定义的“点”。

默认值：true

格式：

<Area dataKey="value" activeDot={false} />
<Area dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
<Area dataKey="value" activeDot={<CustomizedActiveDot />} />
<Area dataKey="value" activeDot={renderDot} />

label Boolean | Object | ReactElement | Function

图形上的文本标签。当值为 false ，不展示文本标签。当值为 true，会根据 Area 的属性配置来展示文本标签。当值为对象的时候，会把这个对象解析为文本标签的属性，来覆盖默认属性。当值是一个 React Element ，会克隆这个 React Element 来渲染“文本标签”。当值是一个函数时，会调用这个函数去渲染自定义的“文本标签”。

默认值：false

格式：

<Area dataKey="value" label />
<Area dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
<Area dataKey="value" label={<CustomizedLabel />} />
<Area dataKey="value" label={renderLabel} />

stroke String

描边的颜色。当值为"none"时，不描边

默认值：#3182bd

layout 'horizontal' | 'vertical' optional

布局类型，通常继承父组件的布局类型。

baseLine Number | Array

基准线，可以是一个数值，这种情况会根据 layout 解析成 x = ${baseLine} 或者 y = ${baseLine}。当使用 AreaChart 或者 ComposedChart 作为父组件的时候，不需要自己计算，父组件会计算好。

格式：

<Area dataKey="value" baseLine={8} />
<Area dataKey="value" baseLine={[{ x: 12, y: 15 }]} />

points Array

曲线上点的坐标。当使用 AreaChart 或者 ComposedChart 作为父组件的时候，不需要自己计算，父组件会计算好。

格式：

[{ x: 12, y: 12, value: 240 }]

stackId String | Number optional

堆积id，当两组及以上的区域图有相同的数值轴以及相同的 stackId 时，这些区域图会按照顺序堆积展示。

格式：


<AreaChart data={data} width={400} height={300}>
  <Area stackId="pv" dataKey="pv01" />
  <Area stackId="pv" dataKey="pv02" />
  <Area stackId="uv" dataKey="uv01" />
  <Area stackId="uv" dataKey="uv02" />
</AreaChart>