fix: gauge pointer default position

Author: zamhown

docs/assets/examples/en/gauge-chart/gauge-track.md

@@ -92,6 +92,7 @@ const spec = {
         visible: true,
         width: 0.04,
         height: 0.04,
+        inOnCenter: false,
         style: {
           fill: {
             type: 'threshold',
@@ -107,6 +108,7 @@ const spec = {
       pointer: {
         width: 0.2,
         height: 0.1,
+        inOnCenter: false,
         style: {
           fill: {
             type: 'threshold',

docs/assets/examples/zh/gauge-chart/gauge-track.md

@@ -92,6 +92,7 @@ const spec = {
         visible: true,
         width: 0.04,
         height: 0.04,
+        inOnCenter: false,
         style: {
           fill: {
             type: 'threshold',
@@ -107,6 +108,7 @@ const spec = {
       pointer: {
         width: 0.2,
         height: 0.1,
+        inOnCenter: false,
         style: {
           fill: {
             type: 'threshold',

packages/vchart/src/series/gauge/gauge-pointer.ts

@@ -4,7 +4,7 @@ import { MarkTypeEnum } from '../../mark/interface/type';
 import { isValid } from '@visactor/vutils';
 import type { SeriesMarkMap } from '../interface';
 import { SeriesMarkNameEnum, SeriesTypeEnum } from '../interface/type';
-import type { IGaugePointerSeriesSpec, IGaugePointerSeriesTheme } from './interface';
+import type { IGaugePointerSeriesSpec, IGaugePointerSeriesTheme, PinMarkSpec, PointerMarkSpec } from './interface';
 import type { Datum, Maybe } from '../../typings';
 import type { IPathMark } from '../../mark/path';
 import { animationConfig, userAnimationConfig } from '../../animation/utils';
@@ -71,17 +71,17 @@ export class GaugePointerSeries<
     if (pointerMark) {
       this.setMarkStyle(pointerMark, {
         x: (datum: Datum) => {
-          const { x } = this._getPointerAnchor(datum);
+          const { x } = this._getPointerAnchor(datum, pointerSpec);
           const dx = this._getPointerWidth() * (pointerSpec?.center?.[0] ?? 0);
           return x - dx;
         },
         y: (datum: Datum) => {
-          const { y } = this._getPointerAnchor(datum);
+          const { y } = this._getPointerAnchor(datum, pointerSpec);
           const dy = this._getPointerHeight(datum) * (pointerSpec?.center?.[1] ?? 0);
           return y - dy;
         },
         anchor: (datum: Datum) => {
-          const { x, y } = this._getPointerAnchor(datum);
+          const { x, y } = this._getPointerAnchor(datum, pointerSpec);
           return [x, y];
         },
         fill: this.getColorAttribute(),
@@ -110,7 +110,10 @@ export class GaugePointerSeries<
     this._pointerMark && this._tooltipHelper.activeTriggerSet.mark.add(this._pointerMark);
   }
 
-  protected _getPointerAnchor(datum: Datum) {
+  protected _getPointerAnchor(datum: Datum, markSpec: PinMarkSpec | PointerMarkSpec) {
+    if (markSpec.isOnCenter ?? true) {
+      return this.angleAxisHelper.center();
+    }
     return this.radiusAxisHelper.coordToPoint({
       radius: this._innerRadius * this._computeLayoutRadius(),
       angle: this.angleAxisHelper.dataToPosition([datum[this._angleField[0]]])
@@ -158,8 +161,8 @@ export class GaugePointerSeries<
     const pinBackgroundSpec = this._spec.pinBackground;
     if (pinBackgroundMark) {
       this.setMarkStyle(pinBackgroundMark, {
-        x: (datum: Datum) => this._getPointerAnchor(datum).x,
-        y: (datum: Datum) => this._getPointerAnchor(datum).y,
+        x: (datum: Datum) => this._getPointerAnchor(datum, pinBackgroundSpec).x,
+        y: (datum: Datum) => this._getPointerAnchor(datum, pinBackgroundSpec).y,
         scaleX: () => pinBackgroundSpec.width * this._computeLayoutRadius(),
         scaleY: () => pinBackgroundSpec.height * this._computeLayoutRadius(),
         fill: this.getColorAttribute(),
@@ -173,8 +176,8 @@ export class GaugePointerSeries<
     const pinSpec = this._spec.pin;
     if (pinMark) {
       this.setMarkStyle(pinMark, {
-        x: (datum: Datum) => this._getPointerAnchor(datum).x,
-        y: (datum: Datum) => this._getPointerAnchor(datum).y,
+        x: (datum: Datum) => this._getPointerAnchor(datum, pinSpec).x,
+        y: (datum: Datum) => this._getPointerAnchor(datum, pinSpec).y,
         scaleX: () => pinSpec.width * this._computeLayoutRadius(),
         scaleY: () => pinSpec.height * this._computeLayoutRadius(),
         fill: this.getColorAttribute(),

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

@@ -41,13 +41,18 @@ export type PointerMarkSpec = {
 
   /** 中心点坐标（0~1） */
   center?: [number, number];
+
+  /** 是否定位于极坐标系的中心，默认为 true。如果为 false，则位置受 innerRadius 影响 */
+  isOnCenter?: boolean;
 };
 
 export type PinMarkSpec = {
   /** 宽度 */
   width?: number;
   /** 高度 */
   height?: number;
+  /** 是否定位于极坐标系的中心，默认为 true。如果为 false，则位置受 innerRadius 影响 */
+  isOnCenter?: boolean;
 };
 
 export interface IGaugePointerSeriesTheme extends IProgressLikeSeriesTheme {