feat: markLine expandDistancesupport callback. close#4568

common/changes/@visactor/vchart/develop_2026-04-22-10-05.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: markLine expandDistancesupport callback. close#4568",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts

@@ -8,7 +8,7 @@ import {
   MarkLine as MarkLineComponent,
   registerMarkLineAnimate
 } from '@visactor/vrender-components';
-import { array, isValid, isValidNumber } from '@visactor/vutils';
+import { array, isFunction, isValid, isValidNumber } from '@visactor/vutils';
 import type { IDataPos, IMarkProcessOptions } from '../interface';
 import { getInsertPoints, getTextOffset } from './util';
 import { Factory } from '../../../core/factory';
@@ -28,7 +28,7 @@ export class CartesianMarkLine extends BaseMarkLine {
     markLine
   };
 
-  protected declare _markerComponent: MarkLineComponent;
+  declare protected _markerComponent: MarkLineComponent;
 
   protected _newMarkLineComponent(attr: MarkLineAttrs): MarkLineComponent {
     return new MarkLineComponent(attr);
@@ -79,7 +79,22 @@ export class CartesianMarkLine extends BaseMarkLine {
       const endRelativeSeries = this._endRelativeSeries;
 
       const { multiSegment, mainSegmentIndex } = (this._spec as IStepMarkLineSpec).line || {};
-      const { connectDirection, expandDistance = 0 } = this._spec as IStepMarkLineSpec;
+      const { connectDirection } = this._spec as IStepMarkLineSpec;
+      let { expandDistance = 0 } = this._spec as IStepMarkLineSpec;
+      const { points, limitRect } = updateAttrs;
+      const coordinatePoints = array(points as IPoint[]).filter(Boolean);
+
+      if (isFunction(expandDistance)) {
+        const startRegion = startRelativeSeries?.getRegion?.();
+        const endRegion = endRelativeSeries?.getRegion?.();
+        expandDistance = expandDistance(this._markerData, {
+          ...this.getMarkAttributeContext(),
+          region: this._relativeSeries?.getRegion?.(),
+          startRegion,
+          endRegion,
+          coordinatePoints
+        });
+      }
 
       let expandDistanceValue: number;
       if (isPercent(expandDistance)) {
@@ -110,7 +125,7 @@ export class CartesianMarkLine extends BaseMarkLine {
       } else {
         expandDistanceValue = expandDistance as number;
       }
-      const { points, limitRect } = updateAttrs;
+
       if (!points || points.length < 2) {
         this._markerComponent?.setAttributes(updateAttrs);
         return;

packages/vchart/src/component/marker/mark-line/interface/spec.ts

@@ -1,6 +1,8 @@
+import type { DataView } from '@visactor/vdataset';
 import type { IComponent } from '../../../interface';
 import type {
   IAggrType,
+  IMarkerAttributeContext,
   IMarkerPositionsSpec,
   IDataPointSpec,
   IMarkerSpec,
@@ -17,6 +19,7 @@ import type { IRegressType } from '../../mark-area/interface';
 import type { IMarkLineTheme } from './theme';
 import type { Datum, ILineMarkSpec, IPoint } from '../../../../typings';
 import type { BaseMarkerAnimation, MarkCommonLineAnimationType } from '@visactor/vrender-components';
+import type { IRegion } from '../../../../region/interface';
 
 export type IMarkLine = IComponent;
 
@@ -251,8 +254,21 @@ export type IStepMarkLineSpec = IMarkerSpec & {
    * 在连接方向的扩展距离。
    * number 类型为像素值
    * string 类型为百分比，相对于 region 区域宽度/高度的百分比，如 '30%'
-   */
-  expandDistance?: number | string;
+   * 回调函数参数同 marker 其他回调，支持拿到 markerData 与上下文，
+   * 并额外补充了 region/startRegion/endRegion 便于跨 region 计算，以及当前差异标注的坐标点。
+   */
+  expandDistance?:
+    | number
+    | string
+    | ((
+        markerData: DataView,
+        context: IMarkerAttributeContext & {
+          region: IRegion;
+          startRegion: IRegion;
+          endRegion: IRegion;
+          coordinatePoints: IPoint[];
+        }
+      ) => number | string);
   /**
    * 标注线的标签样式
    */