本文内容是基于 ECharts Version 6.1.0，低于此版本可能存在适配性问题

准备Echarts JS文件

首先在Echarts下载页下载echarts.min.js，然后还需要下载地图文件，笔者下载的是china.js和world.js，可用于中国地图和世界地图的制作。然后将以上几个JS文件都引入到你博客主题的JS文件夹中，以我在用的Butterfly主题为例，将文件添加进 /themes/butterfly/source/js 中即可

由于相关法规问题，地图js文件目前官方下载渠道已关闭，需要自行寻找资源，笔者也不敢随便分享出来。不过信息时代，找点资源应该不是什么难事

在Hexo中新建足迹页面

如果你要将足迹页面作为一个单独的菜单入口放置在博客首页，那你需要像我一样在博客的source目录下新建travel目录(文件名可自取)，在travel目录中创建index.md文件，然后在你的主题的配置文件中新增导航栏设置

menu:
  主頁: / || fas fa-home
  時間軸: /archives/ || fas fa-archive
  標籤: /tags/ || fas fa-tags
  分類: /categories/ || fas fa-folder-open
  畫廊: /galleries/ || fas fa-images  
  旅行 : /travel/ || fas fa-earth-oceania

写足迹图JS代码

在刚刚引入JS文件的路径中新建一个JS文件用于编写你的足迹图代码，方便后期维护。以世界地图为例，完整代码如下，直接贴入即可

var myWorldChart = echarts.init(document.getElementById('myWorldMap'));

var datalist = [ // value[经度,纬度,图库链接,国名中文翻译,首都,到过]
    {name: 'China',
    value: [116.40,39.90,'/xxxxxxx/xxxxxxx/','中国','北京'],
    symbolSize: 10,
    itemStyle: { color: '#F2273B' },
    rippleEffect: { color: '#F2273B' }
    },
    {name: 'France',
    value: [2.345,48.856,'/xxxxxxx/xxxxxxx/','法国','巴黎','巴黎,科尔马'],
    symbolSize: 10,
    itemStyle: { color: '#021B87' },
    rippleEffect: { color: '#021B87' }
    },
    {name: 'Italy',
    value: [12.488,41.900,'/xxxxxxx/xxxxxxx/','意大利','罗马','罗马,比萨,佛罗伦萨,威尼斯,米兰'],
    symbolSize: 10,
    itemStyle: { color: '#028E4E' },
    rippleEffect: { color: '#028E4E' }
    },
    {name: 'Switzerland',
    value: [7.447,46.948,'/xxxxxxx/xxxxxxx/','瑞士','伯尔尼','琉森,因特拉肯,伯尔尼'],
    symbolSize: 10,
    itemStyle: { color: '#E0201B' },
    rippleEffect: { color: '#E0201B' }
    },
    {name: 'Japan',
    value: [139.767,35.681,'/xxxxxxx/xxxxxxx/','日本','东京','大版,奈良,京都'],
    symbolSize: 10,
    itemStyle: { color: '#F23043' },
    rippleEffect: { color: '#F23043' }
    },
    {name: 'korea',
    value: [126.996,37.560,'/xxxxxxx/xxxxxxx/','韩国','首尔','济州岛'],
    symbolSize: 10,
    itemStyle: { color: '#024F96' },
    rippleEffect: { color: '#024F96' }
    }
];

total_world = datalist.length; //  直接获取数量

