perf: 可选省份地图组件异步加载geojson

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

@@ -10,7 +10,7 @@ export const option = {
   dataset: dataJson,
   mapRegion: {
     adcode: 'china',
-    adcodeFlag: true,
+    showHainanIsLands:true
   },
   tooltip: {
     show: true,
@@ -42,25 +42,13 @@ export const option = {
     },
   },
   geo: {
+    show:false,
     type: 'map',
     roam: false,
     map: "china",
     selectedMode: false, //是否允许选中多个区域
     // aspectScale: 1,
     zoom: 1,
-    tooltip: {
-      show: false,
-    },
-    label: {
-      show: false,
-    }, //地图中文字内容及样式控制
-    itemStyle: {
-      areaColor: "rgba(0,0,0,0)",
-      borderColor: "rgba(0,0,0,0)",
-    },
-    emphasis: {
-      disabled: true,
-    },
   },
   series: [
     {
@@ -135,7 +123,7 @@ export const option = {
       },
       label: {
         show: false,
-        color: "#000",
+        color: "#fff",
         // formatter: function (val:any) {
         //   // console.log(val)
         //   if (val.data !== undefined) {
@@ -145,7 +133,18 @@ export const option = {
         //   }
         // },
         rich: {},
-        emphasis: { show: false },
+        // emphasis: { show: false },
+      },
+      emphasis: {
+        disabled:false,
+        label: {
+          color: "#fffFFF",
+        },
+        itemStyle:{
+          areaColor: "#389BB7",
+          shadowColor:"#389BB7",
+          borderWidth: 1,
+        }
       },
       itemStyle: {
         // borderColor: "rgba(147, 235, 248, .8)",
@@ -172,14 +171,7 @@ export const option = {
         shadowOffsetX: -2,
         shadowOffsetY: 2,
         shadowBlur: 10,
-        emphasis: {
-          disabled:false,
-          areaColor: "#389BB7",
-          shadowColor:"#389BB7",
-          borderWidth: 1,
-        },
-        showHainanIsLands: true,
-
+      
       },
      
     }

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

@@ -8,7 +8,7 @@
       </SettingItem>
       <SettingItem name="大小">
         <n-input-number
-          v-model:value="seriesList[1].zoom"
+          v-model:value="mapGeo.zoom"
           :min="1"
           size="small"
           placeholder="请输入地图大小"
@@ -63,34 +63,37 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="聚焦" >
-      <!-- <setting-item name="禁用">
+    <SettingItemBox name="聚焦 （预览可见）" >
+      <setting-item name="禁用">
         <n-space>
-          <n-switch v-model:value="seriesList[1].itemStyle.emphasis.disabled" size="small"></n-switch>
+          <n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
         </n-space>
-      </setting-item> -->
-      <SettingItem name="颜色（预览可见）">
+      </setting-item>
+      <SettingItem name="颜色">
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
+          v-model:value="seriesList[1].emphasis.itemStyle.areaColor"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="阴影（预览可见）">
+      <SettingItem name="阴影">
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
+          v-model:value="seriesList[1].emphasis.itemStyle.shadowColor"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="边框大小（预览）">
+      <SettingItem name="边框大小">
         <n-input-number
-          v-model:value="seriesList[1].itemStyle.emphasis.borderWidth"
+          v-model:value="seriesList[1].emphasis.itemStyle.borderWidth"
           :min="1"
           size="small"
           placeholder="请输入边框大小"
         ></n-input-number>
       </SettingItem>
+      <SettingItem name="文字颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[1].emphasis.label.color"></n-color-picker>
+      </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="边框">
       <SettingItem name="颜色">
@@ -111,7 +114,7 @@
     </SettingItemBox>
     <SettingItemBox name="其他" v-if="mapRegion.adcode==='china'">
       <SettingItem >
-        <n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
+        <n-checkbox v-model:checked="mapRegion.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
@@ -148,7 +151,6 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { lineConf } from '@/packages/chartConfiguration/echarts/index'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 import {  ref } from 'vue'
@@ -190,5 +192,7 @@ const seriesList = computed(() => {
 const mapRegion = computed(() => {
   return props.optionData.mapRegion
 })
-
+const mapGeo = computed(() => {
+  return props.optionData.geo
+})
 </script>

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

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, reactive, watch } from 'vue'
+import { PropType, reactive, watch, ref, nextTick } from 'vue'
 import config, { includes, MapDefaultConfig } from './config'
 import VChart from 'vue-echarts'
 import { use, registerMap, getMap } from 'echarts/core'
@@ -51,28 +51,12 @@ use([
   VisualMapComponent
 ])
 
-
 const option = reactive({
-  value:  mergeTheme(props.chartConfig.option, props.themeSetting, includes),
+  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
+const vChartRef = ref<typeof VChart>()
 
-
-
-// const mapJsonModules:any = {}
-// const files = import.meta.globEager('./mapGeojson/*.json')
-// for (const key in files) {
-//     const filename = key.replace(/(\.\/mapGeojson\/|\.(json))/g, "");
-//     mapJsonModules[filename] = files[key].default || files[key]
-// }
-// //注册地图  同步
-// const registerMapModules=()=>{
-//   let adcode= props.chartConfig.option.mapRegion.adcode
-//   registerMap(adcode, { geoJSON: mapJsonModules[adcode] as any, specialAreas: {} })
-// }
-// registerMapModules()
-
-
-//动态获取json注册地图 
+//动态获取json注册地图
 const getGeojson = (regionId: string) => {
   return new Promise<boolean>((resolve, reject) => {
     import(`./mapGeojson/${regionId}.json`).then(data => {
@@ -81,58 +65,52 @@ const getGeojson = (regionId: string) => {
     })
   })
 }
-//异步时先注册空的
+//异步时先注册空的 保证初始化不报错
 registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
-//保证初始化不报错
-const registerMapModulesAsync= async ()=>{
+// 进行更换初始化地图
+const registerMapInitAsync = async () => {
+  await nextTick()
   await getGeojson(props.chartConfig.option.mapRegion.adcode)
-  //触发option 变动
-  props.chartConfig.option.mapRegion.adcodeFlag=!props.chartConfig.option.mapRegion.adcodeFlag
-  updateOptions()
+  vEchartsSetOption()
 }
-registerMapModulesAsync()
-
+registerMapInitAsync()
 const updateOptions = async () => {
   option.value = props.chartConfig.option
 }
-// 更换地图
-const mapGeoHandle = (regionId: string) => {
-  props.chartConfig.option.geo.map = regionId
-  props.chartConfig.option.series.forEach((item: any) => {
-    if (item.type === 'map') item.map = regionId
-  })
-  updateOptions()
+const vEchartsSetOption =()=>{
+  vChartRef.value?.setOption(props.chartConfig.option)
 }
 const dataSetHandle = async (dataset: any) => {
   props.chartConfig.option.series.forEach((item: any) => {
     if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
     else if (item.type === 'map' && dataset.point) item.data = dataset.map
   })
-  option.value = props.chartConfig.option
+  updateOptions()
 }
+// 更换地图
+const mapGeoHandle = async (regionId: string) => {
+  await getGeojson(regionId)
+  props.chartConfig.option.geo.map = regionId
+  props.chartConfig.option.series.forEach((item: any) => {
+    if (item.type === 'map') item.map = regionId
+  })
+  updateOptions()
+}
+
 //是否显示南海群岛
 const mapTypeHandle = async (show: boolean) => {
   if (show) {
-    await getGeojson("china")
-    // registerMap('china', { geoJSON:  mapJsonModules["china"] as any, specialAreas: {} })
-    props.chartConfig.option.mapRegion.adcodeFlag=!props.chartConfig.option.mapRegion.adcodeFlag
+    await getGeojson('china')
   } else {
     registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
   }
-
-  updateOptions()
+  vEchartsSetOption()
 }
 //层级发生变化
 const mapZoomHandle = async (newData: number) => {
-  props.chartConfig.option.geo.zoom = newData
+  props.chartConfig.option.series[1].zoom = newData
   updateOptions()
 }
-//区域发生变化
-const mapRegionHandle = async (newData: string) => {
-  await getGeojson(newData)
-  // registerMapModules()
-  mapGeoHandle(newData)
-}
 
 //监听数据发生变化
 watch(
@@ -147,35 +125,32 @@ watch(
 )
 //监听是否显示南海群岛
 watch(
-  () => props.chartConfig.option.series[1].itemStyle.showHainanIsLands,
+  () => props.chartConfig.option.mapRegion.showHainanIsLands,
   newData => {
     mapTypeHandle(newData)
   },
   {
-    deep: true,
-    immediate: true
+    deep: false
   }
 )
 //监听地图区域发生变化
 watch(
   () => props.chartConfig.option.mapRegion.adcode,
   newData => {
-    mapRegionHandle(newData)
+    mapGeoHandle(newData)
   },
   {
-    deep: true,
-    immediate: true
+    deep: false
   }
 )
 //监听大小发生变化
 watch(
-  () => props.chartConfig.option.series[1].zoom,
+  () => props.chartConfig.option.geo.zoom,
   newData => {
     mapZoomHandle(newData)
   },
   {
-    deep: true,
-    immediate: true
+    deep: false
   }
 )