feat: support polygon crosshair for angleAxis in polar coordinate

VisActor · Jan 26, 2025 · bdae17e · bdae17e
1 parent 4d720b4
commit bdae17e
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 5 deletions.
diff --git a/docs/assets/option/en/component/crosshair-common/crosshair-line.md b/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)

diff --git a/docs/assets/option/zh/component/crosshair-common/crosshair-line.md b/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)

diff --git a/packages/vchart/src/component/crosshair/base.ts b/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;
   }
 

diff --git a/packages/vchart/src/component/crosshair/interface/spec.ts b/packages/vchart/src/component/crosshair/interface/spec.ts
@@ -130,6 +130,7 @@ export interface ICrosshairLineSpec {
   width?: number;
   /**
    * 极坐标系下是否平滑
+   * @since 1.13.5
    */
   smooth?: boolean;
   /**
@@ -155,6 +156,10 @@ export interface ICrosshairRectSpec {
    * @default '100%''
    */
   width?: number | string | ICrosshairRectWidthCallback;
+  /**
+   * 极坐标系下是否平滑
+   */
+  smooth?: boolean;
   /**
    * 辅助图形的样式配置
    */

diff --git a/packages/vchart/src/component/crosshair/polar.ts b/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';