案例

新手必看！轻松掌握echarts地图图表制作，50个实用案例教你快速上手

2026-10-09 0 阅读

地图图表是一种非常直观的数据展示方式，它能够将地理信息与数据统计相结合，帮助我们更好地理解地域分布和趋势。ECharts 是一款功能强大的 JavaScript 图表库，它支持多种图表类型，包括地图图表。对于新手来说，掌握 ECharts 地图图表制作可能有些挑战，但不用担心，本文将为你提供 50 个实用案例，帮助你快速上手！

1. ECharts 地图图表基础

1.1 ECharts 地图图表简介

ECharts 地图图表是一种将地理信息与数据统计相结合的图表类型。它可以帮助你展示地理位置上的数据分布、趋势等信息。

1.2 ECharts 地图图表特点

  • 高度可视化：直观展示地理信息与数据统计
  • 支持多种地图类型：包括中国地图、世界地图等
  • 动态效果：支持地图缩放、平移、点击事件等
  • 丰富的配置项：满足各种数据展示需求

1.3 ECharts 地图图表制作步骤

  1. 引入 ECharts 地图图表库
  2. 准备地图数据
  3. 配置地图图表参数
  4. 初始化地图图表

2. 50个实用案例

2.1 案例一：中国地图展示

使用 ECharts 地图图表展示中国地图，并标注各省份的GDP数据。

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 10000},
                {name: '上海', value: 8000},
                // ... 其他省份数据
            ]
        }
    ]
};

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

2.2 案例二：世界地图展示

使用 ECharts 地图图表展示世界地图，并标注各国家的 GDP 数据。

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '中国', value: 10000},
                {name: '美国', value: 8000},
                // ... 其他国家数据
            ]
        }
    ]
};

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

2.3 案例三：地图热力图

使用 ECharts 地图图表展示地图热力图，并标注各地区的温度数据。

// 引入 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: '{a} <br/>{b} : {c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '温度',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, 20]},
                {name: '上海', value: [121.48, 31.22, 30]},
                // ... 其他地区数据
            ]
        }
    ]
};

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

2.4 案例四：地图点击事件

使用 ECharts 地图图表展示地图，并实现点击事件。

// 引入 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: '{a} <br/>{b} : {c}'
    },
    series: [
        {
            name: '点击事件',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            animation: false
        }
    ]
};

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

// 监听点击事件
myChart.on('click', function (params) {
    console.log(params.name + '被点击了！');
});

2.5 案例五：地图缩放与平移

使用 ECharts 地图图表展示地图，并实现缩放与平移功能。

// 引入 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, // 启用缩放与平移
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ]
        }
    ]
};

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

2.6 案例六：地图动画效果

使用 ECharts 地图图表展示地图，并实现动画效果。

// 引入 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, // 启用动画效果
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ]
        }
    ]
};

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

2.7 案例七：地图自定义样式

使用 ECharts 地图图表展示地图，并自定义地图样式。

// 引入 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
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ]
        }
    ]
};

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

2.8 案例九：地图区域阴影效果

使用 ECharts 地图图表展示地图，并添加区域阴影效果。

// 引入 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
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111',
                    shadowColor: '#222',
                    shadowBlur: 10
                }
            },
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ]
        }
    ]
};

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

2.10 案例十一：地图点击跳转

使用 ECharts 地图图表展示地图，并实现点击跳转功能。

// 引入 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: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            animation: false
        }
    ]
};

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

// 监听点击事件
myChart.on('click', function (params) {
    // 跳转到目标页面
    window.location.href = 'https://www.example.com/' + params.name;
});

2.12 案例十三：地图联动效果

使用 ECharts 地图图表展示地图，并实现联动效果。

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

// 初始化地图图表
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));

// 指定图表的配置项和数据
var option1 = {
    title: {
        text: '地图联动效果 - 图1'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

var option2 = {
    title: {
        text: '地图联动效果 - 图2'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
myChart2.setOption(option2);

// 监听图1的点击事件
myChart1.on('click', function (params) {
    // 调用图2的点击事件
    myChart2.dispatchAction({
        type: 'click',
        name: params.name
    });
});

// 监听图2的点击事件
myChart2.on('click', function (params) {
    // 调用图1的点击事件
    myChart1.dispatchAction({
        type: 'click',
        name: params.name
    });
});

2.14 案例十五：地图数据动态更新

使用 ECharts 地图图表展示地图，并实现数据动态更新。

// 引入 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: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

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

// 动态更新数据
function updateData() {
    var newData = [
        {name: '北京', value: 150},
        {name: '上海', value: 250},
        // ... 其他省份数据
    ];
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}

// 每隔 5 秒更新一次数据
setInterval(updateData, 5000);

2.16 案例十七：地图多级联动

使用 ECharts 地图图表展示地图，并实现多级联动效果。

// 引入 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: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

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

// 监听点击事件
myChart.on('click', function (params) {
    // 获取点击的省份的市数据
    var cityData = getCityData(params.name);

    // 更新地图数据
    myChart.setOption({
        series: [{
            data: cityData
        }]
    });
});

// 获取市数据的方法
function getCityData(province) {
    // ... 获取市数据的逻辑
}

2.18 案例十九：地图自定义标签

使用 ECharts 地图图表展示地图，并自定义标签。

”`javascript // 引入 ECharts 主模块 var echarts = require(‘echarts/lib/echarts’); // 引入地图数据 require(‘echarts/map/js/china’);

// 初始化地图图表 var myChart = echarts.init(document.getElementById(‘main’));

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

title: {
    text: '地图自定义标签
分享到：
上一篇 深度学习新宠：TensorFlow实战解析，看这些行业高手如何玩转AI！
下一篇 掌握隐私密码：tails系统守护个人数据安全的应用启示

相关文章

深度学习新宠：TensorFlow实战解析，看这些行业高手如何玩转AI！
2026-10-09
解锁开源新力：AlmaLinux应用案例解析，教你轻松上手企业级项目
2026-10-09
掌握隐私密码：tails系统守护个人数据安全的应用启示
2026-10-09
揭秘家居装修：如何用响应式设计打造适配所有屏幕的完美家居空间
2026-10-09