diff --git a/plugin.xml b/plugin.xml index f1d5fd5..f0c925a 100644 --- a/plugin.xml +++ b/plugin.xml @@ -3,7 +3,7 @@ com.finebi.plugin.tptj.ivan.chart.demo.amap yes - 0.0.4 + 0.0.5 11.0~11.0 2021-08-30 DEMO @@ -13,6 +13,7 @@ 0.0.2: 图表DEMO_EK 数据处理接口
0.0.3: 图表DEMO_EK 页面刷新接口
0.0.4: 图表DEMO_EK 保存配置接口
+ 0.0.5: 图表DEMO_EK Click联动
]]> 6.0~ com.finebi.plugin.tptj.ivan.chart.demo.amap diff --git a/src/main/java/com/finebi/plugin/tptj/ivan/chart/demo/amap/MapHotComponentProvider.java b/src/main/java/com/finebi/plugin/tptj/ivan/chart/demo/amap/MapHotComponentProvider.java index 26f4f7a..bf9e28c 100644 --- a/src/main/java/com/finebi/plugin/tptj/ivan/chart/demo/amap/MapHotComponentProvider.java +++ b/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; } /** diff --git a/src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/config/config.json b/src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/config/config.json index 63b6a9d..c3ccedf 100644 --- a/src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/config/config.json +++ b/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": [ diff --git a/src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/js/chart.js b/src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/js/chart.js index 65149fc..c9d807d 100644 --- a/src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/js/chart.js +++ b/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,58 +93,93 @@ saveSessionCallback(conf); extensionCallBack('refresh'); } - } - /** - * 自定义聚合点样式 - * @param context - * @private - */ - function _renderCarClusterMarker(context) { - let count = context.count; - let factor = context.count / count; - const div = document.createElement('div'); - const Hue = 180 - factor * 180; - let bgColor; - if (context.count < 10) { - bgColor = 'hsla(108,100%,40%,1)'; - } else if (context.count < 100) { - bgColor = 'hsl(201,100%,40%)'; - } else if (context.count < 1000) { - bgColor = 'hsla(36,100%,50%,1)'; - } else if (context.count < 10000) { - bgColor = 'hsla(0,100%,60%,1)'; - } else { - bgColor = 'hsla(0,100%,40%,1)'; + /** + * 自定义聚合点样式 + * @param context + * @private + */ + function _renderCarClusterMarker(context) { + let count = context.count; + let factor = context.count / count; + const div = document.createElement('div'); + const Hue = 180 - factor * 180; + let bgColor; + if (context.count < 10) { + bgColor = 'hsla(108,100%,40%,1)'; + } else if (context.count < 100) { + bgColor = 'hsl(201,100%,40%)'; + } else if (context.count < 1000) { + bgColor = 'hsla(36,100%,50%,1)'; + } else if (context.count < 10000) { + bgColor = 'hsla(0,100%,60%,1)'; + } else { + bgColor = 'hsla(0,100%,40%,1)'; + } + const fontColor = 'hsla(' + Hue + ',100%,90%,1)'; + const borderColor = bgColor; + const shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; + div.style.backgroundColor = bgColor; + const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); + div.style.width = div.style.height = size + 'px'; + div.style.border = 'solid 1px ' + borderColor; + div.style.borderRadius = size / 2 + 'px'; + div.style.boxShadow = '0 0 5px ' + shadowColor; + div.innerHTML = context.count; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); + context.marker.setContent(div) + } + + /** + * 自定义非聚合点样式 + * @param context + * @private + */ + function _renderMarker(context) { + var content = '
'; + 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 + ); + }) } - const fontColor = 'hsla(' + Hue + ',100%,90%,1)'; - const borderColor = bgColor; - const shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; - div.style.backgroundColor = bgColor; - const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); - div.style.width = div.style.height = size + 'px'; - div.style.border = 'solid 1px ' + borderColor; - div.style.borderRadius = size / 2 + 'px'; - div.style.boxShadow = '0 0 5px ' + shadowColor; - div.innerHTML = context.count; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); - context.marker.setContent(div) - } - /** - * 自定义非聚合点样式 - * @param context - * @private - */ - function _renderMarker(context) { - var content = '
'; - var offset = new AMap.Pixel(-9, -9); - context.marker.setContent(content) - context.marker.setOffset(offset) } /** @@ -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], }) } diff --git a/说明/0.0.5/0.0.5.zip b/说明/0.0.5/0.0.5.zip new file mode 100644 index 0000000..8918dc0 Binary files /dev/null and b/说明/0.0.5/0.0.5.zip differ diff --git a/说明/0.0.5/fine-plugin-com.finebi.plugin.tptj.ivan.chart.demo.amap-0.0.5.zip b/说明/0.0.5/fine-plugin-com.finebi.plugin.tptj.ivan.chart.demo.amap-0.0.5.zip new file mode 100644 index 0000000..a8f4e1c Binary files /dev/null and b/说明/0.0.5/fine-plugin-com.finebi.plugin.tptj.ivan.chart.demo.amap-0.0.5.zip differ