fix: 完善地图组件的联动和被联动功能；地图新增联动属性：点击的地图名称

data-room-ui/packages/BasicComponents/Map/index.vue

@@ -3,7 +3,7 @@
     class="bs-design-wrap bs-bar"
     style="width: 100%; height: 100%"
   >
-    <el-button v-if="currentDeep > 0" class="button" type='text' @click="jumpTo(config)"> 返回上一级</el-button>
+    <el-button v-if="currentDeep > 0" class="button" type='text' @click="backToPreviousLevel(config)"> 返回上一级</el-button>
     <div
       :id="`chart${config.code}`"
       style="width: 100%; height: 100%"
@@ -83,12 +83,20 @@ export default {
         })
       }
     },
+    /**
+     * 数据格式化
+     * 该方法继承自commonMixins
+     * @param {*} config
+     * @param {Array} data
+     */
     dataFormatting(config, data) {
       const dataList = []
       data?.data?.forEach(item => {
         dataList.push({
           name: item[config.customize.name],
-          value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]]
+          value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]],
+          // 原始数据
+          originData: item
         })
       })
       config.option = {
@@ -97,23 +105,127 @@ export default {
       }
       return config
     },
-    async jumpTo(config) {
+    /**
+     * 返回上一级
+     * @param {*} config
+     */
+    async backToPreviousLevel(config) {
       this.currentDeep--
       let map = this.mapList[this.currentDeep]
       // 移除mapList中的最后一个元素
       this.mapList.pop()
       let mapData = JSON.parse(map.geoJson)
       this.option.geo.map = map.name;
-      this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
+      // this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
       echarts.registerMap(map.name, mapData);
       this.charts.setOption(this.option, true);
     },
+    /**
+     * 修改地图数据
+     * @param {Array} data
+     */
+    changeMapData(data) {
+      this.option.series[0].data = data
+      this.charts.setOption(this.option)
+    },
+    /**
+     * 初始化地图
+     * 该方法继承自commonMixins
+     * @param {*} config
+     */
     async newChart(config) {
-      let center1 = config.customize.center1 ? config.customize.center1 + '%' : '50%'
-      let center2 = config.customize.center2 ? config.customize.center2 + '%' : '50%'
       this.charts = echarts.init(
         document.getElementById(`chart${this.config.code}`)
       )
+      // 处理option，将配置项转换为echarts的option
+      this.handleOption(config)
+      let hasMapId = !!config.customize.mapId
+      // 根据mapId获取地图数据
+      let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
+      // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
+      if (!hasMapId) {
+        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/default/chinaMap.country/中华人民共和国`
+      }
+      const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
+      const map = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp
+      if (hasMapId && mapResp.data.uploadedGeoJson !== 1) {
+        // 没有上传过geoJson
+        this.$message({
+          message: '请先上传地图数据',
+          type: 'warning'
+        })
+        return
+      }
+      this.mapList.push(mapResp.data)
+      echarts.registerMap(config.customize.scope, map)
+      this.charts.setOption(this.option)
+      // 注册点击事件
+      this.registerClickEvent(config)
+    },
+    /**
+     * 处理配置项option
+     * @param {*} config
+     */
+    handleOption(config) {
+      let center1 = config.customize.center1 ? config.customize.center1 + '%' : '50%'
+      let center2 = config.customize.center2 ? config.customize.center2 + '%' : '50%'
+      let scatterSeries = {
+        type: 'scatter',
+        // 坐标系类型
+        coordinateSystem: 'geo',
+        // 标记符号形状 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+        symbol: config.customize.scatterSymbol ? config.customize.scatterSymbol : 'pin',
+        // 是否允许图例和散点图之间的联动效果
+        legendHoverLink: true,
+        // 散点图标记符号的大小，[宽度,高度]
+        symbolSize: config.customize.scatterSize ? [config.customize.scatterSize, config.customize.scatterSize] : [40, 40],
+        // 触发特效的方式
+        showEffectOn: 'render',
+        rippleEffect: {
+          brushType: 'stroke'
+        },
+        hoverAnimation: true,
+        zlevel: 11,
+        // 这里渲染标志里的内容以及样式
+        label: {
+          show: config.customize.hasOwnProperty('showScatterValue') ? config.customize.showScatterValue : true,
+          formatter(value) {
+            return value.data.value[2]
+          },
+          color: config.customize.scatterColor
+        },
+        // 标志的样式
+        itemStyle: {
+          normal: {
+            color: config.customize.scatterBackgroundColor,
+            shadowBlur: 2,
+            shadowColor: 'D8BC37'
+          }
+        },
+        data: config.option?.data
+      }
+      let mapSeries = {
+        type: 'map',
+        map: config.customize.scope,
+        geoIndex: 0,
+        roam: false,
+        zoom: 1.5,
+        center: [105, 36],
+        showLegendSymbol: false, // 存在legend时显示
+        data: config.option?.data,
+        tooltip: {
+          formatter(params) {
+            return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${
+              params.name
+            }</p>
+                <div style="line-height:22px;margin-top:5px">${config.customize.tooltipTitle ? config.customize.tooltipTitle : 'GDP'}<span style="margin-left:12px;color:#fff;float:right">${
+              params.data?.value[2] || '--'
+            }</span></div>`
+          },
+          show: true
+        }
+      }
+      let series = config.customize.scatter ? [ scatterSeries ] : [ mapSeries ]
       this.option = {
         // 背景颜色
         backgroundColor: config.customize.backgroundColor,
@@ -194,90 +306,22 @@ export default {
             color: config.customize.rangeColor
           }
         },
