教你用 ECharts 快速制作地图图表：5个实用案例，轻松入门！

地图图表是一种非常直观的数据展示方式，能够将地理信息与统计数据结合起来，使得信息传达更加生动和易于理解。ECharts 是一款强大的开源可视化库，支持丰富的图表类型，其中就包括地图图表。本篇文章将为你介绍如何使用 ECharts 快速制作地图图表，并提供5个实用案例，帮助你轻松入门。

案例一：中国31个省级行政区GDP排名地图

步骤1：准备数据

首先，你需要准备相应的数据。这里我们以2019年中国31个省级行政区的GDP数据为例。

var geoCoordMap = {
    '北京': [116.46,39.92],
    '天津': [117.2,39.3],
    // ... 其他省级行政区
};

var data = [
    {name: '北京', value: 343.9},
    {name: '天津', value: 191.3},
    // ... 其他省级行政区GDP数据
];

步骤2：引入 ECharts 和地图数据

在你的 HTML 文件中引入 ECharts 和中国地图数据。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>

步骤3：初始化图表

在 JavaScript 中初始化图表，并设置必要的配置项。

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

var option = {
    title: {
        text: '中国31个省级行政区GDP排名地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ' : ' + params.value;
        }
    },
    visualMap: {
        min: 0,
        max: 5000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'china',
            data: data,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

myChart.setOption(option);

步骤4：添加到页面中

将初始化的图表添加到你的 HTML 页面中。

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

案例二：全球城市人口密度地图

步骤1：准备数据

准备全球城市人口密度的数据，可以使用公开的地理信息系统（GIS）数据。

步骤2：引入 ECharts 和地图数据

引入 ECharts 和全球地图数据。

步骤3：初始化图表

根据你的数据设置相应的配置项，例如：

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

var option = {
    // ... 其他配置项
    geo: {
        map: 'world',
        // ... 其他配置项
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'world',
            data: data,
            // ... 其他配置项
        }
    ]
};

myChart.setOption(option);

步骤4：添加到页面中

将图表添加到你的 HTML 页面中。

案例三：中国各城市PM2.5指数地图

步骤1：准备数据

准备中国各城市PM2.5指数的数据。

步骤2：引入 ECharts 和地图数据

引入 ECharts 和中国地图数据。

步骤3：初始化图表

根据你的数据设置相应的配置项，例如：

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

var option = {
    // ... 其他配置项
    geo: {
        map: 'china',
        // ... 其他配置项
    },
    series: [
        {
            name: 'PM2.5指数',
            type: 'map',
            mapType: 'china',
            data: data,
            // ... 其他配置项
        }
    ]
};

myChart.setOption(option);

步骤4：添加到页面中

将图表添加到你的 HTML 页面中。

案例四：美国各州人口分布地图

步骤1：准备数据

准备美国各州的人口分布数据。

步骤2：引入 ECharts 和地图数据

引入 ECharts 和美国地图数据。

步骤3：初始化图表

根据你的数据设置相应的配置项，例如：

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

var option = {
    // ... 其他配置项
    geo: {
        map: 'USA',
        // ... 其他配置项
    },
    series: [
        {
            name: '人口分布',
            type: 'map',
            mapType: 'USA',
            data: data,
            // ... 其他配置项
        }
    ]
};

myChart.setOption(option);

步骤4：添加到页面中

将图表添加到你的 HTML 页面中。

案例五：中国各城市交通拥堵地图

步骤1：准备数据

准备中国各城市交通拥堵的数据。

步骤2：引入 ECharts 和地图数据

引入 ECharts 和中国地图数据。

步骤3：初始化图表

根据你的数据设置相应的配置项，例如：

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

var option = {
    // ... 其他配置项
    geo: {
        map: 'china',
        // ... 其他配置项
    },
    series: [
        {
            name: '交通拥堵',
            type: 'map',
            mapType: 'china',
            data: data,
            // ... 其他配置项
        }
    ]
};

myChart.setOption(option);

步骤4：添加到页面中

将图表添加到你的 HTML 页面中。

通过以上5个案例，你可以了解到如何使用 ECharts 快速制作地图图表。在实际应用中，你可以根据自己的需求选择合适的地图数据，设置相应的配置项，从而制作出精美的地图图表。希望这篇文章能够帮助你快速入门 ECharts 地图图表的制作！