fix: update type of visual and update docs

docs/assets/option/en/graphic/fill-style.md

@@ -39,9 +39,9 @@ The offset distance of the shadow in the horizontal direction.
 
 The offset distance of the shadow in the vertical direction.
 
-#${prefix} background(string|HtmlImageElement)
+#${prefix} background(string|HtmlImageElement|HtmlCanvasElement)
 
-Supported since `1.2.0` version, background configuration, which can be configured as a color string or image URL
+Supported since `1.2.0` version, background configuration for graphics, which can be configured as a pure color, image element, or canvas element.
 
 > Note that when configured as an image address, the transparency is affected by `fillOpacity`, please be sure to configure `fillOpacity`
 
@@ -77,3 +77,47 @@ const spec = {
 }
 
 ```
+
+#${prefix} backgroundMode(string)
+
+Background fill mode, related to specific graphic elements. Optional values:
+
+- `'repeat'`: Tile the background
+- `'repeat-x'`: Tile horizontally
+- `'repeat-y'`: Tile vertically
+- `'no-repeat'`: No tiling
+
+#${prefix} backgroundFit(boolean)
+
+Whether to fit the background exactly, only effective in `repeat-x`, `repeat-y`, or `no-repeat` mode.
+
+#${prefix} backgroundKeepAspectRatio(boolean)
+
+Whether to maintain the aspect ratio of the background image.
+
+#${prefix} backgroundScale(number)
+
+Background image scale, only effective in `no-repeat` mode.
+
+#${prefix} backgroundOffsetX(number)
+
+Background image horizontal offset, only effective in `no-repeat` mode.
+
+#${prefix} backgroundOffsetY(number)
+
+Background image vertical offset, only effective in `no-repeat` mode.
+
+#${prefix} backgroundClip(boolean)
+
+Whether the background image is clipped, whether to call clip to avoid drawing outside the graphic element.
+
+#${prefix} backgroundCornerRadius(number|Array<number>)
+
+Background corner radius. Can be configured as:
+
+- Number: Uniformly set the corner radius for all four corners
+- Array: Set corner radius for [top-left, top-right, bottom-right, bottom-left] individually
+
+#${prefix} backgroundOpacity(number)
+
+Background opacity, value range 0-1.

docs/assets/option/zh/graphic/fill-style.md

@@ -39,8 +39,9 @@
 
 阴影垂直方向上的偏移距离。
 
-#${prefix} background(string|HtmlImageElement)
-自`1.2.0`版本开始支持，背景配置， 可以配置为颜色字符串或者图片地址
+#${prefix} background(string|HtmlImageElement|HtmlCanvasElement)
+
+自`1.2.0`版本开始支持，图形的背景配置，可以配置为纯色、图片元素或canvas元素。
 
 > 注意配置为图片地址时，透明度受 `fillOpacity` 影响，请务必配置 `fillOpacity`
 
@@ -76,3 +77,47 @@ const spec = {
 }
 
 ```
+
+#${prefix} backgroundMode(string)
+
+背景填充模式，与具体图元有关。可选值：
+
+- `'repeat'`: 平铺背景
+- `'repeat-x'`: 水平方向平铺
+- `'repeat-y'`: 垂直方向平铺
+- `'no-repeat'`: 不平铺
+
+#${prefix} backgroundFit(boolean)
+
+是否正好填充背景，只在 `repeat-x`、`repeat-y` 或 `no-repeat` 模式下生效。
+
+#${prefix} backgroundKeepAspectRatio(boolean)
+
+是否保持背景图的宽高比。
+
+#${prefix} backgroundScale(number)
+
+背景图缩放比例，只在 `no-repeat` 模式下生效。
+
+#${prefix} backgroundOffsetX(number)
+
+背景图水平方向偏移，只在 `no-repeat` 模式下生效。
+
+#${prefix} backgroundOffsetY(number)
+
+背景图垂直方向偏移，只在 `no-repeat` 模式下生效。
+
+#${prefix} backgroundClip(boolean)
+
+背景图是否裁切，是否调用 clip 避免绘制到图元外部。
+
+#${prefix} backgroundCornerRadius(number|Array<number>)
+
+背景圆角半径。可以配置为：
+
+- 数值：统一设置四个角的圆角
+- 数组：分别设置 [左上, 右上, 右下, 左下] 四个角的圆角
+
+#${prefix} backgroundOpacity(number)
+
+背景透明度，取值范围 0-1。

