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>