emm...

src/views/screen/map/map.vue

@@ -1,11 +1,17 @@
 <template>
   <div style="width: 580px">
-    <div ref="charts" style="width: 100%; height: 850px"></div>
+    <div ref="charts" style="width: 100%;height: 900px;margin-top: -120px"></div>
     <img
-        id="mapBackground"
-        src="@/assets/images/main/map_bg.jpg"
-        alt=""
-        style="display: none"
+      id="mapBackground"
+      src="@/assets/images/main/map_bg.jpg"
+      alt=""
+      style="display: none"
+    />
+    <img
+      v-if="showBack"
+      @click="beBack"
+      src="@/assets/images/main/back.png"
+      style="width: 34px;height: 30px;cursor: pointer;position: absolute;right: 50px;bottom: 50px;"
     />
   </div>
 </template>
@@ -14,8 +20,37 @@
 <script>
 import * as echarts from "echarts";
 import shanxi from "./shanxi.json"
+import 大同市 from '@/views/screen/map/大同市.json'
+import 朔州市 from '@/views/screen/map/朔州市.json'
+import 忻州市 from '@/views/screen/map/忻州市.json'
+import 吕梁市 from '@/views/screen/map/吕梁市.json'
+import 太原市 from '@/views/screen/map/太原市.json'
+import 阳泉市 from '@/views/screen/map/阳泉市.json'
+import 晋中市 from '@/views/screen/map/晋中市.json'
+import 临汾市 from '@/views/screen/map/临汾市.json'
+import 长治市 from '@/views/screen/map/长治市.json'
+import 运城市 from '@/views/screen/map/运城市.json'
+import 晋城市 from '@/views/screen/map/晋城市.json'
 let imgElement
 export default {
+  data(){
+    return{
+      showBack: false,
+      dataSource: {
+        大同市: 大同市,
+        朔州市: 朔州市,
+        忻州市: 忻州市,
+        吕梁市: 吕梁市,
+        太原市: 太原市,
+        阳泉市: 阳泉市,
+        晋中市: 晋中市,
+        临汾市: 临汾市,
+        长治市: 长治市,
+        运城市: 运城市,
+        晋城市: 晋城市,
+      }
+    }
+  },
   created () {},
   mounted() {
     this.$nextTick(() => {
@@ -27,6 +62,19 @@ export default {
   },
   methods: {
     initCharts() {
+      const area = [
+        { name: "太原市", appOrg: "1A003" },
+        { name: "大同市", appOrg: "1B001" },
+        { name: "阳泉市", appOrg: "1C001" },
+        { name: "长治市", appOrg: "1D001" },
+        { name: "晋城市", appOrg: "1E001" },
+        { name: "朔州市", appOrg: "1F001" },
+        { name: "晋中市", appOrg: "1K001" },
+        { name: "临汾市", appOrg: "1L001" },
+        { name: "忻州市", appOrg: "1H001" },
+        { name: "运城市", appOrg: "1M001" },
+        { name: "吕梁市", appOrg: "1J001" }
+      ];
       const points = [
         { name: "太原市", coordinate: [112.4493, 37.8570], x: "1", y: "2" },
         { name: "大同市", coordinate: [113.3002, 40.0768], x: "1", y: "2" },
@@ -104,6 +152,7 @@ export default {
               fontWeight: 600, // 字重
               emphasis: { color: "#fff" }, // 悬浮时的文字颜色
             },
+            data: area
           },
 
           {
@@ -122,9 +171,97 @@ export default {
       };
       // 地图注册，第一个参数的名字必须和option.geo.map一致
       echarts.registerMap("shanxi",shanxi)
+      charts.setOption(option);
+      // 监听点击事件
+      charts.on("click", (params) => {
+        if (params.componentType === "geo") {
+          // 点击的是地图区域
+          console.log("Clicked map area: ", params.name);
+        } else if (params.componentType === "series") {
+          // 点击的是自定义图标（scatter）
+          console.log("Clicked scatter point: ", params.name, params.data.appOrg);
+          // 销毁当前图表实例
+          charts.dispose();
+          // 重新初始化并设置新的配置项
+          this.$nextTick(() => {
+            this.initChildren(params.name) // 重新初始化图表
+            this.showBack = true
+          });
+        }
+      });
+    },
+    initChildren(cityName){
+      const charts = echarts.init(this.$refs["charts"]);
+      const option = {
+        // 设置背景颜色，"transparent" 表示透明背景
+        backgroundColor: "transparent",
+
+        // 提示浮窗（Tooltip）配置
+        tooltip: {
+          show: true, // 是否显示 tooltip
+          trigger: "item", // 触发类型，"item" 表示鼠标悬浮在图形上时触发
+          formatter: `{b}`,
+          backgroundColor: "rgba(5,13,21,0.25)", // 提示框背景颜色（半透明黑色）
+          borderColor: "rgba(0, 0, 0, 0.16)", // 边框颜色
+          triggerOn: "mousemove", // 鼠标移动时触发
+          enterable: true, // 允许鼠标移动到 tooltip 内部（适用于可点击 tooltip）
+          textStyle: {
+            color: "#fff", // 文字颜色
+            fontSize: 12, // 字体大小
+            overflow: "break", // 文字超出时换行
+          },
+          padding: 3, // 提示框内边距
+        },
+
+        // 地理坐标系组件（用于地图绘制）
+        geo: {
+          map: "child", // 使用 "shanxi" 地图
+          zoom: 1.1, // 初始缩放比例（可调整地图大小）
+          itemStyle: {
+            borderColor: "#11F6F2", // 地图区域边界颜色
+            borderWidth: 5, // 边界宽度
+            shadowColor: "#0E7683", // 地图阴影颜色
+            shadowBlur: 0, // 阴影模糊度
+            shadowOffsetX: 5, // 阴影水平偏移
+            shadowOffsetY: 13, // 阴影垂直偏移
+          },
+          layoutCenter: ["50%", "50%"], // 控制地图的中心位置
+        },
 
+        // 图表数据系列（series）
+        series: [
+          {
+            type: "map", // 地图类型
+            map: "child", // 绑定的地图名称（与 `geo` 对应）
+            zoom: 1.1, // 缩放级别
+            itemStyle: {
+              areaColor: { image: imgElement, repeat: "no-repeat" }, // 地图区域背景颜色（使用图片填充）
+              borderColor: "#11F4F0", // 地图边界颜色
+              borderWidth: 1, // 地图边界宽度
+            },
+            emphasis: {
+              itemStyle: {
+                areaColor: "#0D7481", // 鼠标悬浮时的区域颜色
+              },
+            },
+            select: { disabled: true }, // 禁用地图的选中状态，防止点击后颜色锁定
+            label: {
+              show: true, // 显示区域名称
+              color: "#FFF", // 文字颜色
+              fontSize: 16, // 文字大小
+              fontWeight: 600, // 字重
+              emphasis: { color: "#fff" }, // 悬浮时的文字颜色
+            },
+          }
+        ]
+      };
+      echarts.registerMap("child", this.dataSource[cityName])
       charts.setOption(option);
     },
+    beBack(){
+      this.initCharts()
+      this.showBack = false
+    }
   },
 };
 </script>