dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1519 from dataease/pr@dev@feat_map_zoom_box

Browse Source 
feat: 地图增加缩放重置按钮
This commit is contained in:
fit2cloud-chenyw 2021-12-25 14:43:12 +08:00 committed by GitHub
commit 0263d2ce45
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 116 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -1,7 +1,27 @@
<template>
<div style="display: flex;">
<view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
<view-track-bar
ref="viewTrack"
:track-menu="trackMenu"
class="track-bar"
:style="trackBarStyleTime"
@trackClick="trackClick"
/>
<div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
<div v-if="chart.type === 'map'" class="map-zoom-box">
<div style="margin-bottom: 20px;">
<el-button size="mini" icon="el-icon-plus" circle @click="roamMap(true)" />
</div>
<div style="margin-bottom: 20px;">
<el-button size="mini" icon="el-icon-refresh" circle @click="resetZoom()" />
</div>
<div>
<el-button size="mini" icon="el-icon-minus" circle @click="roamMap(false)" />
</div>
</div>
</div>
</template>
@ -19,24 +39,55 @@ import {
BASE_TREEMAP,
BASE_MIX
} from '../chart/chart'
import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
import { baseLineOption, stackLineOption } from '../chart/line/line'
import { basePieOption, rosePieOption } from '../chart/pie/pie'
import { baseMapOption } from '../chart/map/map'
import { baseFunnelOption } from '../chart/funnel/funnel'
import { baseRadarOption } from '../chart/radar/radar'
import { baseGaugeOption } from '../chart/gauge/gauge'
import { baseScatterOption } from '../chart/scatter/scatter'
import { baseTreemapOption } from '../chart/treemap/treemap'
import { baseMixOption } from '@/views/chart/chart/mix/mix'
// import eventBus from '@/components/canvas/utils/eventBus'
import { uuid } from 'vue-uuid'
import { geoJson } from '@/api/map/map'
import {
baseBarOption,
stackBarOption,
horizontalBarOption,
horizontalStackBarOption
} from '../chart/bar/bar'
import {
baseLineOption,
stackLineOption
} from '../chart/line/line'
import {
basePieOption,
rosePieOption
} from '../chart/pie/pie'
import {
baseMapOption
} from '../chart/map/map'
import {
baseFunnelOption
} from '../chart/funnel/funnel'
import {
baseRadarOption
} from '../chart/radar/radar'
import {
baseGaugeOption
} from '../chart/gauge/gauge'
import {
baseScatterOption
} from '../chart/scatter/scatter'
import {
baseTreemapOption
} from '../chart/treemap/treemap'
import {
baseMixOption
} from '@/views/chart/chart/mix/mix'
// import eventBus from '@/components/canvas/utils/eventBus'
import {
uuid
} from 'vue-uuid'
import {
geoJson
} from '@/api/map/map'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
export default {
name: 'ChartComponent',
components: { ViewTrackBar },
components: {
ViewTrackBar
},
props: {
chart: {
type: Object,
@ -110,7 +161,9 @@ export default {
// 基于准备好的dom，初始化echarts实例
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
const that = this
new Promise((resolve) => { resolve() }).then(() => {
new Promise((resolve) => {
resolve()
}).then(() => {
// 此dom为echarts图标展示dom
this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
if (!this.myChart) {
@ -193,25 +246,25 @@ export default {
},
registerDynamicMap(areaCode) {
this.dynamicAreaCode = areaCode
// if (this.$store.getters.geoMap[areaCode]) {
// const json = this.$store.getters.geoMap[areaCode]
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', json)
// return
// }
// geoJson(areaCode).then(res => {
// this.$store.dispatch('map/setGeo', {
// key: areaCode,
// value: res
// }).then(() => {
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', res)
// })
// }).catch(() => {
// this.downOrUp = true
// })
// if (this.$store.getters.geoMap[areaCode]) {
// const json = this.$store.getters.geoMap[areaCode]
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', json)
// return
// }
// geoJson(areaCode).then(res => {
// this.$store.dispatch('map/setGeo', {
// key: areaCode,
// value: res
// }).then(() => {
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', res)
// })
// }).catch(() => {
// this.downOrUp = true
// })
},
initMapChart(geoJson, chart) {
@ -284,11 +337,39 @@ export default {
default:
break
}
},
roamMap(flag) {
let targetZoom = 1
const zoom = this.myChart.getOption().series[0].zoom
if (flag) {
targetZoom = zoom * 1.2
} else {
targetZoom = zoom / 1.2
}
const options = JSON.parse(JSON.stringify(this.myChart.getOption()))
options.series[0].zoom = targetZoom
this.myChart.setOption(options)
},
resetZoom() {
const options = JSON.parse(JSON.stringify(this.myChart.getOption()))
options.series[0].zoom = 1
this.myChart.setOption(options)
}
}
}
</script>
<style scoped>
.map-zoom-box {
position: absolute;
z-index: 999;
right: 2%;
top: 5%;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
text-align: center;
padding: 5px;
border-radius: 5px
}
</style>