feat: support polygon crosshair for angleAxis in polar coordinate

Author: xiaoluoHe

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';