feat:overview地图增加加减控制缩放

This commit is contained in:
wangwenrui
2020-09-23 18:37:49 +08:00
parent 95e627ecb9
commit 9c59167cdd
3 changed files with 42 additions and 1 deletions

View File

@@ -2050,3 +2050,25 @@ li{
max-width: 500px; max-width: 500px;
line-height: 20px; line-height: 20px;
} }
.right-bottom-zoom{
position: absolute;
top: calc(100% - 100px);
left: calc(100% - 45px);
height: 90px;
width: 35px;
border: 1px solid #E7EAED;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
.zoom-option{
width: 100%;
height: 50%;
opacity: 0.42;
background: #FFF;
align-items: center;
display: flex;
justify-content: center;
}
.zoom-option:hover{
cursor: pointer;
}
}

View File

@@ -74,6 +74,12 @@
this.legend=legend.filter((item,index)=>index<this.dataSize); this.legend=legend.filter((item,index)=>index<this.dataSize);
this.resize(); this.resize();
}, },
getOption:function(){
return this.chart.getOption();
},
setOption:function(option){
this.chart.setOption(option)
},
setSeries:function(series, legend, legendData){ setSeries:function(series, legend, legendData){
if(!this.chart){ if(!this.chart){
this.chartInit(); this.chartInit();

View File

@@ -112,7 +112,12 @@
<div class="content-col-box"> <div class="content-col-box">
<div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div> <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
<div class="content-col-content"> <div class="content-col-content">
<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box> <chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
<div class="right-bottom-zoom">
<div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
<div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
<div></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1145,6 +1150,14 @@
} }
}); });
}, },
zoomMap:function(val){
let geo=this.$refs.dataCenterMap.getOption().geo;
if(geo&&geo.length>0){
let zoom=geo[0].zoom
this.$refs.dataCenterMap.setOption({geo:{zoom:zoom+val}})
}
console.log(geo)
},
trendTool(type, param1, param2, param3) { trendTool(type, param1, param2, param3) {
if (type == 'difference') { //两个数组的差集 if (type == 'difference') { //两个数组的差集
return trendSelectDifference(param1, param2); return trendSelectDifference(param1, param2);