<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>
<template>
<div id="myChart" :style="{ height: '9
