共计 3185 个字符，预计需要花费 8 分钟才能阅读完成。
成果展现
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>正文完