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 9792a24d4a..83af8f6ea6 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
@@ -706,6 +706,7 @@ onMounted(() => {
             v-model="state.basicStyleForm.areaBorderColor"
             :effect="themes"
             is-custom
+            show-alpha
             :trigger-width="108"
             class="color-picker-style"
             :predefine="predefineColors"
@@ -725,6 +726,7 @@ onMounted(() => {
             :persistent="false"
             v-model="state.basicStyleForm.areaBaseColor"
             is-custom
+            show-alpha
             :effect="themes"
             :trigger-width="108"
             class="color-picker-style"
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts
index 4d17ae08f5..7542b16ea7 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts
@@ -220,7 +220,7 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     const senior = parseJson(chart.senior)
     const curAreaNameMapping = senior.areaMapping?.[areaId]
     handleGeoJson(geoJson, curAreaNameMapping)
-    options.color = hexColorToRGBA(basicStyle.areaBaseColor, basicStyle.alpha)
+    options.color = basicStyle.areaBaseColor
     if (!chart.data?.data?.length || !geoJson?.features?.length) {
       options.label && (options.label.field = 'name')
       return options