large-vue/src/views/screen/map/map.vue

<template>
  <div style="width: 680px">
    <div ref="charts" style="width: 100%;height: 920px;margin-top: -80px"></div>
    <img
      id="mapBackground"
      src="@/assets/images/main/map_bg.jpg"
      alt=""
      style="display: none"
    />
    <img
      v-if="showBack"
      @click="beBack(sign)"
      src="@/assets/images/main/back.png"
      style="width: 34px;height: 30px;cursor: pointer;position: absolute;right: 50px;bottom: 50px;"
    />
  </div>
</template>


<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'
import { getProjectByAppOrg } from '@/api/screen/service'
// 临汾市
import 安泽县 from "./临汾市/安泽县.json";
import 大宁县 from "./临汾市/大宁县.json";
import 汾西县 from "./临汾市/汾西县.json";
import 浮山县 from "./临汾市/浮山县.json";
import 古县 from "./临汾市/古县.json";
import 洪洞县 from "./临汾市/洪洞县.json";
import 侯马市 from "./临汾市/侯马市.json";
import 霍州市 from "./临汾市/霍州市.json";
import 吉县 from "./临汾市/吉县.json";
import 蒲县 from "./临汾市/蒲县.json";
import 曲沃县 from "./临汾市/曲沃县.json";
import 隰县 from "./临汾市/隰县.json";
import 乡宁县 from "./临汾市/乡宁县.json";
import 襄汾县 from "./临汾市/襄汾县.json";
import 尧都区 from "./临汾市/尧都区.json";
import 翼城县 from "./临汾市/翼城县.json";
import 永和县 from "./临汾市/永和县.json";
// 长治市
import 壶关县 from "./长治市/壶关县.json";
import 黎城县 from "./长治市/黎城县.json";
import 潞城区 from "./长治市/潞城区.json";
import 潞州区 from "./长治市/潞州区.json";
import 平顺县 from "./长治市/平顺县.json";
import 沁县 from "./长治市/沁县.json";
import 沁源县 from "./长治市/沁源县.json";
import 上党区 from "./长治市/上党区.json";
import 屯留区 from "./长治市/屯留区.json";
import 武乡县 from "./长治市/武乡县.json";
import 襄垣县 from "./长治市/襄垣县.json";
import 长子县 from "./长治市/长子县.json";
// 运城市
import 河津市 from "./运城市/河津市.json";
import 稷山县 from "./运城市/稷山县.json";
import 绛县 from "./运城市/绛县.json";
import 临猗县 from "./运城市/临猗县.json";
import 平陆县 from "./运城市/平陆县.json";
import 芮城县 from "./运城市/芮城县.json";
import 万荣县 from "./运城市/万荣县.json";
import 闻喜县 from "./运城市/闻喜县.json";
import 夏县 from "./运城市/夏县.json";
import 新绛县 from "./运城市/新绛县.json";
import 盐湖区 from "./运城市/盐湖区.json";
import 永济市 from "./运城市/永济市.json";
import 垣曲县 from "./运城市/垣曲县.json";
//晋城市
import 城区 from "./晋城市/城区.json";
import 高平市 from "./晋城市/高平市.json";
import 陵川县 from "./晋城市/陵川县.json";
import 沁水县 from "./晋城市/沁水县.json";
import 阳城县 from "./晋城市/阳城县.json";
import 泽州县 from "./晋城市/泽州县.json";
//吕梁市
import 方山县 from "./吕梁市/方山县.json";
import 汾阳市 from "./吕梁市/汾阳市.json";
import 交城县 from "./吕梁市/交城县.json";
import 交口县 from "./吕梁市/交口县.json";
import 岚县 from "./吕梁市/岚县.json";
import 离石区 from "./吕梁市/离石区.json";
import 临县 from "./吕梁市/临县.json";
import 柳林县 from "./吕梁市/柳林县.json";
import 娄烦县 from "./吕梁市/娄烦县.json";
import 石楼县 from "./吕梁市/石楼县.json";
import 文水县 from "./吕梁市/文水县.json";
import 孝义市 from "./吕梁市/孝义市.json";
import 兴县 from "./吕梁市/兴县.json";
import 中阳县 from "./吕梁市/中阳县.json";
//太原市
import 古交市 from "./太原市/古交市.json";
import 尖草坪区 from "./太原市/尖草坪区.json";
import 娄烦县2 from "./太原市/娄烦县.json";
import 清徐县 from "./太原市/清徐县.json";
import 万柏林区 from "./太原市/万柏林区.json";
import 小店区 from "./太原市/小店区.json";
import 杏花岭区 from "./太原市/杏花岭区.json";
import 阳曲县 from "./太原市/阳曲县.json";
import 迎泽区 from "./太原市/迎泽区.json";
//阳泉市
import 城区2 from "./阳泉市/城区.json";
import 郊区 from "./阳泉市/郊区.json";
import 矿区 from "./阳泉市/矿区.json";
import 平定县 from "./阳泉市/平定县.json";
import 盂县 from "./阳泉市/盂县.json";
//晋中市
import 和顺县 from "./晋中市/和顺县.json";
import 介休市 from "./晋中市/介休市.json";
import 灵石县 from "./晋中市/灵石县.json";
import 平遥县 from "./晋中市/平遥县.json";
import 祁县 from "./晋中市/祁县.json";
import 寿阳县 from "./晋中市/寿阳县.json";
import 太谷区 from "./晋中市/太谷区.json";
import 昔阳县 from "./晋中市/昔阳县.json";
import 榆次区 from "./晋中市/榆次区.json";
import 榆社县 from "./晋中市/榆社县.json";
import 左权县 from "./晋中市/左权县.json";
//大同市
import 广灵县 from "./大同市/广灵县.json";
import 浑源县 from "./大同市/浑源县.json";
import 灵丘县 from "./大同市/灵丘县.json";
import 平城区 from "./大同市/平城区.json";
import 天镇县 from "./大同市/天镇县.json";
import 新荣区 from "./大同市/新荣区.json";
import 阳高县 from "./大同市/阳高县.json";
import 云冈区 from "./大同市/云冈区.json";
import 云州区 from "./大同市/云州区.json";
import 左云县 from "./大同市/左云县.json";
//朔州市
import 怀仁市 from "./朔州市/怀仁市.json";
import 平鲁区 from "./朔州市/平鲁区.json";
import 山阴县 from "./朔州市/山阴县.json";
import 朔城区 from "./朔州市/朔城区.json";
import 应县 from "./朔州市/应县.json";
import 右玉县 from "./朔州市/右玉县.json";
//忻州市
import 保德县 from "./忻州市/保德县.json";
import 代县 from "./忻州市/代县.json";
import 定襄县 from "./忻州市/定襄县.json";
import 繁峙县 from "./忻州市/繁峙县.json";
import 河曲县 from "./忻州市/河曲县.json";
import 静乐县 from "./忻州市/静乐县.json";
import 岢岚县 from "./忻州市/岢岚县.json";
import 宁武县 from "./忻州市/宁武县.json";
import 偏关县 from "./忻州市/偏关县.json";
import 神池县 from "./忻州市/神池县.json";
import 五台县 from "./忻州市/五台县.json";
import 五寨县 from "./忻州市/五寨县.json";
import 忻府区 from "./忻州市/忻府区.json";
import 原平市 from "./忻州市/原平市.json";
let imgElement
export default {
  props: {
    list1: Array,
    list2: Array
  },
  data(){
    return{
      backName: null,
      backAppOrg: null,
      sign: null,
      projectList: [],
      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" }
      ],
      points: [
        { name: "太原市", coordinate: [111.8493, 37.9570], appOrg: "1A003", x: "1", y: "2" },
        { name: "大同市", coordinate: [113.3002, 40.0768], appOrg: "1B001", x: "1", y: "2" },
        { name: "阳泉市", coordinate: [113.3805, 38.3563], appOrg: "1C001", x: "1", y: "2" },
        { name: "长治市", coordinate: [113.1163, 36.6254], appOrg: "1D001", x: "1", y: "2" },
        { name: "晋城市", coordinate: [112.2113, 35.4007], appOrg: "1E001", x: "1", y: "2" },
        { name: "朔州市", coordinate: [112.4329, 39.6312], appOrg: "1F001", x: "1", y: "2" },
        { name: "晋中市", coordinate: [113.3827, 37.1870], appOrg: "1K001", x: "1", y: "2" },
        { name: "临汾市", coordinate: [111.1286, 36.2582], appOrg: "1L001", x: "1", y: "2" },
        { name: "忻州市", coordinate: [112.7341, 38.3167], appOrg: "1H001", x: "1", y: "2" },
        { name: "运城市", coordinate: [111.0069, 35.4264], appOrg: "1M001", x: "1", y: "2" },
        { name: "吕梁市", coordinate: [111.1443, 37.1183], appOrg: "1J001", x: "1", y: "2" }
      ],
      appOrg: "10001",
      showBack: false,
      dataSource: {
        大同市: 大同市,
        朔州市: 朔州市,
        忻州市: 忻州市,
        吕梁市: 吕梁市,
        太原市: 太原市,
        阳泉市: 阳泉市,
        晋中市: 晋中市,
        临汾市: 临汾市,
        长治市: 长治市,
        运城市: 运城市,
        晋城市: 晋城市,

        安泽县: 安泽县,
        大宁县: 大宁县,
        汾西县: 汾西县,
        浮山县: 浮山县,
        古县:  古县 ,
        洪洞县: 洪洞县,
        侯马市: 侯马市,
        霍州市: 霍州市,
        吉县:  吉县 ,
        蒲县:  蒲县 ,
        曲沃县: 曲沃县,
        隰县:  隰县 ,
        乡宁县: 乡宁县,
        襄汾县: 襄汾县,
        尧都区: 尧都区,
        翼城县: 翼城县,
        永和县: 永和县,

        壶关县: 壶关县,
        黎城县: 黎城县,
        潞城区: 潞城区,
        潞州区: 潞州区,
        平顺县: 平顺县,
        沁县: 沁县 ,
        沁源县: 沁源县,
        上党区: 上党区,
        屯留区: 屯留区,
        武乡县: 武乡县,
        襄垣县: 襄垣县,
        长子县: 长子县,

        河津市: 河津市,
        稷山县: 稷山县,
        绛县:  绛县 ,
        临猗县: 临猗县,
        平陆县: 平陆县,
        芮城县: 芮城县,
        万荣县: 万荣县,
        闻喜县: 闻喜县,
        夏县:  夏县 ,
        新绛县: 新绛县,
        盐湖区: 盐湖区,
        永济市: 永济市,
        垣曲县: 垣曲县,

        城区: 城区 ,
        高平市: 高平市,
        陵川县: 陵川县,
        沁水县: 沁水县,
        阳城县: 阳城县,
        泽州县: 泽州县,

        方山县: 方山县,
        汾阳市: 汾阳市,
        交城县: 交城县,
        交口县: 交口县,
        岚县: 岚县 ,
        离石区: 离石区,
        临县: 临县 ,
        柳林县: 柳林县,
        娄烦县: 娄烦县,
        石楼县: 石楼县,
        文水县: 文水县,
        孝义市: 孝义市,
        兴县: 兴县 ,
        中阳县: 中阳县,

        古交市: 古交市 ,
        尖草坪区: 尖草坪区,
        娄烦县2: 娄烦县2,
        清徐县: 清徐县 ,
        万柏林区: 万柏林区,
        小店区: 小店区 ,
        杏花岭区: 杏花岭区,
        阳曲县: 阳曲县 ,
        迎泽区: 迎泽区 ,

        城区2: 城区2,
        郊区: 郊区 ,
        矿区: 矿区 ,
        平定县: 平定县,
        盂县: 盂县 ,

        和顺县: 和顺县,
        介休市: 介休市,
        灵石县: 灵石县,
        平遥县: 平遥县,
        祁县: 祁县 ,
        寿阳县: 寿阳县,
        太谷区: 太谷区,
        昔阳县: 昔阳县,
        榆次区: 榆次区,
        榆社县: 榆社县,
        左权县: 左权县,

        广灵县: 广灵县,
        浑源县: 浑源县,
        灵丘县: 灵丘县,
        平城区: 平城区,
        天镇县: 天镇县,
        新荣区: 新荣区,
        阳高县: 阳高县,
        云冈区: 云冈区,
        云州区: 云州区,
        左云县: 左云县,

        怀仁市: 怀仁市,
        平鲁区: 平鲁区,
        山阴县: 山阴县,
        朔城区: 朔城区,
        应县: 应县 ,
        右玉县: 右玉县,

        保德县: 保德县,
        代县: 代县 ,
        定襄县: 定襄县,
        繁峙县: 繁峙县,
        河曲县: 河曲县,
        静乐县: 静乐县,
        岢岚县: 岢岚县,
        宁武县: 宁武县,
        偏关县: 偏关县,
        神池县: 神池县,
        五台县: 五台县,
        五寨县: 五寨县,
        忻府区: 忻府区,
        原平市: 原平市,
      }
    }
  },
  created () {},
  mounted() {},
  methods: {
    start(){
      this.$nextTick(() => {
        let i = 0
        for (let it of this.points){
          it.x = this.list1[i]
          it.y = this.list2[i]
          i++
        }
        imgElement = document.getElementById("mapBackground");
        setTimeout(() => {
          this.initCharts();
        }, 500);
      });
    },
    initCharts() {
      this.charts = echarts.init(this.$refs["charts"]);
      const option = {
        // 设置背景颜色，"transparent" 表示透明背景
        backgroundColor: "transparent",

        // 提示浮窗（Tooltip）配置
        tooltip: {
          show: true, // 是否显示 tooltip
          trigger: "item", // 触发类型，"item" 表示鼠标悬浮在图形上时触发
          formatter: (params) => // 格式化提示框内容
              params.seriesType === "scatter"
                  ? `在建项目：${params.data.x}<br/>施工项目：${params.data.y}`
                  : params.name, // 如果是 scatter 图表，显示额外数据，否则显示地区名称
          backgroundColor: "rgba(66,85,87,0.71)", // 提示框背景颜色（半透明黑色）
          borderColor: "rgba(56,236,250,0.6)", // 边框颜色
          borderWidth: 1,
          triggerOn: "mousemove", // 鼠标移动时触发
          enterable: true, // 允许鼠标移动到 tooltip 内部（适用于可点击 tooltip）
          textStyle: {
            color: "#fff", // 文字颜色
            fontSize: 12, // 字体大小
            overflow: "break", // 文字超出时换行
          },
          padding: [5, 10], // 提示框内边距
        },

        // 地理坐标系组件（用于地图绘制）
        geo: {
          map: "shanxi", // 使用 "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: "shanxi", // 绑定的地图名称（与 `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: 500, // 字重
              emphasis: { color: "#fff" }, // 悬浮时的文字颜色
            },
            data: this.area
          },

          {
            type: "scatter", // 散点图（用于标注特殊位置）
            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
            symbol: "image://" + require("@/assets/zhang/myMap/projectPosition.png"), // 自定义标记（图片）
            symbolSize: [30, 20], // 标记大小（宽 30，高 20）
            label: {
              show: true, // 直接显示数值
              position: 'top',
              formatter: (params) => // 格式化提示框内容
                params.seriesType === "scatter"
                  ? `{myStyle|在建：${params.data.x}}\n{myStyle|施工：${params.data.y}}`
                  : params.name,
              rich:{
                myStyle: {
                  color: "#fff", // 文字颜色
                  fontSize: 12, // 字体大小
                  lineHeight: 18
                }
              },
              borderColor: "rgba(56,236,250)", // 边框颜色
              backgroundColor: "#0E7884",
              borderWidth: 1,
              padding: [4, 5], // 文字内边距（可选）
              borderRadius: 2, // 文字框圆角（可选）
            },
            data: this.points.map(({ name, coordinate, appOrg, x, y }) => ({
              name, // 点名称
              value: coordinate, // 经纬度坐标
              appOrg,
              x, // 额外数据（在建项目数）
              y, // 额外数据（施工项目数）
            })),
          },
        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("shanxi",shanxi)
      this.charts.setOption(option);
      // 监听点击事件
      this.charts.on("click", (params) => {
        if (params.componentType === "geo") {
          // 点击的是地图区域
          console.log("Clicked map area: ", params.name);
        } else if (params.componentType === "series") {
          // 点击的是自定义图标（scatter）
          this.appOrg = params.data.appOrg
          this.$emit('transmit', this.appOrg)
          // 销毁当前图表实例
          this.charts.dispose();
          // 重新初始化并设置新的配置项
          this.$nextTick(() => {
            getProjectByAppOrg(this.appOrg).then((res) => {
              if (Number(res.code) === 200) {
                for (let it of res.data){
                  let coordinate = []
                  let obj = {}
                  coordinate.push(it.abscissa)
                  coordinate.push(it.ordinate)
                  obj.coordinate = coordinate
                  obj.name = it.projectName
                  obj.appOrg = it.appOrg
                  obj.subdivision = it.subdivision
                  this.projectList.push(obj)
                }
                this.sign = 1
                this.backAppOrg = this.appOrg
                this.initChildren(params.name) // 重新初始化图表
                this.showBack = true
              }
            })
          });
        }
      });
    },
    initChildren(cityName){
      this.backName = cityName
      this.childCharts = echarts.init(this.$refs["charts"]);
      const geoData = this.dataSource[cityName].features.map((feature) => ({
        name: feature.properties.name,
        value: feature.properties.appOrg,
        properties: feature.properties // 绑定 properties
      }));
      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: "#11F6F2", // 文字颜色
              fontSize: 12, // 文字大小
              emphasis: { color: "#11F6F2" }, // 悬浮时的文字颜色
            },
            data: geoData
          },
          {
            type: "scatter", // 散点图（用于标注特殊位置）
            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
            symbol: "image://" + require("@/assets/images/main/map/xian.png"), // 自定义标记
            symbolSize: 12, // 标记的大小
            data: this.projectList.filter(({ subdivision }) => subdivision <= 10).map(({ name, coordinate }) => ({
              name, // 点名称
              value: coordinate // 经纬度坐标
            })),
          },
          {
            type: "scatter", // 散点图（用于标注特殊位置）
            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
            symbol: 'circle', // 自定义标记
            symbolSize: 12, // 标记的大小
            itemStyle: {
              color: 'yellow'
            },
            data: this.projectList.filter(({ subdivision }) => subdivision > 10).map(({ name, coordinate }) => ({
              name, // 点名称
              value: coordinate // 经纬度坐标
            })),
          }
        ]
      };
      echarts.registerMap("child", this.dataSource[cityName])
      this.childCharts.setOption(option);
      this.childCharts.on("click", (params) => {
        if (params.componentType === "geo") {
          // 点击的是地图区域
          console.log("Clicked map area: ", params.name);
        } else if (params.componentType === "series") {
          // 点击的是自定义图标（scatter）
          console.log(params.data.value)
          this.appOrg = params.data.value
          this.$emit('transmit', this.appOrg)
          // 销毁当前图表实例
          this.childCharts.dispose();
          // 重新初始化并设置新的配置项
          this.$nextTick(() => {
            this.projectList = []
            getProjectByAppOrg(this.appOrg).then((res) => {
              if (Number(res.code) === 200) {
                for (let it of res.data){
                  let coordinate = []
                  let obj = {}
                  coordinate.push(it.abscissa)
                  coordinate.push(it.ordinate)
                  obj.coordinate = coordinate
                  obj.name = it.projectName
                  this.projectList.push(obj)
                }
                this.sign = 2
                this.initChildrenEx(params.name) // 重新初始化图表
                this.showBack = true
              }
            })
          });
        }
      });
    },
    initChildrenEx(cityName){
      this.childExCharts = 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: "childEx", // 使用 "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: "childEx", // 绑定的地图名称（与 `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: "#11F6F2", // 文字颜色
              fontSize: 12, // 文字大小
              emphasis: { color: "#11F6F2" }, // 悬浮时的文字颜色
            }
          },
          {
            type: "scatter", // 散点图（用于标注特殊位置）
            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
            symbol: 'circle', // 自定义标记
            symbolSize: 10, // 标记的大小
            itemStyle: {
              color: 'yellow'
            },
            data: this.projectList.map(({ name, coordinate }) => ({
              name, // 点名称
              value: coordinate // 经纬度坐标
            })),
          },
        ]
      };
      echarts.registerMap("childEx", this.dataSource[cityName])
      this.childExCharts.setOption(option);
    },
    beBack(sign){
      if (sign === 1){
        this.sign = 0
        this.projectList = []
        this.childCharts.dispose();
        this.initCharts()
        this.showBack = false
        this.appOrg = "10001"
        this.$emit('transmit', this.appOrg)
      }
      else {
        this.projectList = []
        this.childExCharts.dispose();
        this.appOrg = this.backAppOrg
        this.$emit('transmit', this.appOrg)
        this.$nextTick(() => {
          getProjectByAppOrg(this.appOrg).then((res) => {
            if (Number(res.code) === 200) {
              for (let it of res.data){
                let coordinate = []
                let obj = {}
                coordinate.push(it.abscissa)
                coordinate.push(it.ordinate)
                obj.coordinate = coordinate
                obj.name = it.projectName
                obj.appOrg = it.appOrg
                obj.subdivision = it.subdivision
                this.projectList.push(obj)
              }
              this.sign = 1
              this.initChildren(this.backName)
              this.showBack = true
            }
          })
        });
      }
    }
  },
};
</script>

<style scoped>

</style>