案例

教你用ECharts轻松绘制地图图表：10个实用案例详解，快速上手地图可视化！

2026-09-22 0 阅读

ECharts 是一款功能强大的 JavaScript 库，它可以帮助开发者轻松创建各种数据可视化图表。其中，地图图表以其直观的地理空间展示方式，在数据分析、市场调研等领域有着广泛的应用。本文将详细介绍如何使用 ECharts 绘制地图图表，并通过 10 个实用案例帮助你快速上手地图可视化。

一、ECharts 地图图表基础

1.1 地图数据格式

ECharts 地图图表需要使用特定的地图数据格式，通常是 GeoJSON。GeoJSON 格式描述了一个地理空间，包括点、线、多边形等要素。

1.2 地图配置

在 ECharts 中，绘制地图图表需要配置以下基本参数：

  • mapType：指定地图类型，如“china”表示中国地图。
  • center：设置地图的中心点坐标。
  • zoom：设置地图的缩放比例。
  • roam：是否开启地图的缩放和平移功能。

二、10个实用案例详解

2.1 案例一：中国地图标注

2.1.1 案例描述

展示中国地图，并在地图上标注一些主要城市。

2.1.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图标注'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 10
        }, {
            name: '上海',
            value: 20
        }]
    }]
};

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

2.2 案例二：世界地图标注

2.2.1 案例描述

展示世界地图，并在地图上标注一些主要国家。

2.2.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图标注'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [{
            name: '美国',
            value: 10
        }, {
            name: '加拿大',
            value: 20
        }]
    }]
};

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

2.3 案例三：热力地图

2.3.1 案例描述

展示中国地图，并根据经纬度数据绘制热力图。

2.3.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国热力地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            [116.46,39.92,100],
            [120.12,30.18,80],
            // ... 其他经纬度数据
        ]
    }]
};

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

2.4 案例四：地图缩放和平移

2.4.1 案例描述

展示中国地图，并开启地图的缩放和平移功能。

2.4.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图缩放和平移'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        roam: true // 开启地图的缩放和平移功能
    }]
};

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

2.5 案例五：地图层级切换

2.5.1 案例描述

展示中国地图，并实现地图层级切换功能。

2.5.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图层级切换'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        zoom: 1.2, // 设置地图的缩放比例
        levels: [
            {
                itemStyle: {
                    areaColor: '#323c48'
                }
            },
            {
                itemStyle: {
                    areaColor: '#2c343c'
                }
            },
            {
                itemStyle: {
                    areaColor: '#1e2127'
                }
            }
        ]
    }]
};

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

2.6 案例六：地图标签

2.6.1 案例描述

展示中国地图，并在地图上添加标签。

2.6.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图标签'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            formatter: '{b}'
        },
        data: [{
            name: '北京',
            value: 10
        }, {
            name: '上海',
            value: 20
        }]
    }]
};

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

2.7 案例七：地图图例

2.7.1 案例描述

展示中国地图，并添加图例。

2.7.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图图例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['北京', '上海']
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 10
        }, {
            name: '上海',
            value: 20
        }]
    }]
};

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

2.8 案例八：地图动画

2.8.1 案例描述

展示中国地图，并添加地图动画效果。

2.8.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图动画'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        animation: true // 开启地图动画效果
    }]
};

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

2.9 案例九：地图数据动态更新

2.9.1 案例描述

展示中国地图，并实现地图数据的动态更新。

2.9.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图数据动态更新'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 10
        }, {
            name: '上海',
            value: 20
        }]
    }]
};

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

// 定时更新数据
setInterval(function () {
    var data = [
        {
            name: '北京',
            value: Math.round(Math.random() * 100)
        },
        {
            name: '上海',
            value: Math.round(Math.random() * 100)
        }
    ];
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

2.10 案例十：地图交互

2.10.1 案例描述

展示中国地图，并实现地图的交互功能，如点击地图区域弹出信息框。

2.10.2 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图交互'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + '<br/>' + params.value;
        }
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 10
        }, {
            name: '上海',
            value: 20
        }]
    }]
};

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

// 地图点击事件
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        alert(params.name + '：' + params.value);
    }
});

三、总结

通过以上 10 个实用案例，相信你已经掌握了使用 ECharts 绘制地图图表的方法。在实际应用中，可以根据需求对地图图表进行定制和优化，使其更加符合你的需求。希望本文对你有所帮助！

分享到：
上一篇 如何打造适合所有设备的网页？10个成功响应式设计案例分析
下一篇 君威悬挂改装前后对比，揭秘提升操控体验的秘密技巧

相关文章

如何打造适合所有设备的网页？10个成功响应式设计案例分析
2026-09-22
Java 8革新特性解析：实用案例详解助力编程高手提升
2026-09-22
君威悬挂改装前后对比，揭秘提升操控体验的秘密技巧
2026-09-22
紧急救援现场，报警求助如何正确操作，案例分析教你关键时刻保平安
2026-09-22