地图放大功能开发

whyczyk

2021-10-14 36d078db470bf939ec47b6018ea40fa0b875e86e

地图放大功能开发

 src/components/charts/chinaMap.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper">
    <div class="echarts-wrapper" @dblclick="dblclick">
        <div class="echarts-content" ref="chart" id="cityChart">

        </div>
@@ -57,6 +57,8 @@
    chartData: "",
    data() {
        return {
            parentsStyle: {},
            isAllScreen: false,
            timers: null,
            mapName: 'zhongguo',
            mapInfoX: null,
@@ -82,6 +84,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
@@ -512,7 +549,6 @@
            );
        },
        outClear() {
            console.log(this.timers)
            window.removeEventListener('resize', this.resize);
            clearInterval(this.timers)
            this.timers = null