From 73ceca747744998286a8131f12aa45f229dbf5a0 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Sat, 25 Dec 2021 14:42:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=B0=E5=9B=BE=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E9=87=8D=E7=BD=AE=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/chart/components/ChartComponent.vue | 151 ++++++++++++++---- 1 file changed, 116 insertions(+), 35 deletions(-) diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index 995784ef4e..c489fd602c 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -1,7 +1,27 @@ @@ -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) } } } +