From 367f9a908497a7ba9b3bb341cb01b5fbb5ab1e0d Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 22 Apr 2026 18:06:29 +0800 Subject: [PATCH] feat: markLine expandDistancesupport callback. close#4568 --- .../vchart/develop_2026-04-22-10-05.json | 10 ++++++++ .../marker/mark-line/cartesian-mark-line.ts | 23 +++++++++++++++---- .../marker/mark-line/interface/spec.ts | 20 ++++++++++++++-- 3 files changed, 47 insertions(+), 6 deletions(-) create mode 100644 common/changes/@visactor/vchart/develop_2026-04-22-10-05.json diff --git a/common/changes/@visactor/vchart/develop_2026-04-22-10-05.json b/common/changes/@visactor/vchart/develop_2026-04-22-10-05.json new file mode 100644 index 0000000000..207b53038f --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts b/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts index 84d7d500b9..0f08bca69f 100644 --- a/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts +++ b/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; diff --git a/packages/vchart/src/component/marker/mark-line/interface/spec.ts b/packages/vchart/src/component/marker/mark-line/interface/spec.ts index e14c48e248..db1f0d85a8 100644 --- a/packages/vchart/src/component/marker/mark-line/interface/spec.ts +++ b/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); /** * 标注线的标签样式 */