From fcdcef4a61e8e27b302a8ff7634979eddfd909e8 Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 25 Nov 2024 15:27:22 +0800 Subject: [PATCH] fix: funnel outer label support react/html element, fix #3462 --- docs/assets/option/en/graphic/rich-text/rich-text.md | 8 ++++++++ docs/assets/option/en/graphic/text.md | 8 ++++++++ docs/assets/option/zh/graphic/rich-text/rich-text.md | 10 ++++++++++ docs/assets/option/zh/graphic/text.md | 10 ++++++++++ packages/vchart/src/series/funnel/funnel.ts | 1 + 5 files changed, 37 insertions(+) diff --git a/docs/assets/option/en/graphic/rich-text/rich-text.md b/docs/assets/option/en/graphic/rich-text/rich-text.md index 3eae4813f3..6fa57cbe5f 100644 --- a/docs/assets/option/en/graphic/rich-text/rich-text.md +++ b/docs/assets/option/en/graphic/rich-text/rich-text.md @@ -135,3 +135,11 @@ Fill Opacity. The configuration in all text paragraphs will be overridden by the #${prefix} strokeOpacity(number) Stroke opacity. The configuration in all text paragraphs will be overridden by the configuration in `textConfig`. + +#${prefix} forceBoundsWidth(number) + +Forcibly set the width of the bounding box corresponding to the text. By default, we automatically calculate the width based on the content and attributes of the text. When this property is set, the width of the bounding box will be forcibly set to this value. It is generally used when rendering text content with HTML or React to solve the problem of width not being automatically calculated. + +#${prefix} forceBoundsHeight(number) + +Forcibly set the height of the bounding box corresponding to the text. By default, we automatically calculate the height based on the content and attributes of the text. When this property is set, the height of the bounding box will be forcibly set to this value. It is generally used when rendering text content with HTML or React to solve the problem of height not being automatically calculated. diff --git a/docs/assets/option/en/graphic/text.md b/docs/assets/option/en/graphic/text.md index 4665beab74..a6bef56431 100644 --- a/docs/assets/option/en/graphic/text.md +++ b/docs/assets/option/en/graphic/text.md @@ -91,6 +91,14 @@ Options: - "break-word": Does not allow breaking words in CJK (Chinese/Japanese/Korean) text, only breaks at half-width spaces or hyphens. - "keep-all": Does not break words in CJK (Chinese/Japanese/Korean) text. Non-CJK text words are not broken. (Supported since version 1.12.8) +#${prefix} forceBoundsWidth(number) + +Forcibly set the width of the bounding box corresponding to the text. By default, we automatically calculate the width based on the content and attributes of the text. When this property is set, the width of the bounding box will be forcibly set to this value. It is generally used when rendering text content with HTML or React to solve the problem of width not being automatically calculated. + +#${prefix} forceBoundsHeight(number) + +Forcibly set the height of the bounding box corresponding to the text. By default, we automatically calculate the height based on the content and attributes of the text. When this property is set, the height of the bounding box will be forcibly set to this value. It is generally used when rendering text content with HTML or React to solve the problem of height not being automatically calculated. + #${prefix} keepDirIn3d(boolean) Whether to always maintain the direction facing the window in 3d mode (if set to false, it will rotate with the viewpoint, if set to true, the direction will always face the window) diff --git a/docs/assets/option/zh/graphic/rich-text/rich-text.md b/docs/assets/option/zh/graphic/rich-text/rich-text.md index 1866d8f7b3..56819c303e 100644 --- a/docs/assets/option/zh/graphic/rich-text/rich-text.md +++ b/docs/assets/option/zh/graphic/rich-text/rich-text.md @@ -143,3 +143,13 @@ #${prefix} strokeOpacity(number) 描边透明度。配置于所有文字段落的，会被 `textConfig` 中的配置覆盖。 + +#${prefx} forceBoundsWidth(number) + +强制设置文本对应的包围盒宽度，默认我们会根据文本的内容和属性，自动计算宽度，当设置了该属性之后，包围盒的宽度会被强制设置为该值。 +一般用于使用 html 或者 react 渲染文本内容的时候，解决宽度没法自动计算的情况。 + +#${prefx} forceBoundsHeight(number) + +强制设置文本对应的包围盒高度，默认我们会根据文本的内容和属性，自动计算高度，当设置了该属性之后，包围盒的高度会被强制设置为该值。 +一般用于使用 html 或者 react 渲染文本内容的时候，解决宽度没法自动计算的情况。 diff --git a/docs/assets/option/zh/graphic/text.md b/docs/assets/option/zh/graphic/text.md index 6cdd2da299..4e786affde 100644 --- a/docs/assets/option/zh/graphic/text.md +++ b/docs/assets/option/zh/graphic/text.md @@ -92,6 +92,16 @@ - "break-word": 不允许 CJK（中文/日文/韩文）文本中的单词换行，只能在半角空格或连字符处换行。 - "keep-all": CJK（中文/日文/韩文）文本不断行。非 CJK 文本单词不断行。（从 1.12.8 版本开始支持） +#${prefx} forceBoundsWidth(number) + +强制设置文本对应的包围盒宽度，默认我们会根据文本的内容和属性，自动计算宽度，当设置了该属性之后，包围盒的宽度会被强制设置为该值。 +一般用于使用 html 或者 react 渲染文本内容的时候，解决宽度没法自动计算的情况。 + +#${prefx} forceBoundsHeight(number) + +强制设置文本对应的包围盒高度，默认我们会根据文本的内容和属性，自动计算高度，当设置了该属性之后，包围盒的高度会被强制设置为该值。 +一般用于使用 html 或者 react 渲染文本内容的时候，解决宽度没法自动计算的情况。 + #${prefix} keepDirIn3d(boolean) 是否在 3d 模式中始终保持方向朝向窗口（配置为 false 则会随着视角旋转而旋转，配置为 true，那么方向始终朝向窗口） diff --git a/packages/vchart/src/series/funnel/funnel.ts b/packages/vchart/src/series/funnel/funnel.ts index 6b9d34d9d1..8438a939f2 100644 --- a/packages/vchart/src/series/funnel/funnel.ts +++ b/packages/vchart/src/series/funnel/funnel.ts @@ -308,6 +308,7 @@ export class FunnelSeries this.setMarkStyle( outerLabelMark, { + _originText: (datum: Datum) => `${datum[this.getCategoryField()]}`, text: (datum: Datum) => { return this._spec.outerLabel.formatMethod(`${datum[this.getCategoryField()]}`, datum) as any; }