[WIP] feat: support polygon crosshair for angleAxis in polar coordinate

common/changes/@visactor/vchart/feat-polar-polyon-crosshair_2024-12-25-02-49.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": " feat: support polygon crosshair for angleAxis in polar coordinate, #3458",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

docs/assets/option/en/component/crosshair-common/crosshair-line.md

@@ -16,7 +16,8 @@ Only effective for `type: 'line'`, `width` represents the width of the auxiliary
 
 #${prefix} smooth(boolean)
 
-Only effective for `type: 'line'`, whether to draw smoothly under the polar coordinate system or not.
+Whether to draw smoothly under the polar coordinate system or not.
+Effective for `type: 'polygon'` since version `1.13.3`
 
 {{ else }}
 #${prefix} width(number|string)

docs/assets/option/zh/component/crosshair-common/crosshair-line.md

@@ -16,7 +16,8 @@ crosshair 辅助线的类型，可选值为 `'line'` 和 `'rect'`。
 
 #${prefix} smooth(boolean)
 
-仅对 `type: 'line'` 生效，极坐标系下是否平滑绘制。
+极坐标系下是否平滑绘制。
+自版本 `1.13.3` 以上支持 `type: 'polygon'`。
 
 {{ else }}
 #${prefix} width(number|string)

packages/vchart/src/component/crosshair/base.ts

@@ -54,7 +54,7 @@ export interface IHair {
   };
 }
 
-export interface IHairRadius extends IHair {
+export interface IPolarHair extends IHair {
   smooth?: boolean;
 }
 

packages/vchart/src/component/crosshair/interface/spec.ts

@@ -126,6 +126,8 @@ export interface ICrosshairRectSpec {
    * @default '100%''
    */
   width?: number | string | ICrosshairRectWidthCallback;
+  /** 极坐标系下是否平滑 */
+  smooth?: boolean;
   style?: ICrosshairRectStyle;
 }
 

packages/vchart/src/component/crosshair/polar.ts

@@ -5,10 +5,16 @@ import { ComponentTypeEnum } from '../interface/type';
 import type { AxisCurrentValueMap, IPolarCrosshairInfo, IPolarCrosshairSpec } from './interface';
 import { isDiscrete } from '@visactor/vscale';
 import { Tag } from '@visactor/vrender-components';
-import { LineCrosshair, SectorCrosshair, CircleCrosshair, PolygonCrosshair } from '@visactor/vrender-components';
+import {
+  LineCrosshair,
+  SectorCrosshair,
+  CircleCrosshair,
+  PolygonCrosshair,
+  PolygonSectorCrosshair
+} from '@visactor/vrender-components';
 import type { IPolarAxis } from '../axis/polar/interface';
 import type { IPoint, StringOrNumber, TooltipActiveType, TooltipData } from '../../typings';
-import type { IAxisInfo, IHair, IHairRadius } from './base';
+import type { IAxisInfo, IHair, IPolarHair } from './base';
 import { BaseCrossHair } from './base';
 import type { Maybe } from '@visactor/vutils';
 import { polarToCartesian, PointService, isArray, isNil } from '@visactor/vutils';
@@ -32,8 +38,8 @@ export class PolarCrossHair<T extends IPolarCrosshairSpec = IPolarCrosshairSpec>
   private _currValueAngle: AxisCurrentValueMap;
   private _currValueRadius: AxisCurrentValueMap;
 
-  private _angleHair: IHair | undefined;
-  private _radiusHair: IHairRadius | undefined;
+  private _angleHair: IPolarHair | undefined;
+  private _radiusHair: IPolarHair | undefined;
 
   private _cacheAngleCrossHairInfo: IPolarCrosshairInfo | undefined;
   private _cacheRadiusCrossHairInfo: IPolarCrosshairInfo | undefined;
@@ -267,9 +273,11 @@ export class PolarCrossHair<T extends IPolarCrosshairSpec = IPolarCrosshairSpec>
     }
 
     const container = this.getContainer();
-    const { angle, radius, label, center, visible } = crosshairInfo;
+    const { angle, radius, label, center, visible, axis } = crosshairInfo;
     if (visible) {
-      const crosshairType = this._angleHair.type === 'rect' ? 'sector' : 'line';
+      const isSmooth = this._angleHair.smooth === true;
+      const crosshairType = this._angleHair.type === 'rect' ? (isSmooth ? 'sector' : 'polygon-sector') : 'line';
+
       const positionAttrs = layoutAngleCrosshair(this._angleHair, crosshairInfo);
 
       if (this._angleCrosshair) {
@@ -297,6 +305,20 @@ export class PolarCrossHair<T extends IPolarCrosshairSpec = IPolarCrosshairSpec>
             zIndex: this.gridZIndex,
             pickable: false
           });
+        } else if (crosshairType === 'polygon-sector') {
+          crosshair = new PolygonSectorCrosshair({
+            ...(positionAttrs as {
+              center: IPoint;
+              innerRadius: number;
+              radius: number;
+              startAngle: number;
+              endAngle: number;
+            }),
+            offset: axis.getSpec()?.offset ?? 0.5,
+            polygonSectorStyle: this._angleHair.style,
+            zIndex: this.gridZIndex,
+            pickable: false
+          });
         }
         this._angleCrosshair = crosshair as unknown as IGroup;
         // 添加至场景树
@@ -389,6 +411,7 @@ export class PolarCrossHair<T extends IPolarCrosshairSpec = IPolarCrosshairSpec>
     const { categoryField, valueField } = this._spec as IPolarCrosshairSpec;
     if (categoryField && categoryField.visible) {
       this._angleHair = this._parseField(categoryField, 'categoryField');
+      this._angleHair.smooth = categoryField?.line?.smooth;
     }
     if (valueField && valueField.visible) {
       this._radiusHair = this._parseField(valueField, 'valueField');

packages/vchart/src/component/crosshair/utils/polar.ts

@@ -1,6 +1,6 @@
 import type { BandScale } from '@visactor/vscale';
 import type { IPolarSeries } from '../../../series';
-import type { IHair, IHairRadius } from '../base';
+import type { IHair, IPolarHair } from '../base';
 import type { AxisCurrentValueMap, IPolarCrosshairInfo } from '../interface';
 import { getAxisLabelOffset } from '../../axis/util';
 import { PointService, clamp, getAngleByPoint, getIntersectPoint, isValid, polarToCartesian } from '@visactor/vutils';
@@ -63,6 +63,7 @@ export const layoutByValue = (
 
       angleCrossHairInfo.startAngle = angle - bandWidth / 2;
       angleCrossHairInfo.endAngle = angle + bandWidth / 2;
+      angleCrossHairInfo.axis = axis as IPolarAxis;
     });
   }
 
@@ -152,7 +153,7 @@ export const layoutAngleCrosshair = (angleHair: IHair, crosshairInfo: IPolarCros
   return positionAttrs;
 };
 
-export const layoutRadiusCrosshair = (radiusHair: IHairRadius, crosshairInfo: IPolarCrosshairInfo) => {
+export const layoutRadiusCrosshair = (radiusHair: IPolarHair, crosshairInfo: IPolarCrosshairInfo) => {
   const { center, startAngle, endAngle, distance, sides, axis, point, radius, innerRadius } = crosshairInfo;
 
   const crosshairType = radiusHair.smooth ? 'circle' : 'polygon';