-        series: config.customize.scatter
+        series: series
-          ? [
-            {
-              type: 'scatter',
-              // 坐标系类型
-              coordinateSystem: 'geo',
-              // 标记符号形状 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
-              symbol: config.customize.scatterSymbol ? config.customize.scatterSymbol : 'pin',
-              // 是否允许图例和散点图之间的联动效果
-              legendHoverLink: true,
-              // 散点图标记符号的大小，[宽度,高度]
-              symbolSize: config.customize.scatterSize ? [config.customize.scatterSize, config.customize.scatterSize] : [40, 40],
-              // 触发特效的方式
-              showEffectOn: 'render',
-              rippleEffect: {
-                brushType: 'stroke'
-              },
-              hoverAnimation: true,
-              zlevel: 11,
-              // 这里渲染标志里的内容以及样式
-              label: {
-                show: config.customize.hasOwnProperty('showScatterValue') ? config.customize.showScatterValue : true,
-                formatter(value) {
-                  return value.data.value[2]
-                },
-                color: config.customize.scatterColor
-              },
-              // 标志的样式
-              itemStyle: {
-                normal: {
-                  color: config.customize.scatterBackgroundColor,
-                  shadowBlur: 2,
-                  shadowColor: 'D8BC37'
-                }
-              },
-              data: config.option?.data
-            }
-          ]
-          : [
-            {
-              type: 'map',
-              map: config.customize.scope,
-              geoIndex: 0,
-              roam: false,
-              zoom: 1.5,
-              center: [105, 36],
-              showLegendSymbol: false, // 存在legend时显示
-              data: config.option?.data,
-              tooltip: {
-                formatter(params) {
-                  return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${
-                    params.name
-                  }</p>
-                <div style="line-height:22px;margin-top:5px">${config.customize.tooltipTitle ? config.customize.tooltipTitle : 'GDP'}<span style="margin-left:12px;color:#fff;float:right">${
-                    params.data?.value[2] || '--'
-                  }</span></div>`
-                },
-                show: true
-              }
-            }
-          ]
-      }
-      let hasMapId = !!config.customize.mapId
-      // 根据mapId获取地图数据
-      let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
-      // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
-      if (!hasMapId) {
-        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/default/chinaMap.country/中华人民共和国`
-      }
-      const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
-      const map = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp
-      if (hasMapId && mapResp.data.uploadedGeoJson !== 1) {
-        // 没有上传过geoJson
-        this.$message({
-          message: '请先上传地图数据',
-          type: 'warning'
-        })
-        return
       }
-      this.mapList.push(mapResp.data)
+    },
-      echarts.registerMap(config.customize.scope, map)
+
-      this.charts.setOption(this.option)
+    /**
-      // 点击下钻
+     * 注册点击事件
+     * @param config 地图组件配置项
+     */
+    registerClickEvent(config) {
       this.charts.on('click', async (params) => {
+        let data = params?.data?.originData
+        if (data) {
+          this.linkage({...data, clickAreaName: params.name})
+        } else {
+          this.linkage({clickAreaName: params.name})
+        }
         if (params.name == '') return
         if (!config.customize.down) {
           return
@@ -306,12 +350,14 @@ export default {
         }
         this.currentDeep++
         this.mapList.push(downMap)
-        this.changeData({...config, customize: {...config.customize, scope: params.name}})
+        // this.changeData({...config, customize: {...config.customize, scope: params.name}})
         this.option.geo.map = params.name
         echarts.registerMap(params.name, geoJsonObj);
         this.charts.setOption(this.option, true);
       });
-    }
+    },
+
+
   }
 }
 </script>

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -968,6 +968,9 @@ export default {
       if (['input', 'timePicker', 'dateTimePicker'].includes(this.config.type)) {
         modifiedList.push({ label: '当前组件值', value: this.config.code })
       }
+      if (['map', 'flyMap'].includes(this.config.type)) {
+        modifiedList.push({ label: '点击区域名称', value: 'clickAreaName' })
+      }
       return modifiedList
     }
   },

data-room-ui/packages/js/mixins/commonMixins.js

@@ -195,6 +195,7 @@ export default {
     /**
      * @description: 更新chart
      * @param {Object} config
+     * @param {Array} filterList
      */
     changeData (config, filterList) {
       const list = config?.paramsList?.map((item) => {
@@ -264,6 +265,10 @@ export default {
               this.chart.changeData(config.option.data)
             }
           }
+          if (this.charts) {
+            // 地图组件的被联动更新
+            this.changeMapData(config.option.data)
+          }
         }).catch(err => {
           console.info(err)
         }).finally(() => {