option = {
    title: {
        text: '世界旅行足迹',
        link: '', // 主标题点击跳转链接
        target: 'blank', // 链接打开方式：self / blank
        textStyle: {
            color: '#18247a',
            fontStyle: 'normal', // normal italic oblique
            fontWeight: 'bold', // normal bold bolder lighter 或数字 100~900
            fontFamily: 'sans-serif',
            fontSize: 20,
            lineHeight: 24
        },
        itemGap: 8, //主副标题距离
        padding: 5,
        subtext: `已经去过：${total_world}个国家`,
        sublink: '', // 副标题链接
        subtarget: 'blank',
        subtextStyle: {
            color: '#0e0f14',
            fontSize: 12
        },
        left: 'center',
        textAlign: 'auto', // 整体水平对齐：auto left right center
        textVerticalAlign: 'auto' // 整体垂直对齐：auto top bottom middle
    },
    tooltip: {
        trigger: 'item',
        enterable: true, //允许鼠标进入 tooltip
        alwaysShowContent: false, //让 tooltip 不随鼠标移开而消失
        hideDelay: 300,  // 加一点延迟，避免闪没
        confine: true,  //限制在图表区域内
        formatter: function (params) {
            name = params.name
            link = params.value[2]
            color = params.color
            translation = params.value[3]
            towhere = params.value[5] ?? '' // 查不到数据时兜底
            return '<div style="color:'
            +
            color
            +
            ';font-weight:600;margin-bottom:4px">'
            +
            translation
            +
            '</div>'
            +
            '<a href="'
            +
            link
            +
            '"style="color:#59595c;text-decoration:underline">查看详情</a>'
            +
            '<div>'
            +
            '<h4>已经去过：</h4>'
            +
            towhere
            +
            '</div>'
            ;
        }
    },
    geo: {
        map: 'world',
        silent: true, //彻底禁用国家hover效果
        roam: true, // true=滚轮缩放+拖拽；'scale'=只滚轮缩放，不能拖拽；'move'=只拖拽
        scaleLimit: {
            min: 1, // 最小缩小倍数
            max: 8  // 最大放大倍数
        },
        layoutCenter: ['50%', '50%'], // 地图中心点居中
        layoutSize: ['85%', '85%'], //地图占 geo 容器宽高 85%，四周预留边距，窗口缩放时地图自动等比缩放，不会超出容器
    },
    series : [
        {
            name: '足迹',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: datalist,
            showEffectOn: 'render',
            rippleEffect: { // 涟漪波纹样式
                scale: 5, // 涟漪最大放大倍数，数值越大波纹越大
                period: 4, // 动画周期，越小越快
                brushType: 'stroke', // stroke空心环 / fill实心
            },
            hoverAnimation: true,
            itemStyle: {
                normal: {
                    shadowBlur: 20,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};

myWorldChart.setOption(option);

// 防抖，防止频繁resize
let timer_world;
window.addEventListener('resize', () => {
  clearTimeout(timer_world);
  timer_world = setTimeout(() => {
    myWorldChart.resize();
  }, 120);
})

功能特性

  1. 可实现鼠标悬浮足迹点出现跳转链接

  2. 每个足迹点可单独设置颜色、文案、大小等，非常灵活

  3. 足迹地图可缩放拖拽

  4. 自动计算去过的足迹点数量，全局参数可直接在页面引用

有以下几个注意点：

  1. datalist中的name必须跟地图文件中的国名英文完全匹配，假如你使用的是中国地图，name就是省份中文如"北京"，"北京市"也不行，必须完全一样

  2. datalist中的value前两位是经纬度，这是必须的，后面自定义想添加几个value都行没有上限，只需在使用的时候按角标取出即可，如link = params.value[2]

  3. 假如使用中国地图，需要修改geo中的map值，改为china即可，如果你用的是其他地图，按需修改

geo: {
        map: 'world' //world - 世界地图；china - 中国地图；...
    }

在index.md中引入JS代码

Markdown文件可以直接引入JavaScript代码，非常方便

<div id="myWorldMap" style="width: 100%;height:600px;"></div>
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>  // ECharts
<script type="text/javascript" src="/js/echarts/echarts-countries-js/world.js"></script>  // 地图js文件
<script type="text/javascript" src="/js/echarts/travelmap_world.js"></script>  // 足迹代码js文件

到这里足迹地图就算完成了，可以点击我的旅行足迹页面查看效果