[WIP] fix: funnel outer label support react/html element, fix #3462

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.

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)

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 渲染文本内容的时候，解决宽度没法自动计算的情况。

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，那么方向始终朝向窗口）

packages/vchart/src/series/funnel/funnel.ts

@@ -308,6 +308,8 @@ export class FunnelSeries<T extends IFunnelSeriesSpec = IFunnelSeriesSpec>
         this.setMarkStyle(
           outerLabelMark,
           {
+            // 当使用html、react进行展示的时候，如果不设置_originText，bounds计算会有问题
+            _originText: (datum: Datum) => `${datum[this.getCategoryField()]}`,
             text: (datum: Datum) => {
               return this._spec.outerLabel.formatMethod(`${datum[this.getCategoryField()]}`, datum) as any;
             }
@@ -810,10 +812,20 @@ export class FunnelSeries<T extends IFunnelSeriesSpec = IFunnelSeriesSpec>
 
   private _computeOuterLabelLinePosition(datum: Datum) {
     const categoryField = this.getCategoryField();
-    const outerLabelMarkBounds = this._funnelOuterLabelMark?.label
+    const outerLabelText = this._funnelOuterLabelMark?.label
       ?.getProduct()
       ?.elements?.find((el: any) => el.data[0]?.[categoryField] === datum[categoryField])
-      ?.getBounds();
+      ?.getGraphicItem();
+    const outerLabelMarkBounds = outerLabelText
+      ? outerLabelText.AABBBounds.empty()
+        ? {
+            x1: outerLabelText.attribute.x,
+            x2: outerLabelText.attribute.x,
+            y1: outerLabelText.attribute.y,
+            y2: outerLabelText.attribute.y
+          }
+        : outerLabelText.AABBBounds
+      : { x1: 0, x2: 0, y1: 0, y2: 0 };
 
     const labelMarkBounds = this._labelMark
       ?.getComponent()