Treemap

Props

• animationBeginnumberoptional

  Specifies when the animation should begin, the unit of this option is ms.

  默认值：0

• animationDurationnumberoptional

  Specifies the duration of animation, the unit of this option is ms.

  默认值：1500

• animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear"optional

  The type of easing function.

  默认值："linear"

• animationIdnumberoptional@deprecated

  Deprecated: unused prop, doesn't do anything, use `key` instead

• aspectRationumberoptional

  The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given.

  默认值：1.618033988749895

  示例：

  • Simple Treemap

• childrenReactNodeoptional

  示例：

  • Simple Treemap
  • Custom Content Treemap

• classNamestringoptional

• colorPanelArray<readonly string>optional

• content(union of 8 variants)optional

  If set to a React element, the option is the customized React element of rendering the content. If set to a function, the function will be called to render the content.

  示例：

  • Custom Content Treemap

• dataArray<readonly TreemapDataType>optional

  The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.

  Use the dataKey prop to specify which properties to use.

  If the children property is present on an element, it will be treated as a nested treemap.

  示例：

  • Simple Treemap
  • Custom Content Treemap

• dataKeyFunction | number | stringoptional

  Decides how to extract the value of this Treemap from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the value of this Treemap.

  默认值："value"

  示例：

  • Simple Treemap
  • Custom Content Treemap

• fillstringoptional

  示例：

  • Simple Treemap
  • Custom Content Treemap

• height`${number}%` | numberoptional

  The height of chart container. Can be a number or a percent string like "100%".

• idstringoptional

• isAnimationActive"auto" | false | trueoptional

  If set false, animation of treemap will be disabled. If set "auto", the animation will be disabled in SSR and enabled in browser.

  默认值："auto"

• isUpdateAnimationActive"auto" | false | trueoptional

  默认值："auto"

• nameKeyFunction | number | stringoptional

  Name represents each sector in the tooltip. This allows you to extract the name from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the name.

  默认值："name"

• nestIndexContentFunction | ReactNodeoptional

• strokestringoptional

  示例：

  • Simple Treemap
  • Custom Content Treemap

• styleReact.CSSPropertiesoptional

  示例：

  • Simple Treemap
  • Custom Content Treemap

• type"flat" | "nest"optional

  The type of treemap to render.

  • 'flat': Renders the entire treemap at once, with all leaf nodes visible.
  • 'nest': Renders an interactive, nested treemap. Clicking on a parent node will "zoom in" to show its children, and a breadcrumb navigation will be displayed to allow navigating back up the hierarchy.

  默认值："flat"

• width`${number}%` | numberoptional

  The width of chart container. Can be a number or a percent string like "100%".

• onAnimationEndFunctionoptional

  The customized event handler of animation end

• onAnimationStartFunctionoptional

  The customized event handler of animation start

• onClickFunctionoptional

• onMouseEnterFunctionoptional

• onMouseLeaveFunctionoptional