地图初始化

src/components/customCom/equipmentLeasing.vue

@@ -5,12 +5,12 @@
         </div>
         <div class="e_content">
             <div class="left_nav_list">
-                <div class="nav_item" v-for="(item, index) in navInfo.list" :key="index">
+                <div class="nav_item" v-for="(item, index) in navInfo.list" :key="index" @click="toNavItem(item)">
                     {{ item.text }}
                 </div>
             </div>
             <div class="right_map_container">
-                <mapEcharts :itemStyle="mapProps.itemStyle" :emphasisLabelStyle="mapProps.emphasisLabelStyle"
+                <mapEcharts ref="mapEchartsRef" :jsonData="mapProps.jsonData" :itemStyle="mapProps.itemStyle" :emphasisLabelStyle="mapProps.emphasisLabelStyle"
                     :emphasisItemStyle="mapProps.emphasisItemStyle" :labelInfo="mapProps.labelInfo"
                     :rippleEffect="mapProps.rippleEffect" :tooltipProps="mapProps.tooltipProps"
                     :tooltipFormat="mapProps.tooltipFormat" :itemColorFormat="mapProps.itemColorFormat"
@@ -52,49 +52,65 @@
 import { getImg } from "@/utils/index"
 import mapEcharts from "../echartsCom/mapEcharts.vue"
 import equipmentDialog from "./equipmentDialog.vue"
+import xnallJSON from './mapData/xnall.json'
+import gxJSON from './mapData/gx.json'
+import gdJSON from './mapData/gd.json'
+import gzJSON from './mapData/gz.json'
+import ynJSON from './mapData/yn.json'
+const mapEchartsRef = ref()
+ 
 const navInfo = reactive({
     list: [
         {
             text: "全部",
-            navId: ""
+            navId: "0",
+            jsonData:xnallJSON
         },
         {
             text: "广西电网",
-            navId: ""
+            navId: "1",
+            jsonData:gxJSON
         },
         {
             text: "广东电网",
-            navId: ""
+            navId: "2",
+            jsonData:gdJSON
         },
         {
             text: "贵州电网",
-            navId: ""
+            navId: "3",
+            jsonData:gzJSON
         },
         {
             text: "云南电网",
-            navId: ""
+            navId: "4",
+            jsonData:ynJSON
         },
         {
             text: "海南电网",
-            navId: ""
+            navId: "5",
+            jsonData:xnallJSON
         },
         {
             text: "储能公司",
-            navId: ""
+            navId: "6",
         },
         {
             text: "深圳供电局",
-            navId: ""
+            navId: "7"
         },
         {
             text: "超高压公司",
-            navId: ""
+            navId: "8"
         }
     ]
 })
 
 
 const mapProps = reactive({
+    idType:"0",
+    jsonData:{
+    },  
     itemStyle: {
         areaColor: '#186894',//区域颜色
         shadowColor: '#2894c9',//边缘阴影颜色
@@ -200,6 +216,17 @@ const mapDataByProvice = (provinceName: String) => {
     const curItem: any = listData.find(ele => ele.name == provinceName)
     return curItem
 }  
+
+const toNavItem=(item:any)=>{
+    console.log("item",item)
+    mapProps.jsonData= item.jsonData
+    mapProps.idType=item.navId
+    mapEchartsRef.value.chagneJSON(item)
+}
+
+onBeforeMount(()=>{
+    mapProps.jsonData= xnallJSON
+})
 </script>
 
 <style lang="scss" scoped>

src/components/echartsCom/mapEcharts.vue

@@ -1,16 +1,26 @@
 <template>
-    <div ref="mapEcharts" style="width: 100%;height: 100%;"></div>
+    <div :id="'mapEcharts'+idType" style="width: 100%;height: 100%;"></div>
 </template>
 
 <script setup lang="ts">
 import * as echarts from 'echarts'
-import gdGxJSON from './xnall.json'
+
 const mapEcharts = ref(null)
 const getImg = () => {
     return new URL(`/src/components/echartsCom/img/hover_bg.png`, import.meta.url).href;
 }
 
-const propsVal = defineProps({
+const propsVal:any = defineProps({
+    idType:{
+        type:String,
+        default:'0'
+    },
+    jsonData:{
+        type: Object,
+        default: {
+
+        }
+    },
     title: {//标题
         type: Object,
         default: {
@@ -80,9 +90,10 @@ const propsVal = defineProps({
     }
 })
 const initEcharts = () => {
-    echarts.registerMap('guangdong', gdGxJSON)
+    echarts.registerMap('guangdong', propsVal.jsonData)
     nextTick(() => {
-        const map = echarts.init(mapEcharts.value, null, {
+        const domitem= document.getElementById("mapEcharts"+propsVal.idType)
+        const map = echarts.init(domitem, null, {
             renderer: 'canvas',
         })
         const option = {
@@ -200,6 +211,17 @@ onMounted(() => {
     initEcharts()
 })
 
+const chagneJSON=(item:any)=>{
+    console.log("propsval", propsVal)
+    propsVal.idType=item.navId
+    setTimeout(()=>{
+        initEcharts()
+    })
+}
+defineExpose({
+    chagneJSON
+})
+
 </script>
 
 <style scoped>