echarts 实现高亮轮廓的中国地图

<template>
  <div ref="mapContainer" style="width: 100%; height: 400px;"></div>
</template>
  
<script>
import * as echarts from 'echarts';
import {chinaJson} from './chinaMap.js'
import {chinaMapOutline} from './chinaMapOutline.js'

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const chart = echarts.init(this.$refs.mapContainer);
      echarts.registerMap('china', chinaJson);// 注入中国地图（数据粒度为：省）
      echarts.registerMap('chinaMapOutline', chinaMapOutline);// 注入中国地图（数据粒度为：国）
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}',
          backgroundColor:"rgba(17,24,45,0.8)",
          textStyle:{
              color:"#***c"
          }
        },
        geo: {
          map: 'china', // 关联到已注册的 "china" 地图
          center: [104.4, 28.5],
          zoom: 1.2,
          zlevel:20,
          itemStyle: {
            areaColor: 'transparent',
            borderColor: 'rgba(255, 215, 0, 0.3)', // 透明黄色分割线
            borderWidth: 1,
          },
          emphasis: {
            label: {
              show: true,
              color: '#fff'
            },
            itemStyle: {
              areaColor: '#ffd700' // 悬停高亮颜色
            }
          }
        },
        series: [
          // 中国地图-外轮廓
          {
            type: "map",
            map: "chinaMapOutline",
            zlevel:1,// 设置图层等级为最低，不遮挡省和数据点的展示
            center: [104.4, 28.5], //设置可见中心坐标，以此坐标来放大和缩小
            zoom: 1.2, //放大级别
            itemStyle: {
              normal: {
                // 地图底色
                areaColor: "transparent",
                // 高亮边缘+阴影样式
                borderWidth: 2,
                borderColor: "rgba(255, 215, 0, .5)",
                shadowBlur: 4,
                shadowColor: "rgba(255, 255, 0, 1)",
                shadowOffsetX: -1,
                shadowOffsetY: 3,
              },
            },
          },
          // 示例标记点（可按需添加）
          {
            name: '标记点',
            type: 'scatter', // 使用散点图来标记位置
            coordinateSystem: 'geo', // 指定坐标系为地理坐标系
            zlevel:15,
            data: [
              { name: '北京', value: [116.40, 39.90] },
              { name: '上海', value: [121.47, 31.23, 200] },
              { name: '广州', value: [113.26, 23.13, 300] }
            ],
            symbol: `circle`,
          }
        ]
      };

      chart.setOption(option);
      window.addEventListener('resize', () => {
        chart.resize();
      });
    }
  }
};
</script>

数据来源：

这两个json需要配对，坐标需要一致，才能将两个地图重叠，数据可从阿里云数据可视化平台获取，分别下载下来不同数据颗粒度的json即可。

import {chinaJson} from ‘./chinaMap.js’
import {chinaMapOutline} from ‘./chinaMapOutline.js’