fix: no need to encode mark to group state in funnel

common/changes/@visactor/vchart/fix-funnel-noSeparateStyle_2024-04-28-11-13.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: duplicated categoryField data in funnel will result to unexpected rendering result",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart/src/series/base/base-series.ts

@@ -1252,14 +1252,16 @@ export abstract class BaseSeries<T extends ISeriesSpec> extends BaseModel<T> imp
       morph = false,
       clip,
       customShape,
-      stateSort
+      stateSort,
+      noSeparateStyle = false
     } = option;
     const m = super._createMark<M>(markInfo, {
       key: key ?? this._getDataIdKey(),
       support3d,
       seriesId: this.id,
       attributeContext: this._markAttributeContext,
-      componentType: option.componentType
+      componentType: option.componentType,
+      noSeparateStyle
     });
     if (isValid(m)) {
       this._marks.addMark(m, { name: markInfo.name });

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

@@ -185,7 +185,8 @@ export class FunnelSeries<T extends IFunnelSeriesSpec = IFunnelSeriesSpec>
         groupKey: this._seriesField,
         isSeriesMark: true,
         customShape: this._spec.funnel?.customShape,
-        stateSort: this._spec.funnel?.stateSort
+        stateSort: this._spec.funnel?.stateSort,
+        noSeparateStyle: true
       }
     ) as IPolygonMark;
 
@@ -202,7 +203,8 @@ export class FunnelSeries<T extends IFunnelSeriesSpec = IFunnelSeriesSpec>
           dataView: this._viewDataTransform.getDataView(),
           dataProductId: this._viewDataTransform.getProductId(),
           customShape: this._spec.transform?.customShape,
-          stateSort: this._spec.transform?.stateSort
+          stateSort: this._spec.transform?.stateSort,
+          noSeparateStyle: true
         }
       );
     }
@@ -214,13 +216,15 @@ export class FunnelSeries<T extends IFunnelSeriesSpec = IFunnelSeriesSpec>
       this._funnelOuterLabelMark.label = this._createMark(FunnelSeries.mark.outerLabel, {
         themeSpec: this._theme?.outerLabel,
         markSpec: this._spec.outerLabel,
-        skipBeforeLayouted: true
+        skipBeforeLayouted: true,
+        noSeparateStyle: true
       }) as ITextMark;
 
       this._funnelOuterLabelMark.line = this._createMark(FunnelSeries.mark.outerLabelLine, {
         themeSpec: lineTheme,
         markSpec: line,
-        depend: [this._funnelOuterLabelMark.label]
+        depend: [this._funnelOuterLabelMark.label],
+        noSeparateStyle: true
       }) as IRuleMark;
     }
   }

packages/vchart/src/series/interface/common.ts

@@ -11,7 +11,7 @@ import type {
 import type { IRegion } from '../../region/interface';
 import type { RenderMode } from '../../typings/spec/common';
 import type { ISeries } from './series';
-import type { IMarkProgressiveConfig } from '../../mark/interface';
+import type { IMarkOption, IMarkProgressiveConfig } from '../../mark/interface';
 import type { ISeriesSpec, StringOrNumber } from '../../typings';
 import type { TransformedLabelSpec } from '../../component/label';
 import type { SeriesMarkNameEnum, SeriesTypeEnum } from './type';
@@ -69,7 +69,7 @@ export type ISeriesStyleItem = {
   };
 };
 
-export interface ISeriesMarkInitOption {
+export interface ISeriesMarkInitOption extends Partial<IMarkOption> {
   /** theme spec */
   themeSpec?: any;