From 01d21c5a1f0b2899f8b232d3760a810367c99580 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Mon, 1 Jul 2024 19:42:53 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=9B=BE=E8=A1=A8-=E7=AC=A6=E5=8F=B7?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE):=20=E7=AC=A6=E5=8F=B7=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E6=B0=94=E6=B3=A1=E5=A4=A7=E5=B0=8F=E5=AD=97=E6=AE=B5=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=A7=A3=E9=87=8A=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-style/components/LabelSelector.vue | 10 ++++++++-
 .../components/TooltipSelector.vue            | 10 ++++++++-
 .../views/chart/components/editor/index.vue   | 22 +++++++++++++++++--
 .../js/panel/charts/map/symbolic-map.ts       |  3 ++-
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
index 458b32cfa4..908190f530 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
@@ -373,7 +373,7 @@ onMounted(() => {
       <el-form-item v-if="showProperty('customContent')" :class="'form-item-' + themes">
         <template #label>
           <span class="data-area-label">
-            <span>
+            <span style="margin-right: 4px">
               {{ t('chart.content_formatter') }}
             </span>
             <el-tooltip class="item" :effect="toolTip" placement="bottom">
@@ -996,4 +996,12 @@ onMounted(() => {
     border-color: rgba(255, 255, 255, 0.15);
   }
 }
+.data-area-label {
+  text-align: left;
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 </style>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
index 31e1665be0..a7c1ea9f21 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
@@ -487,7 +487,7 @@ onMounted(() => {
       <el-form-item v-if="showProperty('customContent')" :class="'form-item-' + themes">
         <template #label>
           <span class="data-area-label">
-            <span>
+            <span style="margin-right: 4px">
               {{ t('chart.content_formatter') }}
             </span>
             <el-tooltip class="item" :effect="toolTip" placement="bottom">
@@ -828,4 +828,12 @@ onMounted(() => {
 .form-item-checkbox {
   margin-bottom: 8px !important;
 }
+.data-area-label {
+  text-align: left;
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 </style>
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index b8e2406b94..41fa337712 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -2210,8 +2210,26 @@ onMounted(() => {
                     <!-- extBubble -->
                     <el-row class="padding-lr drag-data" v-if="showAxis('extBubble')">
                       <div class="form-draggable-title">
-                        <span>
-                          {{ chartViewInstance.axisConfig.extBubble.name }}
+                        <span class="data-area-label">
+                          <span style="margin-right: 4px">
+                            {{ chartViewInstance.axisConfig.extBubble.name }}
+                          </span>
+                          <el-tooltip
+                            v-if="chartViewInstance.axisConfig.extBubble.tooltip"
+                            class="item"
+                            :effect="toolTip"
+                            placement="top"
+                          >
+                            <template #content>
+                              <span> {{ chartViewInstance.axisConfig.extBubble.tooltip }}</span>
+                            </template>
+                            <el-icon
+                              class="hint-icon"
+                              :class="{ 'hint-icon--dark': themes === 'dark' }"
+                            >
+                              <Icon name="icon_info_outlined" />
+                            </el-icon>
+                          </el-tooltip>
                         </span>
                         <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
                           <el-icon
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts
index 7047c32100..0b7d17e4dc 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts
@@ -55,7 +55,8 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
     extBubble: {
       name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
       type: 'q',
-      limit: 1
+      limit: 1,
+      tooltip: '该指标生效时，样式基础样式中的大小属性将失效'
     }
   }
   constructor() {