从新手到高手：30个echarts地图图表实战案例，轻松入门！

在数据分析与可视化领域，ECharts以其易用性和强大的功能受到了广泛关注。地图图表作为ECharts家族中的重要成员，能够直观地展示地域分布和空间关系。本篇文章将为你带来30个ECharts地图图表实战案例，帮助你从新手顺利过渡到高手，轻松入门！

案例一：中国省市区地图

使用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
        }]
    }]
};

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

案例二：世界地图

使用ECharts绘制世界地图，展示全球各地的数据分布。

// 引入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: 100
        }, {
            name: '中国',
            value: 200
        }]
    }]
};

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

案例三：自定义地图

使用ECharts绘制自定义地图，展示特定区域的数据分布。

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入自定义地图数据
require('echarts/map/js/custom');
// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '自定义',
        type: 'map',
        mapType: 'custom',
        label: {
            show: true
        },
        data: [{
            name: '区域1',
            value: 100
        }, {
            name: '区域2',
            value: 200
        }]
    }]
};

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

案例四：热力地图

使用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: 'heatmap',
        mapType: 'china',
        data: [
            [116.3913, 39.9133, 100], // 北京
            [121.4737, 31.2304, 200], // 上海
            [113.2707, 23.1255, 150] // 广州
        ]
    }]
};

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

案例五：气泡地图

使用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: 'scatter',
        coordinateSystem: 'geo',
        data: [
            [116.3913, 39.9133, 100], // 北京
            [121.4737, 31.2304, 200], // 上海
            [113.2707, 23.1255, 150] // 广州
        ],
        symbolSize: function (val) {
            return val[2] / 10;
        }
    }]
};

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

案例六：多级地图

使用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
        }]
    }, {
        name: '北京',
        type: 'map',
        mapType: 'beijing',
        label: {
            show: true
        },
        data: [{
            name: '北京市',
            value: 100
        }]
    }]
};

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

案例七：地图标签

使用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,
            formatter: function (params) {
                return params.name + '：' + params.value;
            }
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 200
        }]
    }]
};

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

案例八：地图动画

使用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
        }]
    }]
};

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

案例九：地图点击事件

使用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
        }]
    }]
};

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

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

案例十：地图联动

使用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
        }]
    }]
};

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

// 为地图添加点击事件
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        // 获取点击区域的地图实例
        var subChart = echarts.init(document.getElementById('subChart'));
        // 指定子图表的配置项和数据
        var subOption = {
            title: {
                text: params.name + '地图'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [{
                name: params.name,
                type: 'map',
                mapType: params.name,
                label: {
                    show: true
                },
                data: [{
                    name: params.name,
                    value: 100
                }]
            }]
        };
        // 使用刚指定的配置项和数据显示子图表
        subChart.setOption(subOption);
    }
});

案例十一：地图缩放

使用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
        }]
    }]
};

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

// 为地图添加鼠标滚轮事件，实现缩放功能
myChart.on('mouseover', function () {
    myChart.dispatchAction({
        type: 'dataZoom',
        start: 0,
        end: 100
    });
});

myChart.on('mouseout', function () {
    myChart.dispatchAction({
        type: 'dataZoom',
        start: 0,
        end: 100
    });
});

案例十二：地图拖拽

使用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
        }]
    }]
};

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

// 为地图添加鼠标拖拽事件
myChart.on('mousedown', function (params) {
    if (params.componentType === 'series') {
        myChart.dispatchAction({
            type: 'dragMap',
            map: params.name
        });
    }
});

案例十三：地图标注

使用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
        }]
    }, {
        name: '标注',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: [{
            name: '北京',
            value: [116.3913, 39.9133, 100]
        }, {
            name: '上海',
            value: [121.4737, 31.2304, 200]
        }]
    }]
};

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

案例十四：地图渐变

使用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
        }]
    }]
};

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

// 为地图添加渐变效果
myChart.dispatchAction({
    type: 'changeGlobal'
});

案例十五：地图阴影

使用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
        }]
    }]
};

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

// 为地图添加阴影效果
myChart.dispatchAction({
    type: 'addShadow'
});

案例十六：地图颜色渐变

使用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: '地图颜色渐变'
},
tooltip: {
    trigger: 'item'
},
series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: [{
        name: '北京',
        value: 100
    }, {
        name: '上海',
        value: 200
    }]
}]

};

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

// 为地图添加颜色渐变效果 myChart.dispatchAction({

type: '