<template><div id="myChart" :style="{ height: '900px', width: '1500px' }"></div><button @click="toIndexPage">首页</button>
</template><script>
export default {name: "maps",data() {return {option: {// 鼠标悬浮显示省份名称tooltip: {textStyle: {color: "yellow",decoration: "none",fontFamily: "Verdana, sans-serif",fontStyle: "italic",fontWeight: "bold",},formatter: function (params) {return params.name;},},visualMap: {min: 0,max: 1500,left: "left",top: "bottom",text: ["高", "低"],inRange: {color: ["#72ACFF", "#4180D9"],},show: false,},geo: [{map: "china",zlevel: 5,roam: false,zoom: 1.1,label: {normal: {show: true,fontSize: "10",color: "black", // 字体颜色},emphasis: {// 动态展示的样式color: "#010D39",},},itemStyle: {normal: {show: false,borderColor: "#fff", // 边框颜色color: "#2075B8", // 背景borderWidth: "1", // 边框宽度},emphasis: {color: "#010D39",areaColor: "#5E97FF",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 1,shadowColor: "rgba(0, 0, 0, 0.5)",},},},{map: "china",zlevel: 4,roam: false,zoom: 1.1,label: {normal: {show: false,fontSize: "10",color: "#333", // 字体颜色},emphasis: {// 动态展示的样式color: "#010D39",},},// 这里是重点！！！regions: [{name: "南海诸岛",itemStyle: {// 隐藏地图normal: {opacity: 0, // 为 0 时不绘制该图形},},label: {show: false, // 隐藏文字},},],itemStyle: {normal: {show: false,borderColor: "#3C5FA1", // 边框颜色color: "#3C5FA1", // 地图背景色borderWidth: "1", // 边框宽度},emphasis: {color: "#010D39",areaColor: "#5E97FF",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 1,shadowColor: "rgba(0, 0, 0, 0.5)",},},},{map: "china",zlevel: 3,roam: false,zoom: 1.1,top: "11%",label: {normal: {show: false,fontSize: "10",color: "#333", // 字体颜色},emphasis: {// 动态展示的样式color: "#010D39",},},// 这里是重点！！！regions: [{name: "南海诸岛",itemStyle: {// 隐藏地图normal: {opacity: 0, // 为 0 时不绘制该图形},},label: {show: false, // 隐藏文字},},],itemStyle: {normal: {color: "#163F6C", // 背景borderWidth: "1", // 边框宽度borderColor: "#163F6C", // 边框颜色},emphasis: {color: "#010D39",areaColor: "#5E97FF",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 1,shadowColor: "rgba(0, 0, 0, 0.5)",},},},{map: "china",zlevel: 2,roam: false,zoom: 1.1,label: {normal: {show: false,fontSize: "10",color: "#333", // 字体颜色},emphasis: {// 动态展示的样式color: "#010D39",},},// 这里是重点！！！regions: [{name: "南海诸岛",itemStyle: {// 隐藏地图normal: {opacity: 0, // 为 0 时不绘制该图形},},label: {show: false, // 隐藏文字},},],itemStyle: {normal: {color: "#31A0E6", // 背景borderWidth: "1", // 边框宽度borderColor: "#31A0E6", // 边框颜色shadowColor: "#fff", // 外部阴影shadowBlur: "10",},emphasis: {color: "#010D39",areaColor: "#5E97FF",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 1,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],series: [{name: "数量占比",type: "map",geoIndex: 0,},],},};},mounted() {this.drawLine();},methods: {drawLine() {let charts = this.$echarts.init(document.querySelector(`#myChart`));let mapName = "china";let geoCoordMap = {};let mapFeatures = this.$echarts.getMap(mapName).geoJson.features;mapFeatures.forEach(function (v) {// 地区名称let name = v.properties.name;// 地区经纬度geoCoordMap[name] = v.properties.cp;});charts.setOption(this.option);},// 回到首页toIndexPage() {this.$router.push("/");},},
};
</script><style scoped>
</style>