VisActor · xuefei1313 · Jul 24, 2023 · Jul 24, 2023
diff --git a/common/changes/@visactor/vchart/feat-feature-support-image_2023-07-24-06-39.json b/common/changes/@visactor/vchart/feat-feature-support-image_2023-07-24-06-39.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat(image): support image-mark & add background attribute to fill-mark",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
diff --git a/packages/vchart/src/core/index.ts b/packages/vchart/src/core/index.ts
@@ -9,9 +9,10 @@ import { Region } from '../region/region';
 import { Layout } from '../layout/base-layout';
 import { GroupMark } from '../mark/group';
 import { ComponentMark } from '../mark/component';
+import { ImageMark } from './../mark/image';
 
 // register groupMark and componentMark
-VChart.useMark([ComponentMark, GroupMark]);
+VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 
 // install region module
 Factory.registerRegion('region', Region as any);

diff --git a/packages/vchart/src/mark/image.ts b/packages/vchart/src/mark/image.ts
@@ -0,0 +1,22 @@
+import type { IImageMarkSpec } from './../typings/visual';
+import { BaseMark } from './base/base-mark';
+import type { IMarkRaw, IMarkStyle } from './interface';
+// eslint-disable-next-line no-duplicate-imports
+import { MarkTypeEnum } from './interface';
+
+export type IImageMark = IMarkRaw<IImageMarkSpec>;
+
+export class ImageMark extends BaseMark<IImageMarkSpec> implements IImageMark {
+  static readonly type = MarkTypeEnum.image;
+  readonly type = ImageMark.type;
+
+  protected _getDefaultStyle() {
+    const defaultStyle: IMarkStyle<IImageMarkSpec> = {
+      ...super._getDefaultStyle(),
+      width: undefined,
+      height: undefined,
+      lineWidth: 0
+    };
+    return defaultStyle;
+  }
+}
diff --git a/packages/vchart/src/mark/interface/type.ts b/packages/vchart/src/mark/interface/type.ts
@@ -9,6 +9,7 @@ export enum MarkTypeEnum {
   text = 'text',
   rect = 'rect',
   rect3d = 'rect3d',
+  image = 'image',
   path = 'path',
   area = 'area',
   arc = 'arc',

diff --git a/packages/vchart/src/series/waterfall/waterfall.ts b/packages/vchart/src/series/waterfall/waterfall.ts
@@ -90,7 +90,7 @@ export class WaterfallSeries extends BarSeries<any> {
           type: 'waterfallFillTotal',
           options: {
             indexField: this.getGroupFields()[0],
-            valueField: this.getStackValueField()[0],
+            valueField: this.getStackValueField(),
             seriesField: this.getSeriesField(),
             seriesFieldName: this._theme.seriesFieldName,
             total: this._spec.total
@@ -110,7 +110,7 @@ export class WaterfallSeries extends BarSeries<any> {
         type: 'waterfall',
         options: {
           indexField: this.getGroupFields()[0],
-          valueField: this.getStackValueField()[0],
+          valueField: this.getStackValueField(),
           seriesField: this.getSeriesField(),
           seriesFieldName: this._theme.seriesFieldName,
           startAs: STACK_FIELD_START,

diff --git a/packages/vchart/src/typings/spec/common.ts b/packages/vchart/src/typings/spec/common.ts
@@ -1,3 +1,4 @@
+import type { IImageMarkSpec } from './../visual';
 import type { ILayoutPaddingSpec } from '../../model/interface';
 import type { LayoutCallBack } from '../../layout/interface';
 import type { IElement, srIOption3DType } from '@visactor/vgrammar';
@@ -514,6 +515,7 @@ export type IBuildinMarkSpec = {
   [MarkTypeEnum.text]: ITextMarkSpec;
   [MarkTypeEnum.rect]: IRectMarkSpec;
   [MarkTypeEnum.rect3d]: IRect3dMarkSpec;
+  [MarkTypeEnum.image]: IImageMarkSpec;
   [MarkTypeEnum.path]: IPathMarkSpec;
   [MarkTypeEnum.area]: IAreaMarkSpec;
   [MarkTypeEnum.arc]: IArcMarkSpec;

diff --git a/packages/vchart/src/typings/visual.ts b/packages/vchart/src/typings/visual.ts
@@ -8,6 +8,7 @@ import type { IAttributeOpt, IModelMarkAttributeContext } from '../compile/mark'
 import type { Datum, StringOrNumber } from './common';
 import type { IPadding } from '@visactor/vutils';
 import type { IColorKey } from '../theme/color-scheme/interface';
+import type { IRepeatType } from '@visactor/vrender';
 
 // 基础的visual 对应 scale 的属性
 export interface IVisualSpecBase<D, T> {
@@ -169,6 +170,10 @@ export interface ICommonSpec {
 export interface IFillMarkSpec extends ICommonSpec {
   fill?: VisualType<string> | IGradient | false | IColorKey;
   fillOpacity?: number;
+  // TODO：waite VRender support this api
+  // backgroundMode: number; // 填充模式（与具体图元有关）
+  // can coexist with fill
+  background?: string | HTMLImageElement | HTMLCanvasElement | null;
 }
 
 // export interface IFillImageMarkSpec {
@@ -501,6 +506,20 @@ export interface IUnknownMarkSpec extends ICommonSpec {
   [key: string]: unknown;
 }
 
+export interface IImageMarkSpec extends IFillMarkSpec {
+  /**
+   * 圆角配置。
+   * 1. 如果传入数值，则统一为四个角设置圆角
+   * 2. 如果传入数组，则分别为 [上左, 上右, 下右, 下左]
+   */
+  cornerRadius?: number | number[];
+  width?: number;
+  height?: number;
+  repeatX?: IRepeatType;
+  repeatY?: IRepeatType;
+  image: string | HTMLImageElement | HTMLCanvasElement;
+}
+
 /**
  * text
  */