From 43faf11d9bcd07caa1993f5fe9636acc09d6c9e4 Mon Sep 17 00:00:00 2001 From: "hong.yang" Date: Mon, 4 Dec 2023 11:16:35 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E8=81=94=E5=8A=A8=E5=92=8C=E8=A2=AB?= =?UTF-8?q?=E8=81=94=E5=8A=A8=E5=8A=9F=E8=83=BD=EF=BC=9B=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=81=94=E5=8A=A8=E5=B1=9E=E6=80=A7=EF=BC=9A?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E7=9A=84=E5=9C=B0=E5=9B=BE=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../packages/BasicComponents/Map/index.vue | 226 +++++++++++------- .../RightSetting/DataSetting.vue | 3 + .../packages/js/mixins/commonMixins.js | 5 + 3 files changed, 144 insertions(+), 90 deletions(-) diff --git a/data-room-ui/packages/BasicComponents/Map/index.vue b/data-room-ui/packages/BasicComponents/Map/index.vue index ef972266..ee312215 100644 --- a/data-room-ui/packages/BasicComponents/Map/index.vue +++ b/data-room-ui/packages/BasicComponents/Map/index.vue @@ -3,7 +3,7 @@ class="bs-design-wrap bs-bar" style="width: 100%; height: 100%" > - 返回上一级 + 返回上一级
{ 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 `

${ + params.name + }

+
${config.customize.tooltipTitle ? config.customize.tooltipTitle : 'GDP'}${ + params.data?.value[2] || '--' + }
` + }, + 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 - ? [ - { - 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 `

${ - params.name - }

-
${config.customize.tooltipTitle ? config.customize.tooltipTitle : 'GDP'}${ - params.data?.value[2] || '--' - }
` - }, - 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 + series: series } - 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); }); - } + }, + + } } diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue index 1b4be6f2..04c4fba9 100644 --- a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue +++ b/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 } }, diff --git a/data-room-ui/packages/js/mixins/commonMixins.js b/data-room-ui/packages/js/mixins/commonMixins.js index d65e5d4c..1c704d5b 100644 --- a/data-room-ui/packages/js/mixins/commonMixins.js +++ b/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(() => {