perf: 优化新地图组件

src/packages/components/Charts/Maps/MapBase/config.vue

@@ -4,15 +4,13 @@
   <CollapseItem name="地图" :expanded="true">
     <SettingItemBox name="地图区域">
       <SettingItem name="默认中国">
-          <n-select size="small" v-model:value="mapRegion.adcode" :options="mapRegionOptions" value-field="adcode" label-field="name"/>
-      </SettingItem>
-      <SettingItem name="大小">
-        <n-input-number
-          v-model:value="mapGeo.zoom"
-          :min="1"
+        <n-select
           size="small"
-          placeholder="请输入地图大小"
-        ></n-input-number>
+          v-model:value="mapRegion.adcode"
+          :options="mapRegionOptions"
+          value-field="adcode"
+          label-field="name"
+        />
       </SettingItem>
     </SettingItemBox>
 
@@ -31,9 +29,8 @@
           v-model:value="seriesList[1].itemStyle.areaColor.colorStops[1].color"
         ></n-color-picker>
       </SettingItem>
-
     </SettingItemBox>
-    <SettingItemBox name="阴影" >
+    <SettingItemBox name="阴影">
       <SettingItem name="颜色">
         <n-color-picker
           size="small"
@@ -44,6 +41,7 @@
       <SettingItem name="模糊程度">
         <n-input-number
           v-model:value="seriesList[1].itemStyle.shadowBlur"
+          :min="0"
           size="small"
           placeholder="请输入模糊程度"
         ></n-input-number>
@@ -63,7 +61,7 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="聚焦 （预览可见）" >
+    <SettingItemBox name="聚焦 （预览可见）">
       <setting-item name="禁用">
         <n-space>
           <n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
@@ -92,7 +90,11 @@
         ></n-input-number>
       </SettingItem>
       <SettingItem name="文字颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[1].emphasis.label.color"></n-color-picker>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].emphasis.label.color"
+        ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="边框">
@@ -112,8 +114,8 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="其他" v-if="mapRegion.adcode==='china'">
-      <SettingItem >
+    <SettingItemBox name="其他" v-if="mapRegion.adcode === 'china'">
+      <SettingItem>
         <n-checkbox v-model:checked="mapRegion.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
       </SettingItem>
     </SettingItemBox>
@@ -126,8 +128,8 @@
       <SettingItem name="颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
       </SettingItem>
-    </SettingItemBox> 
-    
+    </SettingItemBox>
+
     <SettingItemBox name="涟漪">
       <SettingItem name="涟漪大小">
         <n-input-number
@@ -141,10 +143,9 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].rippleEffect.color"></n-color-picker>
       </SettingItem>
       <SettingItem name="涟漪的绘制方式">
-        <n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions"/>
-
+        <n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions" />
       </SettingItem>
-    </SettingItemBox> 
+    </SettingItemBox>
   </CollapseItem>
 </template>
 
@@ -153,46 +154,48 @@ import { PropType, computed } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
-import {  ref } from 'vue'
+import { ref } from 'vue'
 import mapChinaJson from './mapGeojson/china.json'
 
-const mapRegionOptions=ref([
+const mapRegionOptions = ref([
   {
-    adcode:'china',
-    name:'中国',
+    adcode: 'china',
+    name: '中国'
   }
 ])
 
-const rippleEffectOptions=ref([
-{
-  value:'fill',
-    label:'实心',
-  },{
-    value:'stroke',
-    label:'空心',
+const rippleEffectOptions = ref([
+  {
+    value: 'fill',
+    label: '实心'
+  },
+  {
+    value: 'stroke',
+    label: '空心'
   }
 ])
+
 const props = defineProps({
   optionData: {
     type: Object as PropType<GlobalThemeJsonType>,
     required: true
   }
 })
-const initMapRegionOptions=()=>{
-  mapChinaJson.features.forEach((element:any) => {
-    if(element.properties.name){
-      mapRegionOptions.value.push({...element.properties})
+
+const initMapRegionOptions = () => {
+  mapChinaJson.features.forEach((element: any) => {
+    if (element.properties.name) {
+      mapRegionOptions.value.push({ ...element.properties })
     }
-  });
+  })
 }
 initMapRegionOptions()
+
 const seriesList = computed(() => {
   return props.optionData.series
 })
+
 const mapRegion = computed(() => {
   return props.optionData.mapRegion
 })
-const mapGeo = computed(() => {
-  return props.optionData.geo
-})
 </script>