feat:overview地图增加加减控制缩放
This commit is contained in:
@@ -2050,3 +2050,25 @@ li{
|
||||
max-width: 500px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,6 +74,12 @@
|
||||
this.legend=legend.filter((item,index)=>index<this.dataSize);
|
||||
this.resize();
|
||||
},
|
||||
getOption:function(){
|
||||
return this.chart.getOption();
|
||||
},
|
||||
setOption:function(option){
|
||||
this.chart.setOption(option)
|
||||
},
|
||||
setSeries:function(series, legend, legendData){
|
||||
if(!this.chart){
|
||||
this.chartInit();
|
||||
|
||||
@@ -113,6 +113,11 @@
|
||||
<div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
|
||||
<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>
|
||||
<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>
|
||||
@@ -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) {
|
||||
if (type == 'difference') { //两个数组的差集
|
||||
return trendSelectDifference(param1, param2);
|
||||
|
||||
Reference in New Issue
Block a user