tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
hong.yang 1 year ago
parent 87e991ebf3
commit 43faf11d9b
3 changed files with 144 additions and 90 deletions
Show Stats Download Patch File Download Diff File

226
data-room-ui/packages/BasicComponents/Map/index.vue
Unescape Escape View File

@ -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
? [
{
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
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);
});
}
},
}
}
</script>

3
data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
Unescape Escape View File

@ -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
}
},

5
data-room-ui/packages/js/mixins/commonMixins.js
Unescape Escape View File

@ -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(() => {

Write Preview
Loading…
Cancel
Save