Skip to content

Feature/make area #3949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eleliauk wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Feature/make area #3949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e28b6f1
fix(word-cloud): improve animation config handling and add max font s…
eleliauk May 6, 2025
d6a454e
feat(mark-area): add dx and dy properties for label offset with funct…
eleliauk May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/assets/option/zh/component/mark-area.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,24 @@ y 轴上的标注区域边界，与 markArea.y 共同构造标注区域。可以
- `'arcOuterMiddle'`: 弧线中点外侧
- `'center'`: 弧线中心

#### dx(number|function)

标签在x方向的偏移量，可以是具体的像素值或返回偏移量的函数。当为函数时，其参数为：
```ts
(data: any[], seriesData: any[]) => number
```
- `data`: 当前标注区域的数据
- `seriesData`: 关联的系列数据

#### dy(number|function)

标签在y方向的偏移量，可以是具体的像素值或返回偏移量的函数。当为函数时，其参数为：
```ts
(data: any[], seriesData: any[]) => number
```
- `data`: 当前标注区域的数据
- `seriesData`: 关联的系列数据

{{ use: component-marker-label(
prefix = '###',
noMarkerRef = true
Expand Down
8 changes: 4 additions & 4 deletions packages/vchart/src/component/marker/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,13 +241,13 @@ export type IMarkerLabelWithoutRefSpec = {
*/
confine?: boolean;
/**
* 水平方向的偏移
* 水平方向的偏移，可以是具体的像素值或返回偏移量的函数
*/
dx?: number;
dx?: number | ((data: any[], seriesData: any[]) => number);

@xile611 xile611 Sep 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P2] 请让函数偏移的公共类型与实际支持范围保持一致

这里修改的是共享的 IMarkerLabelWithoutRefSpec，会同时扩大 IMarkLineSpec.label 和 IMarkPointSpec.itemContent.text 的类型范围；但本 PR 只在 BaseMarkArea._markerLayout() 中解析 dx/dy 回调。markLine、markPoint 仍把函数对象直接传给 VRender 标签。

在包含 { x: 'A', y: 20 }、{ x: 'B', y: 60 }、{ x: 'C', y: 40 } 数据的普通折线图中，以下两种配置都能通过修改后的 TypeScript 类型检查：

const markLine: IMarkLineSpec = {
  y: 30,
  label: { text: 'threshold', dx: () => 12, dy: () => -8 }
};

const markPoint: IMarkPointSpec = {
  x: 'B',
  y: 30,
  itemContent: {
    text: { text: 'point', dx: () => 12, dy: () => -8 }
  }
};

实测两者的 dx/dy 回调调用次数都是 0，标签属性仍为函数对象，globalTransMatrix.e/f 出现非有限值；将同一配置改成数值 dx: 12, dy: -8 后，标签坐标正常。

麻烦按 #3225 的范围，把共享接口的 dx/dy 保持为 number，仅在 IMarkAreaLabel 中扩展函数类型（可以通过 Omit 后重新声明这两个属性，避免与原数值类型交叉）。如果本次希望同时支持其他 marker，则需要统一补齐它们在布局阶段的回调解析及回归测试。

/**
* 垂直方向的偏移
* 垂直方向的偏移，可以是具体的像素值或返回偏移量的函数
*/
dy?: number;
dy?: number | ((data: any[], seriesData: any[]) => number);
} & Partial<IMarkerState<Omit<IComposedTextMarkSpec, 'visible'>>>; // label文本 - 文本样式

export type IMarkerLabelSpec = IMarkerLabelWithoutRefSpec & IMarkerRef;
Expand Down
4 changes: 3 additions & 1 deletion packages/vchart/src/component/marker/mark-area/base-mark-area.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,9 @@ export abstract class BaseMarkArea extends BaseMarker<IMarkAreaSpec> implements
text: specLabel.formatMethod
? // type error here will be fixed in components
(specLabel.formatMethod(dataPoints, seriesData) as any)
: prevLabel?.text
: prevLabel?.text,
dx: typeof specLabel.dx === 'function' ? specLabel.dx(dataPoints, seriesData) : specLabel.dx,
dy: typeof specLabel.dy === 'function' ? specLabel.dy(dataPoints, seriesData) : specLabel.dy
};
}),
limitRect,
Expand Down
6 changes: 5 additions & 1 deletion packages/vchart/src/series/word-cloud/base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,10 @@ export class BaseWordCloudSeries<T extends IBaseWordCloudSeriesSpec = IBaseWordC
if (mark) {
const appearPreset = (this._spec?.animationAppear as IStateAnimateSpec<any>)?.preset;
const params = {
animationConfig: () => mark.getAnimationConfig()?.appear?.[0]
animationConfig: () => {
const config = mark.getAnimationConfig()?.appear;
return Array.isArray(config) ? config[0] : config;
}
};
mark.setAnimationConfig(
animationConfig(
Expand Down Expand Up @@ -420,6 +423,7 @@ export class BaseWordCloudSeries<T extends IBaseWordCloudSeriesSpec = IBaseWordC
shrink: this._wordCloudConfig.zoomToFit.shrink,
enlarge: this._wordCloudConfig.zoomToFit.enlarge,
minFontSize: this._wordCloudConfig.zoomToFit.fontSizeLimitMin,
maxFontSize: this._wordCloudConfig.zoomToFit.fontSizeLimitMax,
progressiveTime: this._wordCloudConfig.progressiveTime,
progressiveStep: this._wordCloudConfig.progressiveStep,
repeatFill: this._wordCloudConfig.zoomToFit.repeat
Expand Down