修改 地图

src/components/echarts/MyEchart.vue

@@ -63,7 +63,7 @@ const initChart = () => {
         grid: {
             top: '50px',
             left: '10px',
-            right: '40px',
+            right: '60px',
             bottom: '40px',
             containLabel: true
         },

src/components/echarts/MyEchartMap.vue

@@ -8,8 +8,9 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
-import * as echarts from 'echarts'
-
+import * as echarts from 'echarts4'
+import { useDictData } from '@/stores/dictData'
+const dictData = useDictData()
 const props = defineProps(['options'])
 const myCharts = ref()
 const showCircle = ref(false)
@@ -21,7 +22,7 @@ const fetchConfig = async (name: string) => {
 }
 // fetchConfig()
 
-const emit = defineEmits(['getRegionByRegionId'])
+const emit = defineEmits(['getRegionByRegion'])
 onMounted(() => {})
 
 const GetEchar = async (name: string) => {
@@ -149,12 +150,28 @@ const GetEchar = async (name: string) => {
     myCharts.value.on('click', (e: any) => {
         if (name == '中国' && e.componentIndex == 0) {
             GetEchar(e.name)
+            MapReturn(e.name)
             showCircle.value = true
+            // console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~  MapReturn(e.name):', MapReturn(e.name))
         }
-
-        emit('getRegionByRegionId', e)
     })
 }
+
+const MapReturn = (name: string) => {
+    let area = dictData.state.area[0].children
+    let list = {}
+    // break;
+    for (let i = 0; i < area.length; i++) {
+        if (area[i].name == name) {
+            list = area[i]
+            break
+        } else {
+            list = dictData.state.area[0]
+        }
+    }
+
+    emit('getRegionByRegion', list)
+}
 // 返回
 const circle = () => {
     GetEchar('中国')
@@ -167,11 +184,11 @@ onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeHandler)
     myCharts.value?.dispose()
 })
+defineExpose({ GetEchar })
 watch(
     () => props.options,
     (newVal, oldVal) => {
-        GetEchar('中国')
-
+        // GetEchar('中国')
     }
 )
 </script>

src/components/form/area/index.vue

@@ -1,9 +1,9 @@
 <template>
-    <el-cascader v-bind='$attrs' :options='options' :props='cascaderProps' />
+    <el-cascader ref="cascader" v-bind="$attrs" :options="options" :props="cascaderProps" @change="change" />
 </template>
 
-<script lang='ts' setup>
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { defineComponent, ref } from 'vue'
 
 defineOptions({
     name: 'Area'
@@ -16,11 +16,19 @@ const cascaderProps = {
     checkStrictly: true,
     emitPath: false
 }
+const cascader = ref()
 const dictData = useDictData()
 const options = dictData.state.area
+const areaName = ref(dictData.state.area[0].name)
+const change = (e: any) => {
+    if (cascader.value.getCheckedNodes()[0].pathLabels.length == 1) {
+        areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[0]
+    } else if (cascader.value.getCheckedNodes()[0].pathLabels.length >= 2) {
+        areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1]
+    }
+}
 
+defineExpose({ areaName })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>