diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
index d805abca99..96aff50989 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
@@ -138,30 +138,23 @@ const setupSeriesColor = () => {
     }
     seriesColorState.curSeriesColor = seriesColorState.seriesColor[seriesColorState.curColorIndex]
     nextTick(() => {
-      const targetId = 'series-color-picker-' + seriesColorState.curColorIndex
-      const target = document.getElementById(targetId)
-      if (target) {
-        seriesColorState.seriesColorPickerId = `#${targetId}`
-      } else {
-        seriesColorPickerRef.value?.hide()
-      }
+      customColorPickerRef.value?.hide()
+      // 防止 teleport 失效还有选框飘到左上角
+      seriesColorState.seriesColorPickerId = `#seriesr-picker-slot-${props.sub ? 1 : 0}`
     })
   }
 }
-
-const flag = ref(1)
-
 const switchSeriesColor = (seriesColor, index) => {
   seriesColorPickerRef.value?.hide()
   seriesColorState.curSeriesColor = cloneDeep(seriesColor)
   seriesColorState.curColorIndex = index
-  const id = '#series-color-picker-' + seriesColor.id + `-${flag.value}`
-  if (document.querySelectorAll(id).length > 1) {
-    flag.value = 2
-  }
-  seriesColorState.seriesColorPickerId = '#series-color-picker-' + seriesColor.id + `-${flag.value}`
+  const id = `series-color-picker-${props.sub ? 1 : 0}-${index}`
+  seriesColorState.seriesColorPickerId = `#${id}`
   nextTick(() => {
-    seriesColorPickerRef.value?.show()
+    const dom = document.getElementById(id)
+    if (dom) {
+      seriesColorPickerRef.value?.show()
+    }
   })
 }
 
@@ -464,13 +457,16 @@ const colorItemBorderColor = (index, state) => {
         "
         class="series-color-setting colors"
       >
+        <div
+          :id="`seriesr-picker-slot-${sub ? 1 : 0}`"
+          style="overflow: hidden; transform: translateX(0)"
+        ></div>
         <div
           v-for="(item, index) in seriesColorState.seriesColor"
           :key="item.id"
           class="color-list-item"
         >
           <div
-            :id="`series-color-picker-${item.id}-${flag}`"
             :class="{
               active: item.id === seriesColorState.curSeriesColor?.id
             }"
@@ -484,22 +480,24 @@ const colorItemBorderColor = (index, state) => {
               }"
             ></div>
           </div>
+          <div :id="`series-color-picker-${sub ? 1 : 0}-${index}`"></div>
           <span
             :title="item.name"
             class="color-item-name"
             :class="themes === 'dark' ? 'dark' : ''"
             >{{ item.name }}</span
           >
-          <div :id="'series-color-picker-' + index"></div>
         </div>
       </div>
     </template>
-    <teleport :to="seriesColorState.seriesColorPickerId">
-      <div style="position: absolute; top: 0; left: 10px; width: 0; height: 0; overflow: hidden">
+    <teleport defer :to="seriesColorState.seriesColorPickerId">
+      <div class="series-color-picker-wrapper">
         <el-color-picker
           ref="seriesColorPickerRef"
           v-model="seriesColorState.curSeriesColor.color"
           size="small"
+          popper-class="series-color-picker"
+          :teleported="false"
           :predefine="predefineColors"
           @change="changeSeriesColor"
         />
@@ -590,7 +588,6 @@ const colorItemBorderColor = (index, state) => {
       cursor: pointer;
       padding: 2px;
       border: solid 1px transparent;
-      position: relative;
       .color-item__inner {
         width: 14px;
         height: 14px;
@@ -662,7 +659,6 @@ const colorItemBorderColor = (index, state) => {
       cursor: pointer;
       padding: 2px;
       border: solid 1px transparent;
-      position: relative;
 
       .color-item__inner {
         width: 14px;
@@ -722,4 +718,18 @@ const colorItemBorderColor = (index, state) => {
     margin-left: 4px;
   }
 }
+.series-color-picker-wrapper {
+  width: 0px;
+  height: 0px;
+  position: absolute;
+  :deep(.ed-tooltip__trigger) {
+    width: 0px;
+    height: 0px;
+    overflow: hidden;
+  }
+  :deep(.series-color-picker) {
+    position: fixed !important;
+    margin-top: 16px !important;
+  }
+}
 </style>