成果展现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>