0.0.5: 图表DEMO_EK Click联动

plugin.xml

@@ -3,7 +3,7 @@
     <id>com.finebi.plugin.tptj.ivan.chart.demo.amap</id>
     <name><![CDATA[图表DEMO_EK]]></name>
     <active>yes</active>
-    <version>0.0.4</version>
+    <version>0.0.5</version>
     <env-version>11.0~11.0</env-version>
     <jartime>2021-08-30</jartime>
     <vendor>DEMO</vendor>
@@ -13,6 +13,7 @@
       0.0.2: 图表DEMO_EK 数据处理接口<br/>
       0.0.3: 图表DEMO_EK 页面刷新接口<br/>
       0.0.4: 图表DEMO_EK 保存配置接口<br/>
+      0.0.5: 图表DEMO_EK Click联动<br/>
     ]]></change-notes>
     <bi-env-version>6.0~</bi-env-version>
     <main-package>com.finebi.plugin.tptj.ivan.chart.demo.amap</main-package>

src/main/java/com/finebi/plugin/tptj/ivan/chart/demo/amap/MapHotComponentProvider.java

@@ -85,7 +85,7 @@ public class MapHotComponentProvider extends AbstractCustomComponentProvider {
      */
     @Override
     public boolean needDataProcess(CustomComponentContext customComponentContext) {
-        return true;
+        return false;
     }
 
     /**

src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/config/config.json

@@ -1,12 +1,12 @@
 {
   "dataRegions": [
-    {
-      "name": "lat",
-      "text": "Plugin-DEMO_WEB_LAT"
-    },
     {
       "name": "lng",
       "text": "Plugin-DEMO_WEB_LNG"
+    },
+    {
+      "name": "lat",
+      "text": "Plugin-DEMO_WEB_LAT"
     }
   ],
   "attrRegions": [

src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/js/chart.js

@@ -15,12 +15,37 @@
         dom.style.width = document.body.clientWidth + "px";
         dom.style.height = document.body.clientHeight + "px";
 
+        const {
+            // 数据，若横纵轴多指标时图表属性有维度字段，dataModels 为以图表属性为分组的多组数据
+            dataModels,
+            // 横纵轴拖入字段的维度 id
+            dataMapping,
+            // 图表属性拖入字段的维度 id
+            chartAttrMapping,
+            // 图表点击值
+            clicked
+        } = data;
+
+        const {
+            // 组件 id
+            widgetId,
+            // 全局样式中图表最终样式
+            globalStyles,
+            // 图表属性配置所选值
+            chartAttr,
+            // 图表样式配置所选值
+            chartStyle,
+            // 图标属性中使用形状时的图标映射
+            symbolIconMap,
+            // 自定义保存的值(saveSessionCallback)
+            customConfig
+        } = config;
+
         // 获取配置项
-        const mapAttribute = config["chartStyle"]["mapProp"]["value"];
+        const mapAttribute = chartStyle["mapProp"]["value"];
 
         // 地图组件初始化
         let map;
-        let customConfig = config.customConfig;
         if (customConfig != null && JSON.stringify(customConfig).length > 2) {
             // 读取保存的配置
             map = new AMap.Map(dom, {
@@ -41,7 +66,7 @@
         map.setMapStyle(styleName);
 
         // 获取全部的经纬度点数据
-        const points = _getAllPoint(data.dataMapping, data.dataModels[0]);
+        const points = _getAllPoint(dataMapping, dataModels[0]);
 
         if (points != null) {
             // 创建聚合点图层
@@ -68,7 +93,6 @@
             saveSessionCallback(conf);
             extensionCallBack('refresh');
         }
-    }
 
         /**
          * 自定义聚合点样式
@@ -120,6 +144,42 @@
             var offset = new AMap.Pixel(-9, -9);
             context.marker.setContent(content)
             context.marker.setOffset(offset)
+            let datum = context.data[0];
+            let id = datum.idId;
+            const val = [
+                {
+                    dId: datum.idId,
+                    text: datum.idVal,
+                },
+                // {
+                //     dId: datum.lngId,
+                //     text: datum.lngVal,
+                // },
+                // {
+                //     dId: datum.latId,
+                //     text: datum.latVal,
+                // }
+            ];
+
+            /**
+             * dId: 当前维度的Id
+             * value: 当前维度和之前维度的id及对应值  (不是全部的维度信息！）
+             */
+            const currentClicked = {
+                dId: id,
+                value: val
+            };
+
+            context.marker.on('click', ev => {
+                debugger;
+                // 触发联动
+                extensionCallBack(
+                    'click',
+                    currentClicked
+                );
+            })
+        }
+
     }
 
     /**
@@ -130,8 +190,8 @@
      * @private
      */
     function _getAllPoint(dataMapping, dataModel) {
-        let lngId = dataMapping['lat'];
-        let latId = dataMapping['lng'];
+        let lngId = dataMapping['lng'];
+        let latId = dataMapping['lat'];
 
         let files = dataModel.fields;
         let rowCount = dataModel.rowCount
@@ -139,14 +199,16 @@
 
         let lngIndex;
         let latIndex;
+        let idIndex;
 
         // demo这里没有考虑多维度多指标的情况，具体根据实际情况进行修改
         files.forEach((item, index) => {
             if (lngId.indexOf(item.id) >= 0) {
                 lngIndex = index;
-            }
-            if (latId.indexOf(item.id) >= 0) {
+            } else if (latId.indexOf(item.id) >= 0) {
                 latIndex = index;
+            } else {
+                idIndex = index;
             }
         })
 
@@ -154,6 +216,12 @@
         for (let i = 0; i < rowCount; i++) {
             points.push({
                 lnglat: [colData[lngIndex][i], colData[latIndex][i]],
+                lngId: files[lngIndex].id,
+                latId: files[latIndex].id,
+                idId: files[idIndex].id,
+                lngVal: colData[lngIndex][i],
+                latVal: colData[latIndex][i],
+                idVal: colData[idIndex][i],
             })
         }