案例

轻松掌握echarts地图图表：30个实用案例解析，一看就会！

2026-11-01 0 阅读

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一套丰富的图表类型，包括地图图表。地图图表在数据可视化中非常有用，可以帮助我们直观地展示地理位置、人口分布、经济状况等信息。本篇文章将为你提供 30 个实用案例解析，让你轻松掌握 ECharts 地图图表的制作。

案例一：中国地图

案例简介

使用 ECharts 制作中国地图，展示各个省份的名称和颜色。

代码示例

// 引入 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);

案例二：世界地图

案例简介

使用 ECharts 制作世界地图，展示各个国家的名称和颜色。

代码示例

// 引入 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: '中国', value: Math.round(Math.random() * 1000)},
                {name: '美国', value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

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

案例三：美国地图

案例简介

使用 ECharts 制作美国地图，展示各个州的颜色和人口数量。

代码示例

// 引入 ECharts 主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '美国地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '美国',
            type: 'map',
            mapType: 'USA',
            label: {
                show: true
            },
            data: [
                {name: 'California', value: Math.round(Math.random() * 1000)},
                {name: 'Texas', value: Math.round(Math.random() * 1000)},
                // ... 其他州
            ]
        }
    ]
};

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

案例四：城市热力图

案例简介

使用 ECharts 制作城市热力图，展示城市的人口密度和温度。

代码示例

// 引入 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: 'heatmap',
            data: [
                [116.46,39.92,100],
                [121.48,31.22,100],
                // ... 其他城市
            ]
        }
    ]
};

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

案例五：迁徙图

案例简介

使用 ECharts 制作迁徙图，展示人口从一个地方迁移到另一个地方的情况。

代码示例

// 引入 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: 100},
                {name: '上海', value: 50},
                // ... 其他城市
            ]
        }
    ]
};

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

案例六：地理坐标系

案例简介

使用 ECharts 制作地理坐标系，展示地球表面的温度分布。

代码示例

// 引入 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: 'globe',
            coordinateSystem: 'geo',
            label: {
                show: true
            },
            data: [
                {name: '非洲', value: 100},
                {name: '欧洲', value: 50},
                // ... 其他地区
            ]
        }
    ]
};

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

案例七：行政区划图

案例简介

使用 ECharts 制作行政区划图，展示各个省份的名称和颜色。

代码示例

// 引入 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);

案例八：地图点击事件

案例简介

使用 ECharts 为地图添加点击事件，当用户点击某个区域时，显示该区域的详细信息。

代码示例

// 引入 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) {
    console.log(params.name + '的详细信息：');
    console.log(params.value);
});

案例九：地图缩放

案例简介

使用 ECharts 为地图添加缩放功能，方便用户查看不同级别的地图。

代码示例

// 引入 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.name === '中国') {
        myChart.setOption({
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    zoom: 1.2
                }
            ]
        });
    }
});

案例十：地图拖动

案例简介

使用 ECharts 为地图添加拖动功能，方便用户查看地图的任意区域。

代码示例

// 引入 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.name === '中国') {
        myChart.setOption({
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    roam: true
                }
            ]
        });
    }
});

案例十一：地图动画效果

案例简介

使用 ECharts 为地图添加动画效果，使地图的加载更加生动。

代码示例

// 引入 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.setOption({
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            animation: true,
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '天津', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
});

案例十二：地图背景图片

案例简介

使用 ECharts 为地图添加背景图片，使地图更加美观。

代码示例

// 引入 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)},
                // ... 其他省份
            ],
            background: {
                image: 'url(http://example.com/image.jpg)'
            }
        }
    ]
};

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

案例十三：地图边框颜色

案例简介

使用 ECharts 为地图设置边框颜色，使地图更加突出。

代码示例

// 引入 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)},
                // ... 其他省份
            ],
            itemStyle: {
                borderColor: '#fff'
            }
        }
    ]
};

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

案例十四：地图标签颜色

案例简介

使用 ECharts 为地图标签设置颜色，使标签更加突出。

代码示例

// 引入 ECharts 主模块
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图标签颜色'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            label: {
                color: '#fff'
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '天津', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

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

案例十五：地图点击高亮

案例简介

使用 ECharts 为地图添加点击高亮效果，当用户点击某个区域时，显示该区域的详细信息并高亮显示。

代码示例

// 引入 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) {
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: params.dataIndex
    });
});

案例十六：地图数据过滤

案例简介

使用 ECharts 为地图添加数据过滤功能，只显示特定的区域。

代码示例

// 引入 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) {
    var data = option.series[0].data;
    var filteredData = data.filter(function (item) {
        return item.name === params.name;
    });
    myChart.setOption({
        series: [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                label: {
                    show: true
                },
                data: filteredData
            }
        ]
    });
});

案例十七：地图缩放级别

案例简介

使用 ECharts 为地图设置缩放级别，方便用户查看不同级别的地图。

代码示例

”`javascript // 引入 ECharts 主模块 var myChart = echarts.init(document.getElementById(‘main’));

// 指定图表的配置项和数据 var option = {

title: {
    text: '地图缩放级别'
分享到：
上一篇 理想汽车踏板案例：揭秘家用车舒适与安全的完美结合
下一篇 万科交房难题揭秘：从业主维权到品质保障，深度解析交房那些事儿

相关文章

理想汽车踏板案例：揭秘家用车舒适与安全的完美结合
2026-11-01
理想照亮人生路：理想是宝贵的财富，如何让梦想成为现实？
2026-11-01
万科交房难题揭秘：从业主维权到品质保障，深度解析交房那些事儿
2026-11-01
万科企业：揭秘中国房地产巨头的发展历程与成功秘诀
2026-11-01