Merge pull request #10671 from dataease/pr@dev-v2@chart-symbolic-style

style(图表-符号地图): 符号地图气泡大小字段添加解释图标

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>

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>

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

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() {