{
- option.graphic.push({
- type: "text",
- left: `250px`,
- top: "5%",
- style: {
- text: '中国',
- font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
- fill: config.customize.fontGraphicColor,
- },
- onclick:async()=>{
- this.level='country'
- const index = option.graphic.findIndex(i => i.style.text === '中国');
- // 点击元素之后的所有元素全部删除
- option.graphic.splice(index + 1);
- const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
- const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
- option.geo.map = '中华人民共和国'
- this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
- echarts.registerMap('中华人民共和国', map);
- this.charts.setOption(option, true);
-
- }
- },)
- // })
- }
- this.charts.setOption(option)
+ this.charts.setOption(this.option)
this.charts.on('click', async(params)=> {
- const index = option.graphic.findIndex(i => i.style.text === params.name);
- if(params.name=='' || index !== -1) return
+ if(params.name=='') return
if(config.customize.down===false||this.level==='province') return
- const idx = option.graphic.length + 1;
- option.graphic.push({
- type: "text",
- left: `${idx * 250}px`,
- top: "5%",
- style: {
- text: params.name,
- font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
- fill: config.customize.fontGraphicColor,
- },
- onclick: async() => {
- const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
- const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
- // 利用函数的作用域，可以直接拿上面的name来用
- const index = option.graphic.findIndex(i => i.style.text === params.name);
- // 点击元素之后的所有元素全部删除
- option.graphic.splice(index + 1);
- // 很多操作重复了，你可以将公共部分抽离出来
- option.geo.map = params.name;
- this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
- echarts.registerMap(params.name, map);
- this.charts.setOption(option, true);
- },
- });
this.level='province'
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
- option.geo.map = params.name
+ this.option.geo.map = params.name
echarts.registerMap(params.name, map);
- this.charts.setOption(option, true);
+ this.charts.setOption(this.option, true);
});
})
}
@@ -317,4 +276,11 @@ export default {
.auto-theme {
background-color: rgba(0, 0, 0, 0);
}
+.bs-design-wrap{
+ position: relative;
+ .button{
+ position: absolute;
+ z-index: 999;
+ }
+}
diff --git a/data-room-ui/packages/BasicComponents/FlyMap/setting.vue b/data-room-ui/packages/BasicComponents/FlyMap/setting.vue
index ed96a6a4..28bc82c9 100644
--- a/data-room-ui/packages/BasicComponents/FlyMap/setting.vue
+++ b/data-room-ui/packages/BasicComponents/FlyMap/setting.vue
@@ -69,6 +69,7 @@
v-model="config.customize.dataMap"
popper-class="bs-el-select"
class="bs-el-select"
+ @change="changeMap"
>
-
-
+ -->
{
this.mapList = res
})
+ },
+ changeMap(val){
+ this.config.customize.scope=val.slice(0,-5)
},
changeLevel () {
if (this.config.customize.level === 'country') {
this.config.customize.dataMap = '中华人民共和国.json'
+ this.config.customize.scope='中国'
} else if (this.config.customize.level === 'province') {
this.getMapList()
this.config.customize.dataMap = '安徽省.json'
+ this.config.customize.scope='安徽省'
this.config.customize.down=false
}else{
+ this.config.customize.scope='世界'
this.config.customize.down=false
}
},
diff --git a/data-room-ui/packages/BasicComponents/Map/index.vue b/data-room-ui/packages/BasicComponents/Map/index.vue
index 1bf49012..dd44ab2b 100644
--- a/data-room-ui/packages/BasicComponents/Map/index.vue
+++ b/data-room-ui/packages/BasicComponents/Map/index.vue
@@ -3,6 +3,7 @@
style="width: 100%; height: 100%"
class="bs-design-wrap bs-bar"
>
+ 返回上一级
{
- option.graphic.push({
- type: "text",
- left: `220px`,
- top: "5%",
- style: {
- text: '中国',
- font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
- fill: config.customize.fontGraphicColor,
- },
- onclick:async()=>{
- this.level='country'
- const index = option.graphic.findIndex(i => i.style.text === '中国');
- // 点击元素之后的所有元素全部删除
- option.graphic.splice(index + 1);
- const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
- const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
- option.geo.map = '中华人民共和国'
- this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
- echarts.registerMap('中华人民共和国', map);
- this.charts.setOption(option, true);
-
- }
- },)
- // })
- }
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
echarts.registerMap(config.customize.scope, map)
- this.charts.setOption(option)
+ this.charts.setOption(this.option)
this.charts.on('click', async(params)=> {
- const index = option.graphic.findIndex(i => i.style.text === params.name);
- if(params.name=='' || index !== -1) return
+ if(params.name=='') return
if(config.customize.down===false||this.level==='province') return
- const idx = option.graphic.length + 1;
- option.graphic.push({
- type: "text",
- left: `${idx * 220}px`,
- top: "5%",
- style: {
- text: params.name,
- font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
- fill: config.customize.fontGraphicColor,
- },
- onclick: async() => {
- const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
- const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
- // 利用函数的作用域，可以直接拿上面的name来用
- const index = option.graphic.findIndex(i => i.style.text === params.name);
- // 点击元素之后的所有元素全部删除
- option.graphic.splice(index + 1);
- // 很多操作重复了，你可以将公共部分抽离出来
- option.geo.map = params.name;
- this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
- echarts.registerMap(params.name, map);
- this.charts.setOption(option, true);
- },
- });
this.level='province'
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
- option.geo.map = params.name
+ this.option.geo.map = params.name
echarts.registerMap(params.name, map);
- this.charts.setOption(option, true);
+ this.charts.setOption(this.option, true);
});
}
}
@@ -343,4 +302,11 @@ export default {
.auto-theme {
background-color: rgba(0, 0, 0, 0);
}
+.bs-design-wrap{
+ position: relative;
+ .button{
+ position: absolute;
+ z-index: 999;
+ }
+}
diff --git a/data-room-ui/packages/BasicComponents/Map/setting.vue b/data-room-ui/packages/BasicComponents/Map/setting.vue
index 244d5b13..42f4afd0 100644
--- a/data-room-ui/packages/BasicComponents/Map/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Map/setting.vue
@@ -65,6 +65,7 @@
v-model="config.customize.dataMap"
popper-class="bs-el-select"
class="bs-el-select"
+ @change="changeMap()"
>