feat: support inside-middle label position in area chart

VisActor · Dec 10, 2024 · 88eef5b · 88eef5b
1 parent 6e1b3bd
commit 88eef5b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git a/docs/assets/option/en/series/area.md b/docs/assets/option/en/series/area.md
@@ -124,6 +124,7 @@ Optional string values:
 - `'bottom-right'`
 - `'bottom-left'`
 - `'center'`
+- `'inside-middle'` （ Supported since `1.13.1` ）
 
 {{ use: component-label(
   prefix = '#' + ${prefix},

diff --git a/docs/assets/option/zh/series/area.md b/docs/assets/option/zh/series/area.md
@@ -124,6 +124,7 @@ label: {
 - `'bottom-right'`
 - `'bottom-left'`
 - `'center'`
+- `'inside-middle'` （ `1.13.1` 版本开始支持）
 
 {{ use: component-label(
   prefix = '#' + ${prefix},

diff --git a/packages/vchart/src/series/area/area-transformer.ts b/packages/vchart/src/series/area/area-transformer.ts
@@ -14,7 +14,13 @@ export class AreaSeriesSpecTransformer<
   protected _supportStack: boolean = true;
 
   protected _transformLabelSpec(spec: T): void {
-    super._transformLabelSpec(spec);
+    const isPointVisible = spec.point?.visible !== false && spec.point?.style?.visible !== false;
+
+    this._addMarkLabelSpec(spec, (spec: any) => {
+      const isAreaMiddle = spec.position === 'inside-middle';
+      return !isPointVisible || isAreaMiddle ? SeriesMarkNameEnum.area : SeriesMarkNameEnum.point;
+    });
+
     this._addMarkLabelSpec<AreaSeries>(
       spec,
       SeriesMarkNameEnum.area,
@@ -23,10 +29,6 @@ export class AreaSeriesSpecTransformer<
       undefined,
       true
     );
-    const isPointVisible = spec.point?.visible !== false && spec.point?.style?.visible !== false;
-    if (!isPointVisible) {
-      this._addMarkLabelSpec(spec, SeriesMarkNameEnum.area);
-    }
   }
 
   protected _transformSpecAfterMergingTheme(spec: T, chartSpec: any, chartSpecInfo?: IChartSpecInfo) {

diff --git a/packages/vchart/src/series/area/interface.ts b/packages/vchart/src/series/area/interface.ts
@@ -40,8 +40,23 @@ export interface IAreaSeriesSpec
   [SeriesMarkNameEnum.area]?: IMarkSpec<IAreaMarkSpec>;
   /**
    * 标签配置
+   * @since 1.13.1 新增支持 inside-middle 标签位置
    */
-  [SeriesMarkNameEnum.label]?: IMultiLabelSpec<ILineLikeLabelSpec>;
+  [SeriesMarkNameEnum.label]?: IMultiLabelSpec<
+    Omit<ILineLikeLabelSpec, 'position'> & {
+      position:
+        | 'top'
+        | 'bottom'
+        | 'left'
+        | 'right'
+        | 'top-right'
+        | 'top-left'
+        | 'bottom-right'
+        | 'bottom-left'
+        | 'center'
+        | 'inside-middle';
+    }
+  >;
   /**
    * 面积图元标签配置
    * @since 1.7.0

diff --git a/packages/vchart/src/series/base/base-series-transformer.ts b/packages/vchart/src/series/base/base-series-transformer.ts
@@ -1,4 +1,4 @@
-import { isBoolean, isNil, isObject } from '@visactor/vutils';
+import { isBoolean, isFunction, isNil, isObject } from '@visactor/vutils';
 import type { IChartSpecInfo } from '../../chart/interface';
 import type { ILabelSpec, TransformedLabelSpec } from '../../component/label';
 import { BaseModelSpecTransformer } from '../../model/base-model-transformer';
@@ -87,7 +87,7 @@ export class BaseSeriesSpecTransformer<T extends ISeriesSpec, K> extends BaseMod
 
   protected _addMarkLabelSpec<V extends ISeries = ISeries>(
     spec: T,
-    markName: SeriesMarkNameEnum,
+    markName: SeriesMarkNameEnum | ((spec: ILabelSpec) => SeriesMarkNameEnum),
     labelSpecKey: keyof T = 'label' as any,
     styleHandlerName: keyof V = 'initLabelMarkStyle',
     hasAnimation: boolean = true,
@@ -111,7 +111,7 @@ export class BaseSeriesSpecTransformer<T extends ISeriesSpec, K> extends BaseMod
         const labelAnimationEnabled = !!animationEnabled && !!hasAnimation;
 
         this.addLabelSpec(
-          markName,
+          isFunction(markName) ? markName(labelSpec) : markName,
           {
             ...labelSpec,
             animation: labelAnimationEnabled ? animation : false,