From f1a467ec3edb62cbdb19734d6de47c3525fa1ab1 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Tue, 8 Oct 2024 17:29:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E7=AC=A6=E5=8F=B7?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=B0=94=E6=B3=A1=E5=A4=A7=E5=B0=8F=E5=8C=BA=E9=97=B4=20#12432?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/models/chart/chart-attr.d.ts          |  8 ++++
 .../components/BasicStyleSelector.vue         | 48 ++++++++++++++++++-
 .../chart/components/editor/util/chart.ts     |  4 +-
 .../js/panel/charts/map/symbolic-map.ts       | 19 ++++++--
 4 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts
index d438f5d986..42483f0e3c 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -281,6 +281,14 @@ declare interface ChartBasicStyle {
    * 汇总表总计标签
    */
   summaryLabel: string
+  /**
+   * 符号地图符号大小最小值
+   */
+  mapSymbolSizeMin: number
+  /**
+   * 符号地图符号大小最大值
+   */
+  mapSymbolSizeMax: number
 }
 /**
  * 表头属性
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 3915f499b7..9c50a9278b 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, PropType, reactive, watch } from 'vue'
+import { computed, onMounted, PropType, reactive, watch } from 'vue'
 import {
   COLOR_PANEL,
   DEFAULT_BASIC_STYLE,
@@ -236,6 +236,10 @@ const mapSymbolOptions = [
   { name: t('chart.line_symbol_diamond'), value: 'rhombus' }
 ]
 
+const customSymbolicMapSizeRange = computed(() => {
+  let { extBubble } = JSON.parse(JSON.stringify(props.chart))
+  return ['symbolic-map'].includes(props.chart.type) && extBubble?.length > 0
+})
 onMounted(() => {
   init()
 })
@@ -476,11 +480,53 @@ onMounted(() => {
                 :max="40"
                 v-model="state.basicStyleForm.mapSymbolSize"
                 @change="changeBasicStyle('mapSymbolSize')"
+                :disabled="customSymbolicMapSizeRange"
               />
             </el-form-item>
           </el-col>
         </el-row>
       </div>
+      <div class="alpha-setting">
+        <label class="alpha-label" :class="{ dark: 'dark' === themes }">
+          {{ t('chart.size') }}区间
+        </label>
+        <el-row style="flex: 1">
+          <el-col :span="12">
+            <el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
+              <el-input
+                type="number"
+                :effect="themes"
+                v-model="state.basicStyleForm.mapSymbolSizeMin"
+                :min="0"
+                :max="100"
+                class="basic-input-number"
+                :controls="false"
+                @change="changeBasicStyle('mapSymbolSizeMin')"
+                :disabled="!customSymbolicMapSizeRange"
+              >
+                <template #suffix> PX </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
+              <el-input
+                type="number"
+                :effect="themes"
+                v-model="state.basicStyleForm.mapSymbolSizeMax"
+                :min="0"
+                :max="100"
+                class="basic-input-number"
+                :controls="false"
+                @change="changeBasicStyle('mapSymbolSizeMax')"
+                :disabled="!customSymbolicMapSizeRange"
+              >
+                <template #suffix> PX </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
       <div class="alpha-setting">
         <label class="alpha-label" :class="{ dark: 'dark' === themes }">
           {{ t('chart.not_alpha') }}
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 6a3e21860c..7a8f7c8cbb 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -1578,7 +1578,9 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   showSummary: false,
   summaryLabel: '总计',
   seriesColor: [],
-  layout: 'horizontal'
+  layout: 'horizontal',
+  mapSymbolSizeMin: 4,
+  mapSymbolSizeMax: 30
 }
 
 export const BASE_VIEW_CONFIG = {
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 f8758830bc..8552c32efa 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
@@ -59,7 +59,8 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
       name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
       type: 'q',
       limit: 1,
-      tooltip: '该指标生效时，样式基础样式中的大小属性将失效',
+      tooltip:
+        '该指标生效时，样式基础样式中的大小属性将失效，同时可在样式基础样式中的大小区间配置大小区间',
       allowEmpty: true
     }
   }
@@ -160,8 +161,16 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
     const xAxis = deepCopy(chart.xAxis)
     const xAxisExt = deepCopy(chart.xAxisExt)
     const extBubble = deepCopy(chart.extBubble)
-    const { mapSymbolOpacity, mapSymbolSize, mapSymbol, mapSymbolStrokeWidth, colors, alpha } =
-      deepCopy(basicStyle)
+    const {
+      mapSymbolOpacity,
+      mapSymbolSize,
+      mapSymbol,
+      mapSymbolStrokeWidth,
+      colors,
+      alpha,
+      mapSymbolSizeMin,
+      mapSymbolSizeMax
+    } = deepCopy(basicStyle)
     const colorsWithAlpha = colors.map(color => hexColorToRGBA(color, alpha))
     let colorIndex = 0
     // 存储已分配的颜色
@@ -181,7 +190,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
           return {
             ...item,
             color,
-            size: item[sizeKey] ?? mapSymbolSize,
+            size: parseInt(item[sizeKey]) ?? mapSymbolSize,
             name: identifier
           }
         })
@@ -214,7 +223,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
       })
     }
     if (sizeKey) {
-      pointLayer.size('size', [4, 30])
+      pointLayer.size('size', [mapSymbolSizeMin, mapSymbolSizeMax])
     } else {
       pointLayer.size(mapSymbolSize)
     }