From 183fb85cd722513baf5915b5a664aad4a3d60b85 Mon Sep 17 00:00:00 2001
From: xiaoluoHe <sevnape@outlook.com>
Date: Wed, 22 Jan 2025 14:55:10 +0800
Subject: [PATCH] fix: fix the issue where the upper mark in stacked area
 overlaps the border of lower mark

---
 .../fix-area-stack-cover_2025-01-22-06-54.json     | 10 ++++++++++
 packages/vchart/src/series/area/area.ts            | 14 ++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 common/changes/@visactor/vchart/fix-area-stack-cover_2025-01-22-06-54.json

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
new file mode 100644
index 0000000000..ffdd651c22
--- /dev/null
+++ 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"
+}
\ No newline at end of file
diff --git a/packages/vchart/src/series/area/area.ts b/packages/vchart/src/series/area/area.ts
index 2fca341331..d8b0a177cc 100644
--- 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,
         {