Merge pull request #3702 from VisActor/docs/poptip-of-text

Docs/poptip of text

common/changes/@visactor/vchart/docs-poptip-of-text_2025-02-05-08-17.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "docs: update options of poptip, close #3139\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}

docs/assets/option/en/component/legend-discrete.md

@@ -72,6 +72,12 @@ The maximum height of the legend as a whole, which determines whether vertically
 
 Effective only when `orient` is `'top'` | `'bottom'`, indicates the maximum number of rows for the legend item, the legend item beyond the maximum number of rows will be hidden.
 
+### lazyload(boolean)
+
+Supported since version 1.12.12
+
+Whether to enable lazy loading, the default is off. Note that it is recommended to use it in conjunction with the legend scrollbar. When lazy loading is enabled, the rendering of legend items will be delayed, and they will only be rendered when they enter the visible area. The initial and final states of the scrollbar will also differ.
+
 ### item(Object)
 
 Legend Item Configuration, which contains the configuration of graphics, text, etc. within the legend item.

docs/assets/option/en/graphic/text-font.md

@@ -0,0 +1,96 @@
+{{ target: graphic-text-font }}
+
+<!-- Canopus Graphic Attributes, ITextGraphicAttribute -->
+
+#${prefix} text(string|number|Array)
+
+Text content. If an array is passed, it will be displayed with line breaks.
+
+#${prefix} fontSize(number)
+
+Font size.
+
+#${prefix} fontFamily(string)
+
+Font family.
+
+#${prefix} fontWeight(string|number)
+
+The weight of the text font.
+
+Options:
+
+- `'normal'`
+- `'bold'`
+- `'bolder'`
+- `'lighter'`
+- `100 | 200 | 300 | 400`...
+
+#${prefix} fontStyle(string) = 'normal'
+
+The style of the text font.
+
+Options:
+
+- `'normal'`
+- `'italic'`
+- `'oblique'`
+
+#${prefix} fontVariant(string|number)
+
+Same as CSS [font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant).
+
+#${prefix} lineHeight(number)
+
+Line height.
+
+#${prefix} textAlign(string)
+
+Horizontal alignment, values: `'left'`, `'center'`, `'right'`, `'start'`, `'end'`.
+
+If it is `'left'`/`'start'`, the leftmost part of the text is at the `x` value. If it is `'right'`/`'end'`, the rightmost part of the text is at the `x` value.
+
+#${prefix} textBaseline(string)
+
+Vertical alignment, values: `'top'`, `'middle'`, `'bottom'`, `'alphabetic'`.
+
+#${prefix} maxLineWidth(number)
+
+The maximum length of the text. If `ellipsis` is not empty, it will be automatically truncated.
+
+#${prefix} ellipsis(boolean|string) = '...'
+
+Effective only when `maxLineWidth` is configured. If text exceeds, should it be automatically abbreviated? If the value is true, the default ellipsis is '...', or you can customize the ellipsis, like `ellipsis: 'etc.'`.
+
+#${prefix} suffixPosition(string) = 'end'
+
+Supported since `1.7.3` version, used to configure the position of text omission, the default is to omit the tail.
+
+- 'start' text header is omitted
+- 'middle' omitted from the middle of the text
+- 'end' omit the end of the text
+
+#${prefix} underline(boolean)
+
+Enable underline.
+
+#${prefix} lineThrough(boolean)
+
+Enable strikethrough.
+
+#${prefix} direction('horizontal'|'vertical') = 'horizontal'
+
+The layout direction of the text. If you need the text to be arranged vertically, you can configure it to 'vertical'.
+
+#${prefix} wordBreak(string) = 'break-word'
+Word break mode.
+
+Options:
+
+- "break-all": Allows breaking words at any character for non-CJK (Chinese/Japanese/Korean) text.
+- "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} 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/en/graphic/text-poptip.md

