点击你的足迹地图，一图了解你的旅行经历！

2023-07-22 23:39:55

踏遍山河，留下足迹：使用 ECharts 绘制中国旅行地图

探索大美山河

中国地大物博，名山大川数不胜数。作为一名资深旅行爱好者，你是否曾心怀憧憬，踏上探索这片广袤土地的征程？你是否想记录下自己走过的足迹，分享旅途中的见闻？今天，我们就来使用 ECharts 这个强大的图表库，绘制一张专属你的中国旅行地图，让你轻松标记走过的省份，留下难忘回忆。

ECharts 助力，轻松绘制中国地图

ECharts 是一个开源的、基于 JavaScript 的图表库，具有丰富的图表类型和强大的数据可视化功能。利用 ECharts，我们可以轻松创建出各种类型的图表，其中就包括中国地图。

创建中国地图

// 引入 ECharts
import * as echarts from 'echarts'

// 创建地图
var myChart = echarts.init(document.getElementById('map'));

// 设置地图选项
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200},
            {name: '广州', value: 300},
            {name: '深圳', value: 400},
            {name: '成都', value: 500}
        ]
    }]
};

// 显示地图
myChart.setOption(option);

添加交互功能，标记足迹

为了让地图更具互动性，我们可以添加点击事件，以便在点击省份或地区时进行标记。

// 为地图添加点击事件
myChart.on('click', function (params) {
    // 获取点击的省份或地区名称
    var name = params.name;

    // 将点击的省份或地区名称存储起来
    visitedProvinces.push(name);

    // 重新渲染地图，在地图上标记出已经去过的省份或地区
    myChart.setOption(option);
});

存储足迹数据

为了记录下曾经去过的省份或地区，我们需要创建一个数组来存储这些数据。

// 创建一个数组来存储曾经去过的省份或地区
var visitedProvinces = [];

在地图上标记足迹

点击省份或地区后，我们需要在地图上进行标记，表示已经去过该省份或地区。

// 将已经去过的省份或地区标记在地图上
for (var i = 0; i < visitedProvinces.length; i++) {
    var name = visitedProvinces[i];

    // 根据省份或地区名称获取省份或地区的经纬度
    var geoCoord = echarts.getMap(name).geoJson.features[0].properties.cp;

    // 在地图上添加一个标记
    option.series[0].data.push({
        name: name,
        value: geoCoord,
        symbol: 'circle',
        symbolSize: 10,
        label: {
            show: true,
            color: '#fff'
        }
    });
}

使用不同颜色标记不同省份或地区

为了让地图更具美观性，我们可以使用不同的颜色来标记不同的省份或地区。

// 使用不同的颜色来标记不同的省份或地区
option.series[0].itemStyle = {
    color: function (params) {
        if (params.data.name === '北京') {
            return '#FF0000';
        } else if (params.data.name === '上海') {
            return '#00FF00';
        } else if (params.data.name === '广州') {
            return '#0000FF';
        } else if (params.data.name === '深圳') {
            return '#FF00FF';
        } else if (params.data.name === '成都') {
            return '#00FFFF';
        } else {
            return '#808080';
        }
    }
};