diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index c5fa8c2241..0253917e9a 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -25,8 +25,10 @@ import _ from 'lodash'
 import DragShadow from '@/components/data-visualization/canvas/DragShadow.vue'
 import {
   canvasSave,
+  componentPreSort,
   findDragComponent,
   findNewComponent,
+  isDashboard,
   isGroupCanvas,
   isMainCanvas,
   isSameCanvas
@@ -1088,7 +1090,10 @@ const canvasInit = () => {
 
   reCalcCellWidth()
   resetPositionBox()
-
+  // 根据高度排序
+  if (isDashboard()) {
+    componentPreSort(componentData.value)
+  }
   let i = 0
   let timeId = setInterval(function () {
     if (i >= componentData.value.length) {
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index bbfda5f9fa..cbb43c196f 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -546,3 +546,17 @@ export function trackBarStyleCheck(element, trackbarStyle, _scale, trackMenuNumb
     trackbarStyle.top = trackbarStyle.top - trackMenuHeight
   }
 }
+
+// 优化仪表板图层排序 根据所处的Y轴位置预先进行排序再渲染矩阵 防止出现串位
+export function componentPreSort(componentData) {
+  if (componentData && Array.isArray(componentData)) {
+    componentData.sort((c1, c2) => c1.y - c2.y)
+    componentData.forEach(componentItem => {
+      if (componentItem.component === 'DeTabs') {
+        componentItem.propValue.forEach(tabItem => {
+          componentPreSort(tabItem.componentData)
+        })
+      }
+    })
+  }
+}