ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括地图图表。地图图表能够将地理信息数据直观地展示在地图上，非常适合展示国家、地区、城市等空间分布数据。本篇文章将带您通过实战案例，轻松上手制作个性化中国地图。

环境准备

在开始制作个性化中国地图之前，请确保您的开发环境中已经安装了以下工具：

  1. Node.js：用于运行 ECharts 的示例代码。
  2. 浏览器：用于查看地图图表效果。
  3. ECharts：可以从 ECharts 官网下载最新版本的 ECharts 库。

创建项目

  1. 创建文件夹：在您的本地环境中创建一个新文件夹，用于存放项目文件。
  2. 初始化项目：在文件夹中打开命令行工具，运行 npm init 命令初始化项目。
  3. 安装 ECharts：在命令行中运行 npm install echarts 命令安装 ECharts 库。

制作个性化中国地图

1. 准备地图数据

首先，我们需要准备中国地图的矢量数据。ECharts 提供了在线地图数据服务，您可以直接在 ECharts 官网下载中国地图数据。

2. 创建 HTML 文件

在项目文件夹中创建一个名为 index.html 的 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/map.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/dataTool.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/china.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/bmap.min.js"></script>
    <script src="https://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            title: {
                text: '个性化中国地图',
                subtext: '示例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],           // 文本，默认为数值文本
                calculable: true
            },
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    roam: true,
                    label: {
                        show: true
                    },
                    data: [
                        {name: '北京', value: Math.round(Math.random() * 1000)},
                        {name: '上海', value: Math.round(Math.random() * 1000)},
                        // ... 其他城市数据
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

3. 修改地图数据

在 data 数组中，您可以修改每个城市的 name 和 value 属性，以显示不同城市的具体数据。

4. 保存并查看效果

保存 index.html 文件，并在浏览器中打开它。您将看到一个带有随机数据的个性化中国地图。

总结

通过以上步骤，您已经成功制作了一个个性化中国地图。在实际应用中，您可以进一步调整地图样式、添加自定义元素、实现交互效果等，以展示更加丰富的地理信息数据。希望本篇文章能帮助您轻松上手 ECharts 地图图表的制作。