diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index 536b6d82fe..90c23a19aa 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@@ -5,7 +5,7 @@ import { storeToRefs } from 'pinia'
 import { nextTick, onMounted, ref } from 'vue'
 import { ElFormItem } from 'element-plus-secondary'
 
-import { merge } from 'lodash-es'
+import { merge, cloneDeep } from 'lodash-es'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import ComponentColorSelector from '@/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue'
 import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue'
@@ -38,7 +38,19 @@ const themeAttrChange = (custom, property, value) => {
       try {
         const viewInfo = canvasViewInfo.value[viewId]
         if (custom === 'customAttr') {
-          merge(viewInfo['customAttr'], value)
+          if (viewInfo.type === 'flow-map') {
+            const { customAttr } = viewInfo
+            const tmpValue = cloneDeep(value)
+            const miscObj = cloneDeep(customAttr.misc)
+            for (const key in miscObj) {
+              if (miscObj.hasOwnProperty(key) && tmpValue.misc?.[key] !== undefined) {
+                tmpValue.misc[key] = miscObj[key]
+              }
+            }
+            merge(viewInfo['customAttr'], tmpValue)
+          } else {
+            merge(viewInfo['customAttr'], value)
+          }
         } else {
           Object.keys(value).forEach(function (key) {
             if (viewInfo[custom][property][key] !== undefined) {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
index f959c70bd6..72b13f63b3 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
@@ -55,6 +55,16 @@ watch(
 )
 const emit = defineEmits(['onBasicStyleChange', 'onMiscChange'])
 const changeBasicStyle = (prop?: string, requestData = false) => {
+  const mapLineColorStyle = prop?.split('@')
+  if (mapLineColorStyle.length === 2) {
+    if (mapLineColorStyle[1].toLowerCase() === 'SourceColor'.toLowerCase()) {
+      state.basicStyleForm.colors[0] = state.miscForm.mapLineSourceColor
+    }
+    if (mapLineColorStyle[1].toLowerCase() === 'TargetColor'.toLowerCase()) {
+      state.basicStyleForm.colors[1] = state.miscForm.mapLineTargetColor
+    }
+    changeMisc(state.basicStyleForm.colors[0] + state.basicStyleForm.colors[1])
+  }
   emit('onBasicStyleChange', { data: state.basicStyleForm, requestData }, prop)
 }
 const onAlphaChange = v => {
@@ -82,6 +92,10 @@ const init = () => {
   configCompat(basicStyle)
   state.basicStyleForm = defaultsDeep(basicStyle, cloneDeep(DEFAULT_BASIC_STYLE)) as ChartBasicStyle
   state.miscForm = defaultsDeep(miscStyle, cloneDeep(DEFAULT_MISC)) as ChartMiscAttr
+  if (props.chart.type === 'flow-map') {
+    state.miscForm.mapLineSourceColor = state.basicStyleForm.colors[0]
+    state.miscForm.mapLineTargetColor = state.basicStyleForm.colors[1]
+  }
   if (!state.customColor) {
     state.customColor = state.basicStyleForm.colors[0]
     state.colorIndex = 0
@@ -467,7 +481,7 @@ onMounted(() => {
                 :effect="themes"
                 :trigger-width="108"
                 :predefine="predefineColors"
-                @change="changeMisc('mapLineSourceColor')"
+                @change="changeBasicStyle('mapLine@SourceColor')"
               />
             </el-form-item>
           </el-col>
@@ -485,7 +499,7 @@ onMounted(() => {
                 :effect="themes"
                 :trigger-width="108"
                 :predefine="predefineColors"
-                @change="changeMisc('mapLineTargetColor')"
+                @change="changeBasicStyle('mapLine@TargetColor')"
               />
             </el-form-item>
           </el-col>
@@ -507,7 +521,7 @@ onMounted(() => {
                 :effect="themes"
                 :trigger-width="108"
                 :predefine="predefineColors"
-                @change="changeMisc('mapLineSourceColor')"
+                @change="changeBasicStyle('mapLine@SourceColor')"
               />
             </el-form-item>
           </el-col>
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts
index 07d8ebb3f6..4b1ff42ed3 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts
@@ -6,7 +6,7 @@ import {
   L7Wrapper
 } from '@/views/chart/components/js/panel/types/impl/l7'
 import { MAP_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/map/common'
-import { flow, parseJson } from '@/views/chart/components/js/util'
+import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
 import { deepCopy } from '@/utils/utils'
 import { GaodeMap } from '@antv/l7-maps'
 import { Scene } from '@antv/l7-scene'
@@ -49,22 +49,21 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
     const { chart, container } = drawOption
     const xAxis = deepCopy(chart.xAxis)
     const xAxisExt = deepCopy(chart.xAxisExt)
-    let basicStyle
-    let miscStyle
-    if (chart.customAttr) {
-      basicStyle = parseJson(chart.customAttr).basicStyle
-      miscStyle = parseJson(chart.customAttr).misc
-    }
+    const { basicStyle, misc } = deepCopy(parseJson(chart.customAttr))
     const flowLineStyle = {
-      type: miscStyle.mapLineType,
-      size: miscStyle.mapLineType === 'line' ? miscStyle.mapLineWidth / 2 : miscStyle.mapLineWidth,
-      animate: miscStyle.mapLineAnimate,
-      animateDuration: miscStyle.mapLineAnimateDuration,
-      gradient: miscStyle.mapLineGradient,
-      sourceColor: miscStyle.mapLineSourceColor,
-      targetColor: miscStyle.mapLineTargetColor,
+      type: misc.mapLineType,
+      size: misc.mapLineType === 'line' ? misc.mapLineWidth / 2 : misc.mapLineWidth,
+      animate: misc.mapLineAnimate,
+      animateDuration: misc.mapLineAnimateDuration,
+      gradient: misc.mapLineGradient,
+      sourceColor: misc.mapLineSourceColor,
+      targetColor: misc.mapLineTargetColor,
       alpha: basicStyle.alpha
     }
+    const colorsWithAlpha = basicStyle.colors.map(color => hexColorToRGBA(color, basicStyle.alpha))
+    flowLineStyle.sourceColor = colorsWithAlpha[0]
+    flowLineStyle.targetColor = colorsWithAlpha[1]
+
     const mapStyle = `amap://styles/${basicStyle.mapStyle ? basicStyle.mapStyle : 'normal'}`
     const key = await this.getMapKey()
     // 底层
@@ -74,7 +73,7 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
       map: new GaodeMap({
         token: key ?? undefined,
         style: mapStyle,
-        pitch: miscStyle.mapPitch,
+        pitch: misc.mapPitch,
         zoom: 2.5
       })
     })