关于前端:echarts-实现中国地图-全屏

成果展现

HTML

<div class="dataView" ref="dataCenter">
  <div class="fullScreen">
      <img :src="fullIcon" @click.prevent="handleScreen" />
  </div>
  <div class="dataWrap">
    <div class="map-container" ref="chinaMap"></div>
  </div>
</div>

css

.dataView {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.map-container {
    width: 100%;
    height: 100%;
}
.fullScreen {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
    img {
        width: 100%;
        height: 100%;
    }
}

js
全屏图标需引入本人的图标

<script>
    import fullIcon from "@/assets/images/quanping.png";
    import unfullIcon from "@/assets/images/feiquanping.png";
    import "../../../node_modules/echarts/map/js/china.js";
    export default {data() {
            return {
                color: "#21EAFD",
                areaColor: "rgba(1, 113, 199, .7)",
                fullColor: "#0191e9",
                shadowColor: "rgba(107,91,237,.7)",
                mainColor: ["#55cea1", "#5689ef"],
                full: false, // true 全屏 false 勾销全屏
                fullIcon,
                chinaMap: "",
            };
        },
        created() {},
        mounted() {this.init();
            window.onresize = () => {
                // 动静扭转图表尺寸
                this.chinaMap.resize();};
        },
        methods: {init() {this.getMap();
            },
            // 全屏
            handleScreen() {
                this.fullIcon = this.full ? fullIcon : unfullIcon;
                this.full = !this.full;
                if (this.full) {
                    let ele = this.$refs.dataCenter,
                        reqFullScreen =
                            ele.requestFullScreen ||
                            ele.webkitRequestFullScreen ||
                            ele.mozRequestFullScreen ||
                            ele.msRequestFullscreen;
                    if (typeof reqFullScreen !== "undefined" && reqFullScreen) {reqFullScreen.call(ele);
                    }
                } else {if (document.exitFullscreen) {document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {document.msExitFullscreen();
                    }
                }
            },
            // 地图
            getMap() {this.chinaMap = this.$echarts.init(this.$refs.chinaMap);
                let option = {
                    title: {show: false,},
                    tooltip: {
                        trigger: "item",
                        showDelay: 0,
                        transitionDuration: 0.2,
                    },
                    series: [
                        {
                            name: "china PopEstimates",
                            type: "map",
                            map: "china",
                            scaleLimit: {
                                min: 1,
                                max: 4,
                            },
                            roam: true,
                            zoom: 1.2, // 地图缩放比例, 默认为 1
                            projection: {project: function(point) {return projection(point);
                                },
                                unproject: function(point) {return projection.invert(point);
                                },
                            },
                            itemStyle: {
                                // 地图区域的多边形 图形款式
                                normal: {
                                    // 是图形在默认状态下的款式
                                    label: {
                                        show: true, // 是否显示标签
                                        textStyle: {
                                            color: this.color,
                                            fontSize: 11,
                                        },
                                    },
                                    areaColor: this.areaColor,
                                    shadowColor: this.shadowColor,
                                    borderColor: this.color,
                                    shadowBlur: 5,
                                },
                            },
                            emphasis: {
                                itemStyle: {
                                    borderColor: this.fullColor,
                                    areaColor: this.color,
                                    borderWidth: 1,
                                    shadowBlur: 5,
                                    shadowColor: this.shadowColor,
                                },
                                label: {
                                    show: true,
                                    color: this.areaColor,
                                },
                            },
                            data: [{ name: "北京", value: 350000},
                                {name: "天津", value: 120000},
                                {name: "上海", value: 300000},
                                {name: "重庆", value: 92000},
                                {name: "河北", value: 25000},
                                {name: "河南", value: 20000},
                                {name: "云南", value: 500},
                                {name: "辽宁", value: 3050},
                                {name: "黑龙江", value: 80000},
                                {name: "湖南", value: 2000},
                                {name: "安徽", value: 24580},
                                {name: "山东", value: 40629},
                                {name: "新疆", value: 36981},
                                {name: "江苏", value: 13569},
                                {name: "浙江", value: 24956},
                                {name: "江西", value: 15194},
                                {name: "湖北", value: 41398},
                                {name: "广西", value: 41150},
                                {name: "甘肃", value: 17630},
                                {name: "山西", value: 27370},
                                {name: "内蒙古", value: 27370},
                                {name: "陕西", value: 97208},
                                {name: "吉林", value: 88290},
                                {name: "福建", value: 19978},
                                {name: "贵州", value: 94485},
                                {name: "广东", value: 89426},
                                {name: "青海", value: 35484},
                                {name: "西藏", value: 97413},
                                {name: "四川", value: 54161},
                                {name: "宁夏", value: 56515},
                                {name: "海南", value: 54871},
                                {name: "台湾", value: 48544},
                                {name: "香港", value: 49474},
                                {name: "澳门", value: 34594},
                            ],
                        },
                    ],
                };
                this.chinaMap.setOption(option);
            },
        },
    };
</script>