packages/vchart/src/typings/visual.ts

@@ -299,6 +299,22 @@ export interface IFillMarkSpec extends ICommonSpec {
    * IColorKey 类型只适用于主题
    */
   fill?: VisualType<string> | IGradient | false | IColorKey;
+  /**
+   * 图形模糊效果程度
+   */
+  shadowBlur: number;
+  /**
+   * 图形的阴影颜色
+   */
+  shadowColor: string;
+  /**
+   * 阴影水平偏移距离
+   */
+  shadowOffsetX: number;
+  /**
+   * 阴影垂直偏移距离
+   */
+  shadowOffsetY: number;
   /**
    * 填充的透明度
    */
@@ -308,6 +324,42 @@ export interface IFillMarkSpec extends ICommonSpec {
    * 图形的背景色，支持纯色、image元素、canvas元素
    */
   background?: IColor | HTMLImageElement | HTMLCanvasElement | null;
+  /**
+   * 背景填充模式（与具体图元有关）
+   */
+  backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
+  /**
+   * 是否正好填充，只在repeat-x或者repeat-y以及no-repeat的时候生效
+   */
+  backgroundFit: boolean;
+  /**
+   * 是否保持背景图的宽高比
+   */
+  backgroundKeepAspectRatio: boolean;
+  /**
+   * 背景图缩放，只在no-repeat的时候生效
+   */
+  backgroundScale: number;
+  /**
+   * 背景图偏移，只在no-repeat的时候生效
+   */
+  backgroundOffsetX: number;
+  /**
+   * 背景图偏移，只在no-repeat的时候生效
+   */
+  backgroundOffsetY: number;
+  /**
+   * 背景图是否裁切，是否调用clip避免绘制到图元外部
+   */
+  backgroundClip: boolean;
+  /**
+   * 背景圆角半径
+   */
+  backgroundCornerRadius: number | number[];
+  /**
+   * 背景透明度
+   */
+  backgroundOpacity: number;
 }
 
 export type IMarkHtmlSpec = Partial<IGraphicStyle['html']>;

skills/vchart-development-assistant/references/type-details/IArcLabelSpec-Type-Definition.md

@@ -298,9 +298,27 @@ interface ILineLikeMarkSpec extends IFillMarkSpec {
 }
 
 interface IFillMarkSpec extends ICommonSpec {
+  // Shadow effects
+  shadowBlur?: number; // Shadow blur radius
+  shadowColor?: string; // Shadow color
+  shadowOffsetX?: number; // Shadow X offset
+  shadowOffsetY?: number; // Shadow Y offset
+
+  // Fill properties
   fill?: VisualType<string> | IGradient | false | IColorKey; // Fill color
   fillOpacity?: number; // Fill opacity
-  background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background
+
+  // Background properties
+  background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill
+  backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat'
+  backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover'
+  backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false
+  backgroundScale?: number; // Background scale factor @default 1
+  backgroundOffsetX?: number; // Background X offset @default 0
+  backgroundOffsetY?: number; // Background Y offset @default 0
+  backgroundClip?: boolean; // Enable background clipping @default true
+  backgroundCornerRadius?: number; // Background corner radius @default 0
+  backgroundOpacity?: number; // Background opacity @default 1
 }
 ```
 

skills/vchart-development-assistant/references/type-details/IArcMarkSpec-Type-Definition.md

@@ -61,9 +61,27 @@ interface IArcMarkSpec {
 
 ```typescript
 interface IFillMarkSpec extends ICommonSpec {
-  fill?: VisualType<string> | IGradient | false | IColorKey;
-  fillOpacity?: number;
-  background?: IColor | HTMLImageElement | HTMLCanvasElement | null;
+  // Shadow effects
+  shadowBlur?: number; // Shadow blur radius
+  shadowColor?: string; // Shadow color
+  shadowOffsetX?: number; // Shadow X offset
+  shadowOffsetY?: number; // Shadow Y offset
+
+  // Fill properties
+  fill?: VisualType<string> | IGradient | false | IColorKey; // Fill color
+  fillOpacity?: number; // Fill opacity
+
+  // Background properties
+  background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill
+  backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat'
+  backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover'
+  backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false
+  backgroundScale?: number; // Background scale factor @default 1
+  backgroundOffsetX?: number; // Background X offset @default 0
+  backgroundOffsetY?: number; // Background Y offset @default 0
+  backgroundClip?: boolean; // Enable background clipping @default true
+  backgroundCornerRadius?: number; // Background corner radius @default 0
+  backgroundOpacity?: number; // Background opacity @default 1
 }
 ```
 

skills/vchart-development-assistant/references/type-details/IBackgroundSpec-Type-Definition.md

@@ -76,12 +76,27 @@ export interface IGroupMarkSpec extends IFillMarkSpec {
 ### IFillMarkSpec 填充样式
 ```typescript
 export interface IFillMarkSpec extends ICommonSpec {
-  /**
-   * 图形的填充颜色
-   */
-  fill?: VisualType<string> | IGradient | false | IColorKey;
-  /** 填充的透明度 */
-  fillOpacity?: number;
+  // 阴影效果
+  shadowBlur?: number; // 阴影模糊半径
+  shadowColor?: string; // 阴影颜色
+  shadowOffsetX?: number; // 阴影 X 偏移
+  shadowOffsetY?: number; // 阴影 Y 偏移
+
+  // 填充属性
+  fill?: VisualType<string> | IGradient | false | IColorKey; // 图形的填充颜色
+  fillOpacity?: number; // 填充的透明度
+
+  // 背景属性
+  background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // 背景填充
+  backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // 背景重复模式 @default 'repeat'
+  backgroundFit?: 'contain' | 'cover' | 'fill'; // 背景适应模式 @default 'cover'
+  backgroundKeepAspectRatio?: boolean; // 保持背景宽高比 @default false
+  backgroundScale?: number; // 背景缩放因子 @default 1
+  backgroundOffsetX?: number; // 背景 X 偏移 @default 0
+  backgroundOffsetY?: number; // 背景 Y 偏移 @default 0
+  backgroundClip?: boolean; // 启用背景裁剪 @default true
+  backgroundCornerRadius?: number; // 背景圆角半径 @default 0
+  backgroundOpacity?: number; // 背景透明度 @default 1
   /**
    * 图形的背景色，支持纯色、image元素、canvas元素
    */

skills/vchart-development-assistant/references/type-details/IFunnelLabelSpec-Type-Definition.md

@@ -373,9 +373,27 @@ type IRichTextMarkSpec = IRichTextAttribute &
 
 ```typescript
 interface IFillMarkSpec extends ICommonSpec {
-  fill?: VisualType<string> | IGradient | false | IColorKey;
-  fillOpacity?: number;
-  background?: IColor | HTMLImageElement | HTMLCanvasElement | null;
+  // Shadow effects
+  shadowBlur?: number; // Shadow blur radius
+  shadowColor?: string; // Shadow color
+  shadowOffsetX?: number; // Shadow X offset
+  shadowOffsetY?: number; // Shadow Y offset
+
+  // Fill properties
+  fill?: VisualType<string> | IGradient | false | IColorKey; // Fill color
+  fillOpacity?: number; // Fill opacity
+
+  // Background properties
+  background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill
+  backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat'
+  backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover'
+  backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false
+  backgroundScale?: number; // Background scale factor @default 1
+  backgroundOffsetX?: number; // Background X offset @default 0
+  backgroundOffsetY?: number; // Background Y offset @default 0
+  backgroundClip?: boolean; // Enable background clipping @default true
+  backgroundCornerRadius?: number; // Background corner radius @default 0
+  backgroundOpacity?: number; // Background opacity @default 1
 }
 
 interface ICommonSpec {

skills/vchart-development-assistant/references/type-details/ISankeyLabelSpec-Type-Definition.md

@@ -168,9 +168,27 @@ type LabelStateStyle<T> = {
 
 ```typescript
 interface IFillMarkSpec extends ICommonSpec {
-  fill?: VisualType<string> | IGradient | false | IColorKey;
-  fillOpacity?: number;
-  background?: IColor | HTMLImageElement | HTMLCanvasElement | null;
+  // Shadow effects
+  shadowBlur?: number; // Shadow blur radius
+  shadowColor?: string; // Shadow color
+  shadowOffsetX?: number; // Shadow X offset
+  shadowOffsetY?: number; // Shadow Y offset
+
+  // Fill properties
+  fill?: VisualType<string> | IGradient | false | IColorKey; // Fill color
+  fillOpacity?: number; // Fill opacity
+
+  // Background properties
+  background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill
+  backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat'
+  backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover'
+  backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false
+  backgroundScale?: number; // Background scale factor @default 1
+  backgroundOffsetX?: number; // Background X offset @default 0
+  backgroundOffsetY?: number; // Background Y offset @default 0
+  backgroundClip?: boolean; // Enable background clipping @default true
+  backgroundCornerRadius?: number; // Background corner radius @default 0
+  backgroundOpacity?: number; // Background opacity @default 1
 }
 
 interface ICommonSpec {

skills/vchart-development-assistant/references/type-details/ITextMarkSpec-Type-Definition.md

@@ -36,9 +36,25 @@ interface ITextMarkSpec extends IFillMarkSpec {
   poptip?: PopTipAttributes; // PopTip configuration
 
   // Inherited from IFillMarkSpec
-  fill?: VisualType<string> | IGradient | false | IColorKey;
-  fillOpacity?: number;
-  background?: IColor | HTMLImageElement | HTMLCanvasElement | null;
+  // Shadow effects
+  shadowBlur?: number; // Shadow blur radius
+  shadowColor?: string; // Shadow color
+  shadowOffsetX?: number; // Shadow X offset
+  shadowOffsetY?: number; // Shadow Y offset
+  // Fill properties
+  fill?: VisualType<string> | IGradient | false | IColorKey; // Fill color
+  fillOpacity?: number; // Fill opacity
+  // Background properties
+  background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill
+  backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat'
+  backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover'
+  backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false
+  backgroundScale?: number; // Background scale factor @default 1
+  backgroundOffsetX?: number; // Background X offset @default 0
+  backgroundOffsetY?: number; // Background Y offset @default 0
+  backgroundClip?: boolean; // Enable background clipping @default true
+  backgroundCornerRadius?: number; // Background corner radius @default 0
+  backgroundOpacity?: number; // Background opacity @default 1
 
   // Inherited from ICommonSpec
   visible?: boolean; // Visibility
@@ -206,14 +222,16 @@ type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 4
 ```
 
 **TextAlignType 文字水平对齐：**
+
 - `'left'`: 左对齐
-- `'center'`: 居中对齐  
+- `'center'`: 居中对齐
 - `'right'`: 右对齐
 - `'start'`: 起始对齐（在LTR中等同于左对齐，在RTL中等同于右对齐）
 - `'end'`: 结束对齐（在LTR中等同于右对齐，在RTL中等同于左对齐）
 - `'justify'`: 两端对齐
 
 **TextBaselineType 文字垂直对齐：**
+
 - `'top'`: 顶部对齐
 - `'bottom'`: 底部对齐
 - `'middle'`: 中心对齐