案例

教你轻松掌握ECharts地图图表：10个实用案例，助你快速上手！

2026-07-07 0 阅读

地图图表是一种非常直观的数据展示方式，能够帮助我们更好地理解地理分布和空间关系。ECharts 是一个使用 JavaScript 实现的开源可视化库，其中地图图表功能尤为强大。下面，我将通过10个实用案例，带你轻松掌握ECharts地图图表的制作。

案例一：中国地图省份分布

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

首先，你需要引入ECharts库和相应的地图数据。这里以中国地图为例，我们可以使用ECharts官方提供的地图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '中国地图省份分布'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '省份',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

在 data 数组中，你可以添加各个省份的数据，其中 name 属性表示省份名称，value 属性表示数值。

步骤三：运行效果

运行以上代码，你将看到一个展示中国地图省份分布的图表。

案例二：世界地图国家分布

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

与案例一类似，这里我们使用ECharts官方提供的世界地图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/world.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '世界地图国家分布'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '国家',
            type: 'map',
            mapType: 'world',
            label: {
                show: true
            },
            data: [
                {name: '中国', value: Math.round(Math.random() * 1000)},
                // ... 其他国家数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

与案例一类似，在 data 数组中添加各个国家的数据。

步骤三：运行效果

运行以上代码，你将看到一个展示世界地图国家分布的图表。

案例三：城市热力图

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

这里我们使用ECharts官方提供的城市热力图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '城市热力图'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '城市',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
                // ... 其他城市数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

在 data 数组中添加各个城市的坐标和数值。

步骤三：运行效果

运行以上代码，你将看到一个展示城市热力分布的图表。

案例四：迁徙地图

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

这里我们使用ECharts官方提供的迁徙地图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '迁徙地图'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '迁徙',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

在 data 数组中添加各个城市的坐标和数值。

步骤三：运行效果

运行以上代码，你将看到一个展示城市迁徙情况的图表。

案例五：人口密度图

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

这里我们使用ECharts官方提供的人口密度图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '人口密度图'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '人口密度',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

在 data 数组中添加各个城市的坐标和数值。

步骤三：运行效果

运行以上代码，你将看到一个展示城市人口密度分布的图表。

案例六：交通流量图

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

这里我们使用ECharts官方提供的交通流量图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '交通流量图'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '交通流量',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

在 data 数组中添加各个城市的坐标和数值。

步骤三：运行效果

运行以上代码，你将看到一个展示城市交通流量分布的图表。

案例七：地震分布图

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

这里我们使用ECharts官方提供的地震分布图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '地震分布图'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '地震',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

在 data 数组中添加各个城市的坐标和数值。

步骤三：运行效果

运行以上代码，你将看到一个展示城市地震分布情况的图表。

案例八：气象灾害分布图

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

这里我们使用ECharts官方提供的气象灾害分布图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '气象灾害分布图'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '气象灾害',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

在 data 数组中添加各个城市的坐标和数值。

步骤三：运行效果

运行以上代码，你将看到一个展示城市气象灾害分布情况的图表。

案例九：旅游景点分布图

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

这里我们使用ECharts官方提供的旅游景点分布图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '旅游景点分布图'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '旅游景点',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

在 data 数组中添加各个城市的坐标和数值。

步骤三：运行效果

运行以上代码，你将看到一个展示城市旅游景点分布情况的图表。

案例十：行政区划边界图

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

这里我们使用ECharts官方提供的行政区划边界图数据。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '行政区划边界图'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '行政区划',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

步骤二：配置数据

在 data 数组中添加各个城市的坐标和数值。

步骤三：运行效果

运行以上代码，你将看到一个展示城市行政区划边界的图表。

通过以上10个实用案例，相信你已经对ECharts地图图表有了更深入的了解。在实际应用中，你可以根据自己的需求，选择合适的地图类型、数据格式和配置项，制作出更加美观和实用的地图图表。祝你学习愉快！

分享到：
上一篇 揭秘TensorFlow如何改变世界：从AI助手到智能驾驶，50个实际应用案例深度解析
下一篇 揭秘如何用MongoDB轻松处理海量数据：实战案例分析，助你掌握大数据处理技巧

相关文章

揭秘TensorFlow如何改变世界：从AI助手到智能驾驶，50个实际应用案例深度解析
2026-07-07
从零开始，用AlmaLinux打造企业级项目：实战案例解析与优化技巧
2026-07-07
揭秘如何用MongoDB轻松处理海量数据：实战案例分析，助你掌握大数据处理技巧
2026-07-07
阳江新增阳性病例，了解传播途径和防护措施，守护健康生活
2026-07-07