@@ -0,0 +1,94 @@
+{{ target: graphic-text-poptip }}
+
+<!-- TextPoptip -->
+
+#${prefix} poptip(object)
+Configuration for the text pop-up box.
+
+##${prefix} position(string)
+
+Position of the text pop-up box, options are:
+
+- `'auto'` Automatic
+- `'top'` Top
+- `'tl'` Top left
+- `'tr'` Top right
+- `'bottom'` Bottom
+- `'bl'` Bottom left
+- `'br'` Bottom right
+- `'left'` Left
+- `'lt'` Left top
+- `'lb'` Left bottom
+- `'right'` Right
+- `'rt'` Right top
+- `'rb'` Right bottom
+
+##${prefix} maxWidth(number)
+
+Maximum width of the text pop-up box in pixels. When the text exceeds the maximum width, it will automatically wrap.
+
+##${prefix} maxWidthPercent(number)
+
+Maximum width percentage of the text pop-up box, with the denominator being the total width of the canvas. When the text exceeds the maximum width, it will automatically wrap.
+
+##${prefix} minWidth(number)
+
+Minimum width of the text pop-up box in pixels. The default value is 30px.
+
+##${prefix} dx(number)
+Offset of the text pop-up box in the x direction, in pixels.
+
+##${prefix} dy(number)
+Offset of the text pop-up box in the y direction, in pixels.
+
+##${prefix} padding(number|number[]|Object)
+
+{{ use: common-padding(
+  componentName='poptip'
+) }}
+
+##${prefix} contentStyle(object)
+The content style of the text pop-up box, which is implemented through text elements. All properties of text elements can be configured.
+
+{{
+  use: graphic-text-font(
+    prefix = ${prefix} + '##'
+  )
+}}
+
+{{ use: graphic-fill-style(
+  prefix = ${prefix} + '##'
+) }}
+
+{{ use: graphic-stroke-style(
+  prefix = ${prefix} + '##',
+  markType = 'rect'
+) }}
+
+##${prefix} contentFormatMethod(function)
+The method for formatting the content of the pop-up box, defined as follows:
+
+```ts
+contentFormatMethod?: (t: string | string[] | number | number[]) => string | string[] | number | number[];
+```
+
+##${prefix} panel(object)
+
+Configuration for the background panel of the text pop-up box. The background panel is now implemented through rectangular elements, so it can be configured through the properties of rectangular elements.
+
+###${prefix} space(number)
+
+The spacing between the text pop-up box and the text, in pixels.
+
+###${prefix} cornerRadius(number|number[])
+
+Configuration for the corner radius of the background panel. The value of cornerRadius can be a single number or an array, specifying the corner radius size for four directions respectively.
+
+{{ use: graphic-fill-style(
+  prefix = ${prefix} + '##'
+) }}
+
+{{ use: graphic-stroke-style(
+  prefix = ${prefix} + '##',
+  markType = 'rect'
+) }}

docs/assets/option/en/graphic/text.md

@@ -2,100 +2,19 @@
 
 <!-- Canopus Graphic Attributes, ITextGraphicAttribute -->
 
-#${prefix} text(string|number|Array)
-
-Text content. If an array is passed, it will be displayed with line breaks.
-
-#${prefix} fontSize(number)
-
-Font size.
-
-#${prefix} fontFamily(string)
-
-Font family.
-
-#${prefix} fontWeight(string|number)
-
-The weight of the text font.
-
-Options:
-
-- `'normal'`
-- `'bold'`
-- `'bolder'`
-- `'lighter'`
-- `100 | 200 | 300 | 400`...
-
-#${prefix} fontStyle(string) = 'normal'
-
-The style of the text font.
-
-Options:
-
-- `'normal'`
-- `'italic'`
-- `'oblique'`
-
-#${prefix} fontVariant(string|number)
-
-Same as CSS [font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant).
-
-#${prefix} lineHeight(number)
-
-Line height.
-
-#${prefix} textAlign(string)
-
-Horizontal alignment, values: `'left'`, `'center'`, `'right'`, `'start'`, `'end'`.
-
-If it is `'left'`/`'start'`, the leftmost part of the text is at the `x` value. If it is `'right'`/`'end'`, the rightmost part of the text is at the `x` value.
-
-#${prefix} textBaseline(string)
-
-Vertical alignment, values: `'top'`, `'middle'`, `'bottom'`, `'alphabetic'`.
-
-#${prefix} maxLineWidth(number)
-
-The maximum length of the text. If `ellipsis` is not empty, it will be automatically truncated.
-
-#${prefix} ellipsis(boolean|string) = '...'
-
-Effective only when `maxLineWidth` is configured. If text exceeds, should it be automatically abbreviated? If the value is true, the default ellipsis is '...', or you can customize the ellipsis, like `ellipsis: 'etc.'`.
-
-#${prefix} suffixPosition(string) = 'end'
-
-Supported since `1.7.3` version, used to configure the position of text omission, the default is to omit the tail.
-
-- 'start' text header is omitted
-- 'middle' omitted from the middle of the text
-- 'end' omit the end of the text
-
-#${prefix} underline(boolean)
-
-Enable underline.
-
-#${prefix} lineThrough(boolean)
-
-Enable strikethrough.
-
-#${prefix} direction('horizontal'|'vertical') = 'horizontal'
-
-The layout direction of the text. If you need the text to be arranged vertically, you can configure it to 'vertical'.
-
-#${prefix} wordBreak(string) = 'break-word'
-Word break mode.
-
-Options:
-
-- "break-all": Allows breaking words at any character for non-CJK (Chinese/Japanese/Korean) text.
-- "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} 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)
+<!-- {{
+  use: graphic-text-font(
+    prefix = ${prefix}
+  )
+}}
+
+{{
+  use: graphic-text-poptip(
+    prefix = ${prefix}
+  )
+}}
 
 {{ use: graphic-attribute(
   prefix = ${prefix},
   noTexture = true
-) }}
+) }} -->

docs/assets/option/zh/component/legend-discrete.md

@@ -72,6 +72,11 @@
 
 仅当 `orient` 为 `'top'` | `'bottom'` 时生效，表示图例项的最大行数，超出最大行数的图例项会被隐藏。
 
+### lazyload(boolean)
+
+自 1.12.12 版本开始支持
+是否开启懒加载，默认不开启。注意，建议和图例滚动条配合使用，当开启懒加载时，图例项的渲染会被延迟，只有当图例项进入可视区域时才会被渲染，滚动条的初始状态和最终的也有所差异
+
 ### item(Object)
 
 图例项配置，包含图例项内部的图形、文本等配置。