diff --git a/common/changes/@visactor/vchart/fix-3d-label_2024-12-25-08-49.json b/common/changes/@visactor/vchart/fix-3d-label_2024-12-25-08-49.json new file mode 100644 index 0000000000..bfefe39240 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/vchart/src/mark/utils/common.ts b/packages/vchart/src/mark/utils/common.ts index 2a4c88994e..72c7f26738 100644 --- a/packages/vchart/src/mark/utils/common.ts +++ b/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); +} diff --git a/packages/vchart/src/series/bar/bar-3d-transformer.ts b/packages/vchart/src/series/bar/bar-3d-transformer.ts new file mode 100644 index 0000000000..71a348ebc9 --- /dev/null +++ b/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 { + protected _transformLabelSpec(spec: T): void { + this._addMarkLabelSpec(spec, SeriesMarkNameEnum.bar3d); + } +} diff --git a/packages/vchart/src/series/bar/bar-3d.ts b/packages/vchart/src/series/bar/bar-3d.ts index fbfb5b93cc..cfc40a3c8d 100644 --- a/packages/vchart/src/series/bar/bar-3d.ts +++ b/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 extends BarSeries> { static readonly type: string = SeriesTypeEnum.bar3d; @@ -19,6 +20,9 @@ export class Bar3dSeries 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 = () => { diff --git a/packages/vchart/src/series/base/base-series.ts b/packages/vchart/src/series/base/base-series.ts index abf2623ad9..48245b28cd 100644 --- a/packages/vchart/src/series/base/base-series.ts +++ b/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 extends BaseModel implements ISeries { readonly specKey: string = 'series'; @@ -1361,7 +1362,8 @@ export abstract class BaseSeries extends BaseModel 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 }; diff --git a/packages/vchart/src/series/pie/3d/pie-3d.ts b/packages/vchart/src/series/pie/3d/pie-3d.ts index 1a49223ae0..1dfe29d56f 100644 --- a/packages/vchart/src/series/pie/3d/pie-3d.ts +++ b/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 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); } }