Area

Properties

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

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

  默认值："linear"

  示例：

  • d3-shape interpolation
  • An AreaChart which has two area with different interpolation.

• dataKeyString | Number | Function

  区域图对应的字段，可以是字符串、数字或者函数。字符串和数字分别表示对应数据对象中的属性名和属性索引；函数会接收数据对象作为参数，返回区域图对应的值。

• xAxisIdString | Number

  区域图对应的 x 轴的 id 。

  默认值：0

• yAxisIdString | Number

  区域图对应的 y 轴的 id 。

  默认值：0

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

  对应的图例 icon 的类型。

  默认值："line"

• dotBoolean | 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}/>

• activeDotBoolean | 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} />

• labelBoolean | 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} />

• strokeString

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

  默认值："#3182bd"

• strokeWidthString | Numberoptional

  虚线的宽度

  默认值：1

• baseLineNumber | Arrayoptional

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

  格式：

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

• stackIdString | Numberoptional

  堆积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>
  

  示例：

  • A stacked area chart

• connectNullsBoolean

  当遇到 null、undefined 等非法输入的时候，是否跳过这个值，让前后连接起来。

  默认值：false

  示例：

  • An areaChart connect nulls and an areaChart disconnect nulls

• unitString | Numberoptional

  对应数据的单位，这个单位会展示在 Tooltip 的数值后面。

• nameString | Numberoptional

  对应数据的名称，这个名称会展示在 Tooltip 以及 Legend 中用来表示这个区域图。如果名称为空，我们会使用 dataKey 替代。

• isAnimationActiveBoolean | 'auto'

  当值为 false，不开启动画。

  默认值："auto"

• animationBeginNumber

  声明组件挂载或更新后，开始运行动画的间隔时长，单位为毫秒。

  默认值：0

• animationDurationNumber

  声明动画的运行时长，单位为毫秒。

  默认值：1500

• animationEasing'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'

  动画缓动函数的类型。

  默认值："ease"

• idStringoptional

  唯一的id，会用于生成内部的clip path id 等，建议使用SSR的时候设置这个属性。

• onAnimationStartFunctionoptional

  区域图动画 start 事件的回调函数。

• onAnimationEndFunctionoptional

  区域图动画 end 事件的回调函数。

• onClickFunctionoptional

  区域图 click 事件的回调函数。

  示例：

  • A BarChart with customized click event handler

• onMouseDownFunctionoptional

  区域图 mousedown 事件的回调函数。

• onMouseUpFunctionoptional

  区域图 mouseup 事件的回调函数。

• onMouseMoveFunctionoptional

  区域图 mousemove 事件的回调函数。

• onMouseOverFunctionoptional

  区域图 mouseover 事件的回调函数。

• onMouseOutFunctionoptional

  区域图 mouseout 事件的回调函数。

• onMouseEnterFunctionoptional

  区域图 mouseenter 事件的回调函数。

• onMouseLeaveFunctionoptional

  区域图 mouseleave 事件的回调函数。