echarts 高亮輪廓的中國地圖

src\pages\chinaMap\index.vue

<template>
  <div class="mapBox">
    <ChinaMap />
  </div>
</template>

<script>
import ChinaMap from "@/components/charts/chinaMap/chinaMap.vue";
export default {
  components: {
    ChinaMap,
  },
};
</script>

<style scoped>
.mapBox {
  background: #020933;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  box-sizing: border-boxs;
}
</style>      

src\components\charts\chinaMap\chinaMap.vue

<template>
  <div style="height: 100%;width: 100%" ref="myChart"></div>
</template>

<script>
import echarts from "echarts";
import "./chinaMapOutline.js";
import "./china.js";

export default {
  methods: {
    initEchartMap() {
      let myChart = echarts.init(this.$refs.myChart);

      let options = {
        series: [
          // 中國地圖-外輪廓
          {
            type: "map",
            map: "chinaMapOutline",
            // 不響應滑鼠互動
            silent: true,
            //調整以下3個配置項與頁面地圖重合
            aspectScale: 0.75, // 地圖的長寬比
            center: [104.2, 35.9], //設定可見中心坐标，以此坐标來放大和縮小
            zoom: 1.13, //放大級别
            itemStyle: {
              normal: {
                // 地圖底色
                areaColor: "#112B9B",
                // 高亮邊緣+陰影樣式
                borderWidth: 3,
                borderColor: "#36E5FE",
                shadowBlur: 6,
                shadowColor: "#3484F5",
                shadowOffsetX: -3,
                shadowOffsetY: 4,
              },
            },
          },
          // 中國地圖
          {
            type: "map",
            map: "china",
            zoom: 1.2,
            aspectScale: 0.75,
            label: {
              // 預設文本标簽樣式
              normal: {
                color: "white",
                show: true,
              },
              // 高亮文本标簽樣式
              emphasis: {
                color: "yellow",
                fontSize: 22,
                fontWeight: "bold",
              },
            },
            itemStyle: {
              // 預設區域樣式
              normal: {
                // 區域背景透明
                areaColor: "transparent",
                borderColor: "rgba(39,211,233, 1)",
                borderWidth: 1,
              },
              // 高亮區域樣式
              emphasis: {
                // 高亮區域背景色
                areaColor: "#01ADF2",
              },
            },
          },
        ],
      };

      myChart.setOption(options);

      // 添加視窗大小改變監聽事件，當視窗大小改變時，圖表會重新繪制，自适應視窗大小
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.initEchartMap();
    });
  },
};
</script>      

下載下傳chinaMapOutline.js和china.js

• src\components\charts\chinaMap\china.js
• src\components\charts\chinaMap\chinaMapOutline.js