fix: fix the issue where the upper mark in stacked area overlaps the …

…border of lower mark
VisActor · Jan 22, 2025 · 183fb85 · 183fb85
1 parent b9f5e0a
commit 183fb85
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/common/changes/@visactor/vchart/fix-area-stack-cover_2025-01-22-06-54.json b/common/changes/@visactor/vchart/fix-area-stack-cover_2025-01-22-06-54.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: fix the issue where the upper mark in stacked area overlaps the border of lower mark, #3684",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
diff --git a/packages/vchart/src/series/area/area.ts b/packages/vchart/src/series/area/area.ts
@@ -26,6 +26,7 @@ import { registerSampleTransform, registerMarkOverlapTransform } from '@visactor
 import { AreaSeriesSpecTransformer } from './area-transformer';
 import { getGroupAnimationParams } from '../util/utils';
 import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian';
+import { STACK_FIELD_END } from '../../constant/data';
 
 export interface AreaSeries<T extends IAreaSeriesSpec = IAreaSeriesSpec>
   extends Pick<
@@ -167,6 +168,19 @@ export class AreaSeries<T extends IAreaSeriesSpec = IAreaSeriesSpec> extends Car
           AttributeLevel.Series
         );
       }
+
+      if (this.getStack()) {
+        // 在堆叠情况下面积系列需要控制图元层级，https://github.com/VisActor/VChart/issues/3684
+        this.setMarkStyle(
+          areaMark,
+          {
+            zIndex: (datum: Datum) => -datum[STACK_FIELD_END] // 越在堆叠下层，datum[STACK_FIELD_END] 越小,  zIndex越大
+          },
+          'normal',
+          AttributeLevel.Series
+        );
+      }
+
       this.setMarkStyle(
         areaMark,
         {