vue3+echarts+地图（3D立体）

<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>