perf: 优化新地图组件

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

@@ -5,9 +5,9 @@
 
 <script setup lang="ts">
 import { PropType, reactive, watch, ref, nextTick } from 'vue'
-import config, { includes, MapDefaultConfig } from './config'
+import config, { includes } from './config'
 import VChart from 'vue-echarts'
-import { use, registerMap, getMap } from 'echarts/core'
+import { use, registerMap } from 'echarts/core'
 import { EffectScatterChart, MapChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
 import { useChartDataFetch } from '@/hooks'
@@ -15,7 +15,6 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
-
 import {
   DatasetComponent,
   GridComponent,
@@ -24,6 +23,7 @@ import {
   GeoComponent,
   VisualMapComponent
 } from 'echarts/components'
+
 const props = defineProps({
   themeSetting: {
     type: Object,
@@ -58,15 +58,17 @@ const vChartRef = ref<typeof VChart>()
 
 //动态获取json注册地图
 const getGeojson = (regionId: string) => {
-  return new Promise<boolean>((resolve, reject) => {
+  return new Promise<boolean>((resolve) => {
     import(`./mapGeojson/${regionId}.json`).then(data => {
       registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
       resolve(true)
     })
   })
 }
+
 //异步时先注册空的 保证初始化不报错
 registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+
 // 进行更换初始化地图
 const registerMapInitAsync = async () => {
   await nextTick()
@@ -74,45 +76,25 @@ const registerMapInitAsync = async () => {
   vEchartsSetOption()
 }
 registerMapInitAsync()
-const updateOptions = async () => {
+
+// 手动触发渲染
+const vEchartsSetOption = () => {
   option.value = props.chartConfig.option
-}
-const vEchartsSetOption =()=>{
   vChartRef.value?.setOption(props.chartConfig.option)
 }
-const dataSetHandle = async (dataset: any) => {
+
+// 更新数据处理
+ 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
+    else if (item.type === 'map' && dataset.map) item.data = dataset.map
   })
-  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()
+  if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
+
+  isPreview() && vEchartsSetOption()
 }
 
-//是否显示南海群岛
-const mapTypeHandle = async (show: boolean) => {
-  if (show) {
-    await getGeojson('china')
-  } else {
-    registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
-  }
-  vEchartsSetOption()
-}
-//层级发生变化
-const mapZoomHandle = async (newData: number) => {
-  props.chartConfig.option.series[1].zoom = newData
-  updateOptions()
-}
-
-//监听数据发生变化
+//监听 dataset 数据发生变化
 watch(
   () => props.chartConfig.option.dataset,
   newData => {
@@ -123,31 +105,33 @@ watch(
     deep: false
   }
 )
+
 //监听是否显示南海群岛
 watch(
   () => props.chartConfig.option.mapRegion.showHainanIsLands,
-  newData => {
-    mapTypeHandle(newData)
+  async newData => {
+    if (newData) {
+      await getGeojson('china')
+    } else {
+      registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
+    }
+    vEchartsSetOption()
   },
   {
     deep: false
   }
 )
-//监听地图区域发生变化
+
+//监听地图展示区域发生变化
 watch(
   () => props.chartConfig.option.mapRegion.adcode,
-  newData => {
-    mapGeoHandle(newData)
-  },
-  {
-    deep: false
-  }
-)
-//监听大小发生变化
-watch(
-  () => props.chartConfig.option.geo.zoom,
-  newData => {
-    mapZoomHandle(newData)
+  async newData => {
+    await getGeojson(newData)
+    props.chartConfig.option.geo.map = newData
+    props.chartConfig.option.series.forEach((item: any) => {
+      if (item.type === 'map') item.map = newData
+    })
+    vEchartsSetOption()
   },
   {
     deep: false
@@ -156,7 +140,6 @@ watch(
 
 // 预览
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  console.log('预览', newData)
   dataSetHandle(newData)
 })
 </script>