教你用 ECharts 地图图表轻松制作各国城市分布图，快速上手案例分析

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。通过 ECharts 地图图表，你可以轻松制作出各国城市分布图。本文将带你从零开始，通过一个案例分析，让你快速上手 ECharts 地图图表的制作。

一、ECharts 地图图表简介

ECharts 地图图表可以展示全球、中国、省市区等不同级别的地图，支持多种主题风格和自定义元素。它具有以下特点：

支持多种地图类型，包括全球、中国、省市区等；
提供丰富的地图主题风格，可自由切换；
支持自定义元素，如点、线、面等；
兼容多种数据格式，如 GeoJSON、TopoJSON 等；
支持数据回显和动态更新。

二、制作城市分布图前的准备

在开始制作城市分布图之前，你需要准备以下材料：

地图数据：可以从 ECharts 地图数据网站（https://echarts.baidu.com/option/geo.html）下载所需地图数据。
JavaScript 库：将 ECharts 地图图表库（https://echarts.baidu.com/download.html）下载到本地。
HTML 页面：创建一个 HTML 页面，用于展示地图图表。

三、案例分析：制作中国城市分布图

以下是一个简单的中国城市分布图制作案例：

1. 引入 ECharts 地图图表库

在 HTML 页面的 <head> 部分引入 ECharts 地图图表库：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-rc.2/echarts.min.js"></script>

2. 创建地图图表容器

在 HTML 页面的 <body> 部分创建一个地图图表容器：

<div id="map" style="width: 600px; height: 400px;"></div>

3. 初始化地图图表

使用 JavaScript 初始化地图图表：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市分布图'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['城市']
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '城市',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                // 城市数据
                {name: '北京', value: [116.46, 39.92]},
                {name: '上海', value: [121.48, 31.22]},
                // ... 更多城市数据
            ],
            symbolSize: 10,
            label: {
                normal: {
                    show: false,
                    position: 'right',
                    formatter: '{b}'
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: 'rgba(100, 100, 100, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

4. 保存并预览

保存 HTML 页面，并在浏览器中打开预览。你可以看到中国城市分布图已经成功展示出来。

四、总结

通过以上案例，你已经掌握了使用 ECharts 地图图表制作各国城市分布图的基本方法。你可以根据实际需求，调整地图数据、样式和交互效果，制作出更加丰富多样的地图图表。祝你在可视化领域取得更多成果！