教你用 ECharts 快速制作地图图表：5个实用案例解析，轻松上手！

地图图表是一种直观展示地理分布和空间关系的图表类型，而 ECharts 作为一款强大的可视化库，提供了丰富的地图图表制作功能。本文将为你解析5个实用案例，帮助你快速上手 ECharts 地图图表的制作。

案例一：中国地图销量分布

1.1 准备工作

首先，确保你已经安装了 ECharts 库。可以通过以下代码在你的项目中引入 ECharts：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

1.2 数据准备

接下来，准备地图数据。这里以中国地图为例，可以使用 echarts/map/js/china.js 获取中国地图数据。

1.3 代码实现

以下是制作中国地图销量分布的示例代码：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: '中国地图销量分布'
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true
        },
        series: [
            {
                name: '销量',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                    show: true
                },
                data: [
                    {name: '北京',value: Math.round(Math.random() * 1000)},
                    {name: '上海',value: Math.round(Math.random() * 1000)},
                    // ... 其他城市数据
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>

案例二：世界地图人口分布

2.1 准备工作

与世界地图数据相关的文件可以通过 echarts/map/js/world.js 获取。

2.2 数据准备

与世界地图相关的数据较为复杂，需要准备国家名称、经纬度、人口数量等信息。

2.3 代码实现

以下是制作世界地图人口分布的示例代码：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: '世界地图人口分布'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        visualMap: {
            min: 0,
            max: 100000000,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            calculable: true
        },
        series: [
            {
                name: '人口',
                type: 'map',
                mapType: 'world',
                roam: false,
                label: {
                    show: true
                },
                data: [
                    {name: '中国',value: 1409517397},
                    {name: '印度',value: 1339180127},
                    // ... 其他国家数据
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>

案例三：中国城市GDP排名

3.1 准备工作

与案例一类似，使用 echarts/map/js/china.js 获取中国地图数据。

3.2 数据准备

准备中国各城市GDP排名数据。

3.3 代码实现

以下是制作中国城市GDP排名的示例代码：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: '中国城市GDP排名'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        visualMap: {
            min: 0,
            max: 300000000,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            calculable: true
        },
        series: [
            {
                name: 'GDP',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                    show: true
                },
                data: [
                    {name: '北京',value: 300000000},
                    {name: '上海',value: 300000000},
                    // ... 其他城市数据
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>

案例四：全球疫情分布

4.1 准备工作

使用 echarts/map/js/world.js 获取世界地图数据。

4.2 数据准备

准备全球疫情数据，包括国家名称、确诊人数、死亡人数等。

4.3 代码实现

以下是制作全球疫情分布的示例代码：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: '全球疫情分布'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        visualMap: {
            min: 0,
            max: 1000000,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            calculable: true
        },
        series: [
            {
                name: '确诊人数',
                type: 'map',
                mapType: 'world',
                roam: false,
                label: {
                    show: true
                },
                data: [
                    {name: '中国',value: 830000},
                    {name: '美国',value: 3000000},
                    // ... 其他国家数据
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>

案例五：中国城市人口密度

5.1 准备工作

与案例一类似，使用 echarts/map/js/china.js 获取中国地图数据。

5.2 数据准备

准备中国各城市人口密度数据。

5.3 代码实现

以下是制作中国城市人口密度的示例代码：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: '中国城市人口密度'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        visualMap: {
            min: 0,
            max: 10000,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            calculable: true
        },
        series: [
            {
                name: '人口密度',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                    show: true
                },
                data: [
                    {name: '北京',value: 10000},
                    {name: '上海',value: 10000},
                    // ... 其他城市数据
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>

通过以上5个案例，相信你已经对 ECharts 地图图表的制作有了初步的了解。在实际应用中，可以根据自己的需求调整地图类型、数据、样式等参数，制作出更加精美的地图图表。祝你在可视化领域取得更好的成绩！