地图图表作为一种直观展示地理分布和空间关系的数据可视化工具，在各个领域都有广泛的应用。ECharts作为一款强大的前端图表库，提供了丰富的地图图表功能。本文将详细介绍30个ECharts地图图表的实用案例，帮助您轻松掌握地图图表的制作技巧，提升数据可视化的效果。
案例一：中国省份地图
案例分析：展示中国各个省份的名称和简称。
// 示例代码
var chart = echarts.init(document.getElementById('chinaMap'));
var option = {
title: {
text: '中国省份地图',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '中国',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: 100},
{name: '上海', value: 200},
// ... 其他省份
]
}
]
};
chart.setOption(option);
案例二：全球地图
案例分析：展示全球各个国家和地区的名称和简称。
// 示例代码
var chart = echarts.init(document.getElementById('worldMap'));
var option = {
title: {
text: '全球地图',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '全球',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 100},
{name: '英国', value: 200},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
案例三：自定义地图
案例分析：展示自定义地图，例如某个城市的区域分布。
// 示例代码
var chart = echarts.init(document.getElementById('customMap'));
var option = {
title: {
text: '自定义地图',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '自定义区域',
type: 'map',
mapType: 'custom',
label: {
show: true
},
data: [
{name: '区域A', value: 100},
{name: '区域B', value: 200},
// ... 其他区域
]
}
]
};
chart.setOption(option);
案例四：散点地图
案例分析：展示散点地图，例如城市人口分布。
// 示例代码
var chart = echarts.init(document.getElementById('scatterMap'));
var option = {
title: {
text: '散点地图',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '人口分布',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92]},
{name: '上海', value: [121.47, 31.23]},
// ... 其他城市
]
}
]
};
chart.setOption(option);
案例五：热力地图
案例分析：展示热力地图，例如某个城市的温度分布。
// 示例代码
var chart = echarts.init(document.getElementById('heatmapMap'));
var option = {
title: {
text: '热力地图',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '温度分布',
type: 'heatmap',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, 30]},
{name: '上海', value: [121.47, 31.23, 20]},
// ... 其他城市
]
}
]
};
chart.setOption(option);
案例六：三维地图
案例分析：展示三维地图，例如城市高楼分布。
// 示例代码
var chart = echarts.init(document.getElementById('3DMap'));
var option = {
title: {
text: '三维地图',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '高楼分布',
type: 'bar3D',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, 200]},
{name: '上海', value: [121.47, 31.23, 150]},
// ... 其他城市
]
}
]
};
chart.setOption(option);
案例七：地图动画
案例分析：展示地图动画效果，例如世界地图的旋转和放大。
// 示例代码
var chart = echarts.init(document.getElementById('animationMap'));
var option = {
title: {
text: '地图动画',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
animation: true,
label: {
show: true
},
data: [
{name: '美国', value: 100},
{name: '英国', value: 200},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
案例八：地图点击事件
案例分析：展示地图点击事件，例如点击某个国家或地区获取详细信息。
// 示例代码
var chart = echarts.init(document.getElementById('clickMap'));
var option = {
title: {
text: '地图点击事件',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + '：' + params.value;
}
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 100},
{name: '英国', value: 200},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
chart.on('click', function (params) {
console.log(params.name + '：' + params.value);
});
案例九：地图缩放和旋转
案例分析：展示地图缩放和旋转功能，例如通过鼠标滚轮和拖动调整地图视角。
// 示例代码
var chart = echarts.init(document.getElementById('zoomAndRotateMap'));
var option = {
title: {
text: '地图缩放和旋转',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
zoom: 1.2, // 初始缩放比例
rotation: 45, // 初始旋转角度
label: {
show: true
},
data: [
{name: '美国', value: 100},
{name: '英国', value: 200},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
案例十：地图自定义颜色
案例分析：展示地图自定义颜色功能，例如根据不同数值范围设置颜色。
// 示例代码
var chart = echarts.init(document.getElementById('customColorMap'));
var option = {
title: {
text: '地图自定义颜色',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 100},
{name: '英国', value: 200},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
案例十一：地图交互效果
案例分析：展示地图交互效果，例如点击某个国家或地区弹出信息框。
// 示例代码
var chart = echarts.init(document.getElementById('interactiveMap'));
var option = {
title: {
text: '地图交互效果',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + '<br>' + '人口：' + params.value;
}
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 100},
{name: '英国', value: 200},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
chart.on('click', function (params) {
var infoBox = document.createElement('div');
infoBox.style.position = 'absolute';
infoBox.style.left = params.pageX + 'px';
infoBox.style.top = params.pageY + 'px';
infoBox.style.background = '#fff';
infoBox.style.padding = '10px';
infoBox.innerHTML = params.name + '<br>' + '人口：' + params.value;
document.body.appendChild(infoBox);
setTimeout(function () {
document.body.removeChild(infoBox);
}, 3000);
});
案例十二：地图层级切换
案例分析：展示地图层级切换功能，例如切换到卫星地图或三维地图。
// 示例代码
var chart = echarts.init(document.getElementById('levelSwitchMap'));
var option = {
title: {
text: '地图层级切换',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 100},
{name: '英国', value: 200},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
chart.on('click', function (params) {
if (chart.getOption().series[0].mapType === 'world') {
chart.setOption({
series: [{
mapType: 'satellite'
}]
});
} else {
chart.setOption({
series: [{
mapType: 'world'
}]
});
}
});
案例十三：地图多数据层
案例分析：展示地图多数据层功能，例如叠加多个数据层，例如人口、GDP等。
// 示例代码
var chart = echarts.init(document.getElementById('multiLayerMap'));
var option = {
title: {
text: '地图多数据层',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '人口分布',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 100},
{name: '英国', value: 200},
// ... 其他国家和地区
]
},
{
name: 'GDP分布',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 200},
{name: '英国', value: 300},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
案例十四：地图数据动态更新
案例分析：展示地图数据动态更新功能，例如实时更新某个国家的经济数据。
// 示例代码
var chart = echarts.init(document.getElementById('dynamicMap'));
var option = {
title: {
text: '地图数据动态更新',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 100},
{name: '英国', value: 200},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
// 动态更新数据
function updateData() {
chart.setOption({
series: [{
data: [
{name: '美国', value: 150},
{name: '英国', value: 250},
// ... 其他国家和地区
]
}]
});
}
// 每5秒更新一次数据
setInterval(updateData, 5000);
案例十五：地图数据筛选
案例分析：展示地图数据筛选功能，例如筛选出人口超过1000万的国家或地区。
// 示例代码
var chart = echarts.init(document.getElementById('filterMap'));
var option = {
title: {
text: '地图数据筛选',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 100000000},
{name: '英国', value: 80000000},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
// 筛选人口超过1000万的国家或地区
chart.dispatchAction({
type: 'dataZoom',
start: 0,
end: 100
});
案例十六：地图数据排序
案例分析：展示地图数据排序功能，例如按照人口数量降序排列。
// 示例代码
var chart = echarts.init(document.getElementById('sortMap'));
var option = {
title: {
text: '地图数据排序',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '美国', value: 100000000},
{name: '英国', value: 80000000},
// ... 其他国家和地区
]
}
]
};
chart.setOption(option);
// 按人口数量降序排列
chart.setOption({
series: [{
data: chart.getOption().series[0].data.sort(function (a, b) {
return b.value - a.value;
})
}]
});
案例十七：地图数据聚合
案例分析：展示地图数据聚合功能，例如将相邻的省份合并成一个更大的区域。
// 示例代码
var chart = echarts.init(document.getElementById('aggregateMap'));
var option = {
title: {
text: '地图数据聚合',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '中国省份地图',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: 100},
{name: '天津', value: 200},
// ... 其他省份
]
}
]
};
chart.setOption(option);
// 将相邻的省份合并成一个更大的区域
chart.setOption({
series: [{
data: chart.getOption().series[0].data.map(function (item) {
var neighbor = null;
if (item.name === '北京') {
neighbor = chart.getOption().series[0].data.find(function (item) {
return item.name === '天津';
});
}
if (neighbor) {
return {
name: '京津冀',
value: item.value + neighbor.value
};
}
return item;
})
}]
};
案例十八：地图数据可视化效果增强
案例分析：展示地图数据可视化效果增强，例如使用渐变色填充和边框高亮显示。
”`javascript // 示例代码 var chart = echarts.init(document.getElementById(‘visualEffectMap’));
var option = {
title: {
text: '地图数据可视化效果增强',
subtext: '数据来源：某网站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
calculable: true,
seriesIndex: 0,
inRange: {
color: ['#3136