feat:overview地图增加加减控制缩放
This commit is contained in:
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user