Fix: 3d label

common/changes/@visactor/vchart/fix-3d-label_2024-12-25-08-49.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: fix the issue of incorrect label display in 3D charts, #3584",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart/src/mark/utils/common.ts

@@ -13,3 +13,7 @@ export function curveTypeTransform(type: string, direction: string) {
   }
   return type;
 }
+
+export function is3DMark(type: MarkTypeEnum) {
+  return [MarkTypeEnum.arc3d, MarkTypeEnum.rect3d, MarkTypeEnum.pyramid3d].includes(type);
+}

packages/vchart/src/series/bar/bar-3d-transformer.ts

@@ -0,0 +1,13 @@
+import type { IBar3dSeriesSpec, IBar3dSeriesTheme } from './interface';
+import { SeriesMarkNameEnum } from '../interface';
+import { BarSeriesSpecTransformer } from './bar-transformer';
+
+export class Bar3dSeriesSpecTransformer<
+  T extends IBar3dSeriesSpec = IBar3dSeriesSpec,
+  K extends IBar3dSeriesTheme = IBar3dSeriesTheme
+  // @ts-ignore
+> extends BarSeriesSpecTransformer<T, K> {
+  protected _transformLabelSpec(spec: T): void {
+    this._addMarkLabelSpec(spec, SeriesMarkNameEnum.bar3d);
+  }
+}

packages/vchart/src/series/bar/bar-3d.ts

@@ -10,6 +10,7 @@ import { bar3dSeriesMark } from './constant';
 import { Factory } from '../../core/factory';
 import { registerBar3dAnimation } from './animation';
 import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian';
+import { Bar3dSeriesSpecTransformer } from './bar-3d-transformer';
 
 export class Bar3dSeries<T extends IBar3dSeriesSpec = IBar3dSeriesSpec> extends BarSeries<AdaptiveSpec<T, 'type'>> {
   static readonly type: string = SeriesTypeEnum.bar3d;
@@ -19,6 +20,9 @@ export class Bar3dSeries<T extends IBar3dSeriesSpec = IBar3dSeriesSpec> extends
 
   protected _barMarkName: SeriesMarkNameEnum = SeriesMarkNameEnum.bar3d;
   protected _barMarkType: MarkTypeEnum = MarkTypeEnum.rect3d;
+
+  static readonly transformerConstructor = Bar3dSeriesSpecTransformer as any;
+  readonly transformerConstructor = Bar3dSeriesSpecTransformer as any;
 }
 
 export const registerBar3dSeries = () => {

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

@@ -93,6 +93,7 @@ import { getDefaultInteractionConfigByMode } from '../../interaction/config';
 import { LayoutZIndex } from '../../constant/layout';
 import type { ILabelSpec } from '../../component/label/interface';
 import type { StatisticOperations } from '../../data/transforms/interface';
+import { is3DMark } from '../../mark/utils';
 
 export abstract class BaseSeries<T extends ISeriesSpec> extends BaseModel<T> implements ISeries {
   readonly specKey: string = 'series';
@@ -1361,7 +1362,8 @@ export abstract class BaseSeries<T extends ISeriesSpec> extends BaseModel<T> imp
       const markConfig: IMarkConfig = {
         ...config,
         morph: config.morph ?? false,
-        support3d: config.support3d ?? (spec.support3d || !!(spec as any).zField),
+        support3d:
+          is3DMark(markInfo.type as MarkTypeEnum) || (config.support3d ?? (spec.support3d || !!(spec as any).zField)),
         morphKey: spec.morph?.morphKey || `${this.getSpecIndex()}_${this.getMarks().length}`,
         morphElementKey: spec.morph?.morphElementKey ?? config.morphElementKey
       };

packages/vchart/src/series/pie/3d/pie-3d.ts

@@ -1,6 +1,4 @@
 import { AttributeLevel } from '../../../constant/attribute';
-import { ARC_MIDDLE_ANGLE } from '../../../constant/polar';
-import type { Datum } from '../../../typings';
 import { MarkTypeEnum } from '../../../mark/interface/type';
 import type { IArcSeries, SeriesMarkMap } from '../../interface';
 import { SeriesMarkNameEnum, SeriesTypeEnum } from '../../interface/type';
@@ -9,7 +7,6 @@ import type { IPie3dSeriesSpec } from '../interface';
 import { registerArc3dMark } from '../../../mark/arc-3d';
 import { BasePieSeries } from '../pie';
 import { pie3dSeriesMark } from '../constant';
-import { radianToDegree } from '@visactor/vutils';
 import { Factory } from '../../../core/factory';
 import { registerPie3dAnimation } from '../animation/animation';
 import { Pie3dSeriesSpecTransformer } from './pie-3d-transformer';
@@ -52,28 +49,7 @@ export class Pie3dSeries<T extends IPie3dSeriesSpec = IPie3dSeriesSpec> extends
       return;
     }
     super.initLabelMarkStyle(textMark);
-
-    const params3d: {
-      beta?: number;
-      anchor3d?: (datum: Datum) => any;
-      angle?: (datum: Datum) => any;
-    } = {};
-    textMark.setMarkConfig({ support3d: true });
-    params3d.beta = this._angle3d;
-    params3d.anchor3d = (datum: Datum) => {
-      const { x, y } = this.getCenter();
-      const anchor = [
-        // TODO: label 布局依赖自身图元属性，这里无法获取到
-        x,
-        y
-      ];
-      return anchor;
-    };
-    params3d.angle = (datum: Datum) => {
-      const angle = datum[ARC_MIDDLE_ANGLE];
-      return spec.position === 'inside' ? radianToDegree(angle) : 0;
-    };
-    this.setMarkStyle(textMark, { ...params3d, z: 100 }, undefined, AttributeLevel.Mark);
+    this.setMarkStyle(textMark, { support3d: true }, undefined, AttributeLevel.Mark);
   }
 }