教你轻松绘制echarts地图图表：10个实用案例，解锁地理数据可视化新技能

地图图表是一种直观展示地理分布和空间关系的工具，而 ECharts 作为一款强大的 JavaScript 图表库，提供了丰富的地图图表功能。通过 ECharts 地图图表，我们可以轻松地将地理数据可视化，让复杂的数据变得简单易懂。本文将为你介绍10个实用案例，帮助你解锁地理数据可视化新技能。

案例一：中国34个省级行政区人口分布

代码示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国34个省级行政区人口分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 140000000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 2154},
                {name: '天津', value: 1561},
                // ... 其他省级行政区数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以清晰地看到中国34个省级行政区的人口分布情况，方便进行数据分析和决策。

案例二：全球各国 GDP 分布

代码示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国 GDP 分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 2000000000000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: 'United States', value: 2100000000000},
                {name: 'China', value: 1400000000000},
                // ... 其他国家数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以直观地看到全球各国的 GDP 分布情况，了解不同国家的经济实力。

案例三：中国各城市空气质量排名

代码示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国各城市空气质量排名'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '空气质量',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 300},
                {name: '天津', value: 250},
                // ... 其他城市数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以直观地看到中国各城市的空气质量排名，了解不同城市的空气质量状况。

案例四：全球各国人口密度分布

代码示例：

// 基于准备好的dom，初始化echarts实例
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: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: 'Bangladesh', value: 1100},
                {name: 'India', value: 900},
                // ... 其他国家数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以直观地看到全球各国的人口密度分布情况，了解不同国家的人口分布特点。

案例五：中国各城市房价分布

代码示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国各城市房价分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 50000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '房价',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 50000},
                {name: '上海', value: 45000},
                // ... 其他城市数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以直观地看到中国各城市的房价分布情况，了解不同城市的房地产市场状况。

案例六：全球各国森林覆盖率分布

代码示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国森林覆盖率分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '森林覆盖率',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: 'Brazil', value: 70},
                {name: 'Canada', value: 60},
                // ... 其他国家数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以直观地看到全球各国的森林覆盖率分布情况，了解不同国家的森林资源状况。

案例七：中国各城市年降水量分布

代码示例：

// 基于准备好的dom，初始化echarts实例
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: 500},
                {name: '上海', value: 800},
                // ... 其他城市数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以直观地看到中国各城市的年降水量分布情况，了解不同城市的气候特点。

案例八：全球各国平均寿命分布

代码示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国平均寿命分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 90,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '平均寿命',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: 'Japan', value: 84},
                {name: 'Singapore', value: 84},
                // ... 其他国家数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以直观地看到全球各国的平均寿命分布情况，了解不同国家的健康水平。

案例九：中国各城市人口密度与房价关系

代码示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国各城市人口密度与房价关系'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '人口密度与房价',
            type: 'scatter',
            data: [
                {name: '北京', value: [5000, 50000]},
                {name: '上海', value: [6000, 45000]},
                // ... 其他城市数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以直观地看到中国各城市人口密度与房价的关系，了解不同城市的房地产市场状况。

案例十：全球各国 GDP 与人口密度关系

代码示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国 GDP 与人口密度关系'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000000000000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: 'GDP与人口密度',
            type: 'scatter',
            data: [
                {name: 'United States', value: [2100000000000, 900]},
                {name: 'China', value: [1400000000000, 1100]},
                // ... 其他国家数据
            ]
        }
    ]
};

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

说明： 通过 ECharts 地图图表，我们可以直观地看到全球各国 GDP 与人口密度的关系，了解不同国家的经济发展状况。

通过以上10个实用案例，相信你已经掌握了 ECharts 地图图表的基本用法。在实际应用中，你可以根据自己的需求进行修改和调整，将 ECharts 地图图表应用于各种场景，让地理数据可视化变得更加简单易懂。