教你用 ECharts 快速制作地图图表，这些案例一看就会！

引言

地图图表是数据可视化中的一种重要形式，它能够直观地展示地理分布和空间关系。ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。在这篇文章中，我们将通过一些实际案例，教你如何快速使用 ECharts 制作地图图表。

准备工作

在开始之前，请确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 ECharts：

npm install echarts --save

接下来，你可以创建一个 HTML 文件，并在其中引入 ECharts 的 JavaScript 文件：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script src="your_script.js"></script>
</body>
</html>

案例一：中国地图

步骤 1：定义数据

首先，我们需要定义地图数据。这里我们使用 ECharts 内置的中国地图数据：

var geoCoordMap = {
    '北京': [116.46,39.92],
    '上海': [121.48,31.22],
    // ... 其他城市坐标
};

var data = [
    {name: '北京', value: 0},
    {name: '上海', value: 50},
    // ... 其他城市数据
];

步骤 2：配置 ECharts 实例

接下来，我们配置 ECharts 实例，并设置地图图表：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国地图示例',
        subtext: '数据来源：ECharts',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    bmap: {
        center: [104.114129, 37.550339],
        zoom: 4,
        roam: true,
        mapType: 'china'
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            data: data,
            geoCoord: geoCoordMap
        }
    ]
};

myChart.setOption(option);

步骤 3：运行效果

保存文件后，在浏览器中打开 HTML 文件，你将看到一个包含中国地图的图表，其中上海的数据值显示为 50。

案例二：世界地图

步骤 1：定义数据

与案例一类似，我们需要定义世界地图的数据。这里我们使用 ECharts 内置的世界地图数据：

var geoCoordMap = {
    'New York': [-74.0060, 40.7128],
    'London': [-0.1278, 51.5074],
    // ... 其他城市坐标
};

var data = [
    {name: 'New York', value: 0},
    {name: 'London', value: 50},
    // ... 其他城市数据
];

步骤 2：配置 ECharts 实例

配置 ECharts 实例，并设置世界地图图表：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '世界地图示例',
        subtext: '数据来源：ECharts',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    bmap: {
        center: [0, 0],
        zoom: 1,
        roam: true,
        mapType: 'world'
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'world',
            data: data,
            geoCoord: geoCoordMap
        }
    ]
};

myChart.setOption(option);

步骤 3：运行效果

保存文件后，在浏览器中打开 HTML 文件，你将看到一个包含世界地图的图表，其中伦敦的数据值显示为 50。

总结

通过以上两个案例，你学会了如何使用 ECharts 快速制作中国地图和世界地图图表。ECharts 提供了丰富的地图数据，你可以根据自己的需求进行选择和配置。希望这篇文章能够帮助你更好地理解和使用 ECharts 地图图表。