Skip to content

Commit 999cff9

Browse files
committed
feat: support inside-middle label position in area chart
1 parent 551def1 commit 999cff9

File tree

5 files changed

+28
-9
lines changed

5 files changed

+28
-9
lines changed

docs/assets/option/en/series/area.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ Optional string values:
124124
- `'bottom-right'`
125125
- `'bottom-left'`
126126
- `'center'`
127+
- `'inside-middle'` ( Supported since `1.13.1`
127128

128129
{{ use: component-label(
129130
prefix = '#' + ${prefix},

docs/assets/option/zh/series/area.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ label: {
124124
- `'bottom-right'`
125125
- `'bottom-left'`
126126
- `'center'`
127+
- `'inside-middle'``1.13.1` 版本开始支持)
127128

128129
{{ use: component-label(
129130
prefix = '#' + ${prefix},

packages/vchart/src/series/area/area-transformer.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,13 @@ export class AreaSeriesSpecTransformer<
1414
protected _supportStack: boolean = true;
1515

1616
protected _transformLabelSpec(spec: T): void {
17-
super._transformLabelSpec(spec);
17+
const isPointVisible = spec.point?.visible !== false && spec.point?.style?.visible !== false;
18+
19+
this._addMarkLabelSpec(spec, (spec: any) => {
20+
const isAreaMiddle = spec.position === 'inside-middle';
21+
return !isPointVisible || isAreaMiddle ? SeriesMarkNameEnum.area : SeriesMarkNameEnum.point;
22+
});
23+
1824
this._addMarkLabelSpec<AreaSeries>(
1925
spec,
2026
SeriesMarkNameEnum.area,
@@ -23,10 +29,6 @@ export class AreaSeriesSpecTransformer<
2329
undefined,
2430
true
2531
);
26-
const isPointVisible = spec.point?.visible !== false && spec.point?.style?.visible !== false;
27-
if (!isPointVisible) {
28-
this._addMarkLabelSpec(spec, SeriesMarkNameEnum.area);
29-
}
3032
}
3133

3234
protected _transformSpecAfterMergingTheme(spec: T, chartSpec: any, chartSpecInfo?: IChartSpecInfo) {

packages/vchart/src/series/area/interface.ts

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,23 @@ export interface IAreaSeriesSpec
4040
[SeriesMarkNameEnum.area]?: IMarkSpec<IAreaMarkSpec>;
4141
/**
4242
* 标签配置
43+
* @since 1.13.1 新增支持 inside-middle 标签位置
4344
*/
44-
[SeriesMarkNameEnum.label]?: IMultiLabelSpec<ILineLikeLabelSpec>;
45+
[SeriesMarkNameEnum.label]?: IMultiLabelSpec<
46+
Omit<ILineLikeLabelSpec, 'position'> & {
47+
position:
48+
| 'top'
49+
| 'bottom'
50+
| 'left'
51+
| 'right'
52+
| 'top-right'
53+
| 'top-left'
54+
| 'bottom-right'
55+
| 'bottom-left'
56+
| 'center'
57+
| 'inside-middle';
58+
}
59+
>;
4560
/**
4661
* 面积图元标签配置
4762
* @since 1.7.0

packages/vchart/src/series/base/base-series-transformer.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { isBoolean, isNil, isObject } from '@visactor/vutils';
1+
import { isBoolean, isFunction, isNil, isObject } from '@visactor/vutils';
22
import type { IChartSpecInfo } from '../../chart/interface';
33
import type { ILabelSpec, TransformedLabelSpec } from '../../component/label';
44
import { BaseModelSpecTransformer } from '../../model/base-model-transformer';
@@ -87,7 +87,7 @@ export class BaseSeriesSpecTransformer<T extends ISeriesSpec, K> extends BaseMod
8787

8888
protected _addMarkLabelSpec<V extends ISeries = ISeries>(
8989
spec: T,
90-
markName: SeriesMarkNameEnum,
90+
markName: SeriesMarkNameEnum | ((spec: ILabelSpec) => SeriesMarkNameEnum),
9191
labelSpecKey: keyof T = 'label' as any,
9292
styleHandlerName: keyof V = 'initLabelMarkStyle',
9393
hasAnimation: boolean = true,
@@ -111,7 +111,7 @@ export class BaseSeriesSpecTransformer<T extends ISeriesSpec, K> extends BaseMod
111111
const labelAnimationEnabled = !!animationEnabled && !!hasAnimation;
112112

113113
this.addLabelSpec(
114-
markName,
114+
isFunction(markName) ? markName(labelSpec) : markName,
115115
{
116116
...labelSpec,
117117
animation: labelAnimationEnabled ? animation : false,

0 commit comments

Comments
 (0)