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: 'line'`, and effective for `type: 'polygon'` since version `1.13.5`.
 
 {{ else }}
 #${prefix} width(number|string)

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

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

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

@@ -527,6 +527,7 @@ export abstract class BaseCrossHair<T extends ICartesianCrosshairSpec | IPolarCr
 
     hair.visible = visible;
     hair.type = line.type || 'line';
+    hair.smooth = line.smooth;
 
     if (line.visible === false) {
       hair.style = { visible: false };
@@ -611,7 +612,6 @@ export abstract class BaseCrossHair<T extends ICartesianCrosshairSpec | IPolarCr
     } else {
       hair.label = { visible: false };
     }
-
     return hair;
   }
 

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

@@ -155,6 +155,11 @@ export interface ICrosshairRectSpec {
    * @default '100%''
    */
   width?: number | string | ICrosshairRectWidthCallback;
+  /**
+   * 极坐标系下是否平滑
+   * @since 1.13.5
+   */
+  smooth?: boolean;
   /**
    * 辅助图形的样式配置
    */

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

@@ -4,7 +4,13 @@ import type { IComponentOption } from '../interface';
 import { ComponentTypeEnum } from '../interface/type';
 import type { IPolarCrosshairSpec } from './interface';
 import type { PolygonCrosshairAttrs, CircleCrosshairAttrs } 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, IPolarOrientType, StringOrNumber, TooltipActiveType, TooltipData } from '../../typings';
 import { BaseCrossHair } from './base';
@@ -190,7 +196,8 @@ export class PolarCrossHair<T extends IPolarCrosshairSpec = IPolarCrosshairSpec>
         let crosshair;
 
         if (coordKey === 'angle') {
-          const crosshairType = attributes.type === 'rect' ? 'sector' : 'line';
+          const isSmooth = attributes.smooth === true;
+          const crosshairType = attributes.type === 'rect' ? (isSmooth ? 'sector' : 'polygon-sector') : 'line';
           // 创建
           if (crosshairType === 'line') {
             crosshair = new LineCrosshair({
@@ -212,6 +219,19 @@ 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;
+              }),
+              polygonSectorStyle: attributes.style,
+              zIndex: this.gridZIndex,
+              pickable: false
+            });
           }
         } else {
           const crosshairType = smooth ? 'circle' : 'polygon';