案例

教你轻松绘制echarts地图图表：50个实用案例详解

2026-07-12 0 阅读

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表能够将地理信息直观地展示出来，非常适合展示区域分布、趋势分析等。本篇文章将为你带来 50 个实用案例详解，让你轻松掌握 ECharts 地图图表的绘制技巧。

案例一：中国地图基本绘制

1.1 案例介绍

本案例将展示如何使用 ECharts 绘制中国地图。

1.2 代码示例

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

// 基于准备好的dom，初始化echarts实例
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: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

1.3 案例分析

本案例中，我们首先引入了 ECharts 主模块和中国地图数据。然后，初始化一个 ECharts 实例，并设置图表的配置项和数据。最后，使用 setOption 方法将配置项和数据应用到图表实例上。

案例二：世界地图基本绘制

2.1 案例介绍

本案例将展示如何使用 ECharts 绘制世界地图。

2.2 代码示例

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

// 基于准备好的dom，初始化echarts实例
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: 'China', value: Math.round(Math.random() * 1000)},
                {name: 'USA', value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

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

2.3 案例分析

本案例与案例一类似，只是将中国地图数据替换为世界地图数据。这里使用了 world 地图类型。

案例三：地图数据动态更新

3.1 案例介绍

本案例将展示如何使用 ECharts 实现地图数据的动态更新。

3.2 代码示例

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

// 基于准备好的dom，初始化echarts实例
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: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

// 动态更新数据
setInterval(function () {
    var data = [];
    for (var i = 0; i < 10; i++) {
        var province = ['北京', '上海', '广东', '浙江', '江苏', '山东', '四川', '湖北', '河南', '河北'][i];
        data.push({name: province, value: Math.round(Math.random() * 1000)});
    }
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

3.3 案例分析

本案例中，我们使用 setInterval 方法实现地图数据的动态更新。每隔 1 秒，随机生成 10 个省份的数据，并更新到图表中。

案例四：地图事件交互

4.1 案例介绍

本案例将展示如何使用 ECharts 实现地图事件交互。

4.2 代码示例

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

// 基于准备好的dom，初始化echarts实例
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: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

// 监听地图点击事件
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        alert('点击了 ' + params.name + ' 省份');
    }
});

4.3 案例分析

本案例中，我们使用 on 方法监听地图点击事件。当用户点击某个省份时，会弹出一个提示框显示省份名称。

案例五：地图自定义样式

5.1 案例介绍

本案例将展示如何使用 ECharts 自定义地图样式。

5.2 代码示例

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图自定义样式示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

5.3 案例分析

本案例中，我们通过 itemStyle 属性自定义了地图的样式。包括地图区域的颜色、边框颜色等。

案例六：地图热力图

6.1 案例介绍

本案例将展示如何使用 ECharts 绘制地图热力图。

6.2 代码示例

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

// 基于准备好的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',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

6.3 案例分析

本案例中，我们使用了 visualMap 组件来设置热力图的值域范围和颜色。用户可以通过拖动滑块来调整热力图的显示效果。

案例七：地图多级数据

7.1 案例介绍

本案例将展示如何使用 ECharts 绘制地图多级数据。

7.2 代码示例

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

// 基于准备好的dom，初始化echarts实例
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: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]},
                {name: '上海', value: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]},
                // ... 其他省份
            ]
        }
    ]
};

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

7.3 案例分析

本案例中，我们将每个省份的数据拆分为两个值，分别表示该省份的经度和纬度。这样就可以绘制出多级数据。

案例八：地图标签显示

8.1 案例介绍

本案例将展示如何使用 ECharts 在地图上显示标签。

8.2 代码示例

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

// 基于准备好的dom，初始化echarts实例
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: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

8.3 案例分析

本案例中，我们通过 label 属性设置了标签的显示方式和内容。这里使用了 {b} 占位符来显示省份名称。

案例九：地图缩放和平移

9.1 案例介绍

本案例将展示如何使用 ECharts 实现地图的缩放和平移。

9.2 代码示例

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

// 基于准备好的dom，初始化echarts实例
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: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

// 监听地图缩放和平移事件
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        alert('地图缩放比例：' + myChart.getOption().series[0].zoom);
        alert('地图中心点：[' + myChart.getOption().series[0].center + ']');
    }
});

9.3 案例分析

本案例中，我们通过 on 方法监听地图点击事件。当用户点击地图时，会弹出一个提示框显示当前地图的缩放比例和中心点坐标。

案例十：地图点击事件回调函数

10.1 案例介绍

本案例将展示如何使用 ECharts 实现地图点击事件的回调函数。

10.2 代码示例

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

// 基于准备好的dom，初始化echarts实例
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: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

// 监听地图点击事件
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        alert('点击了 ' + params.name + ' 省份');
        // 调用回调函数
        myCallback(params.name);
    }
});

// 回调函数
function myCallback(province) {
    console.log('回调函数被调用，省份名称：' + province);
}

10.3 案例分析

本案例中，我们定义了一个回调函数 myCallback，当用户点击地图时，会调用该函数并传递省份名称作为参数。

案例十一：地图数据过滤

11.1 案例介绍

本案例将展示如何使用 ECharts 实现地图数据的过滤。

11.2 代码示例

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

// 基于准备好的dom，初始化echarts实例
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: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

// 监听地图点击事件
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        var filteredData = option.series[0].data.filter(function (item) {
            return item.name !== params.name;
        });
        myChart.setOption({
            series: [{
                data: filteredData
            }]
        });
    }
});

11.3 案例分析

本案例中，我们通过监听地图点击事件，对数据进行过滤。当用户点击某个省份时，将该省份的数据从图表中移除。

案例十二：地图动画效果

12.1 案例介绍

本案例将展示如何使用 ECharts 实现地图的动画效果。

12.

分享到：
上一篇 TensorFlow赋能：揭秘各行各业中的智能解决方案与应用实践
下一篇 揭秘企业如何用MongoDB高效处理海量数据：实战案例解析与优化策略

相关文章

TensorFlow赋能：揭秘各行各业中的智能解决方案与应用实践
2026-07-12
从零开始：AlmaLinux在中小型企业项目中的应用与实践案例
2026-07-12
揭秘企业如何用MongoDB高效处理海量数据：实战案例解析与优化策略
2026-07-12
Java 8新特性轻松上手，实战案例教你轻松提升编程效率
2026-07-12