地图图表作为一种直观的数据展示方式，在各类应用场景中扮演着重要的角色。ECharts作为国内流行的开源图表库，提供了丰富的地图图表功能。本文将为你带来30个实用案例解析，帮助你轻松上手ECharts地图图表，让你的数据可视化更加精彩。
一、ECharts地图图表概述
1.1 ECharts简介
ECharts是由百度团队开发的开源可视化库，它提供了丰富的图表类型，包括折线图、柱状图、饼图、地图图表等。ECharts支持多种前端框架，如Vue、React等，方便开发者快速集成。
1.2 ECharts地图图表特点
- 支持多种地图类型，如中国地图、世界地图、行政区划地图等；
- 支持自定义地图样式，包括颜色、阴影、标注等；
- 支持数据可视化，如点状、线状、面状等；
- 支持多种交互效果，如点击、鼠标悬停等。
二、ECharts地图图表30个实用案例解析
2.1 案例一：中国地图可视化
使用ECharts实现中国地图可视化，展示各省市的GDP数据。
// 中国地图数据
var geoCoordMap = {
'北京': [116.46,39.92],
'天津': [117.2,39.3],
// ... 其他省市数据
};
// 绘制地图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '中国地图可视化'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value;
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: 'GDP',
type: 'map',
mapType: 'china',
data: [
{name: '北京', value: 20000},
{name: '天津', value: 15000},
// ... 其他省市数据
],
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#111',
areaColor: '#f4e9e2'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
};
myChart.setOption(option);
2.2 案例二：世界地图可视化
使用ECharts实现世界地图可视化，展示各国GDP数据。
// 世界地图数据
var geoCoordMap = {
'USA': [-74.005974, 40.712776],
'Canada': [-102.528474, 56.130366],
// ... 其他国家数据
};
// 绘制地图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '世界地图可视化'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value;
}
},
geo: {
map: 'world',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: 'GDP',
type: 'map',
mapType: 'world',
data: [
{name: 'USA', value: 20000},
{name: 'Canada', value: 15000},
// ... 其他国家数据
],
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#111',
areaColor: '#f4e9e2'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
};
myChart.setOption(option);
2.3 案例三：行政区划地图可视化
使用ECharts实现行政区划地图可视化，展示某市各区GDP数据。
// 行政区划地图数据
var geoCoordMap = {
'市辖区': [116.391276, 39.904989],
'县': [116.391276, 39.904989],
// ... 其他区县数据
};
// 绘制地图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '行政区划地图可视化'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value;
}
},
geo: {
map: '某市',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: 'GDP',
type: 'map',
mapType: '某市',
data: [
{name: '市辖区', value: 20000},
{name: '县', value: 15000},
// ... 其他区县数据
],
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#111',
areaColor: '#f4e9e2'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
};
myChart.setOption(option);
2.4 案例四：点状地图可视化
使用ECharts实现点状地图可视化，展示某城市各区域人口密度。
// 点状地图数据
var geoCoordMap = {
'区域一': [116.391276, 39.904989],
'区域二': [116.391276, 39.904989],
// ... 其他区域数据
};
// 绘制地图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '点状地图可视化'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value;
}
},
geo: {
map: '某城市',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '人口密度',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '区域一', value: [116.391276, 39.904989, 1000]},
{name: '区域二', value: [116.391276, 39.904989, 2000]},
// ... 其他区域数据
],
symbolSize: 10,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#111',
areaColor: '#f4e9e2'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
};
myChart.setOption(option);
2.5 案例六：线状地图可视化
使用ECharts实现线状地图可视化，展示某城市地铁线路。
// 线状地图数据
var lineData = [
{
name: '线路一',
coords: [[116.391276, 39.904989], [116.391276, 39.904989], [116.391276, 39.904989]]
},
{
name: '线路二',
coords: [[116.391276, 39.904989], [116.391276, 39.904989], [116.391276, 39.904989]]
}
];
// 绘制地图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '线状地图可视化'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value;
}
},
geo: {
map: '某城市',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '地铁线路',
type: 'lines',
coordinateSystem: 'geo',
data: lineData,
symbolSize: 10,
polyline: true,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbol: 'circle',
symbolSize: 3
},
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#111',
areaColor: '#f4e9e2'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
};
myChart.setOption(option);
2.7 案例八：地图热力图可视化
使用ECharts实现地图热力图可视化，展示某城市空气质量指数。
// 地图热力图数据
var geoCoordMap = {
'区域一': [116.391276, 39.904989],
'区域二': [116.391276, 39.904989],
// ... 其他区域数据
};
// 绘制地图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '地图热力图可视化'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value;
}
},
geo: {
map: '某城市',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '空气质量指数',
type: 'heatmap',
coordinateSystem: 'geo',
data: [
{name: '区域一', value: [116.391276, 39.904989, 100]},
{name: '区域二', value: [116.391276, 39.904989, 200]},
// ... 其他区域数据
],
pointSize: 20,
blurSize: 30,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#111',
areaColor: '#f4e9e2'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
};
myChart.setOption(option);
2.9 案例十：地图雷达图可视化
使用ECharts实现地图雷达图可视化，展示某城市居民消费水平。
// 地图雷达图数据
var geoCoordMap = {
'区域一': [116.391276, 39.904989],
'区域二': [116.391276, 39.904989],
// ... 其他区域数据
};
// 绘制地图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '地图雷达图可视化'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value;
}
},
geo: {
map: '某城市',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '消费水平',
type: 'radar',
coordinateSystem: 'geo',
data: [
{name: '区域一', value: [10, 20, 30, 40, 50]},
{name: '区域二', value: [15, 25, 35, 45, 55]},
// ... 其他区域数据
],
symbolSize: 10,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#111',
areaColor: '#f4e9e2'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
};
myChart.setOption(option);
2.11 案例十二：地图散点图可视化
使用ECharts实现地图散点图可视化，展示某城市各区域人口密度。
// 地图散点图数据
var geoCoordMap = {
'区域一': [116.391276, 39.904989],
'区域二': [116.391276, 39.904989],
// ... 其他区域数据
};
// 绘制地图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '地图散点图可视化'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value;
}
},
geo: {
map: '某城市',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '人口密度',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '区域一', value: [116.391276, 39.904989, 1000]},
{name: '区域二', value: [116.391276, 39.904989, 2000]},
// ... 其他区域数据
],
symbolSize: 10,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#111',
areaColor: '#f4e9e2'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
};
myChart.setOption(option);
2.13 案例十四：地图柱状图可视化
使用ECharts实现地图柱状图可视化，展示某城市各区域人口数量。
// 地图柱状图数据
var geoCoordMap = {
'区域一': [116.391276, 39.904989],
'区域二': [116.391276, 39.904989],
// ... 其他区域数据
};
// 绘制地图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '地图柱状图可视化'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ': ' + params.value;
}
},
geo: {
map: '某城市',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '人口数量',
type: 'bar',
coordinateSystem: 'geo',
data: [
{name: '区域一', value: 10000},
{name: '区域二', value: 20000},
// ... 其他区域数据
],
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
borderColor: '#111',
areaColor: '#f4e9e2'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
};
myChart.setOption(option);
2.15 案例十六：地图折线图可视化
使用ECharts实现地图折线图可视化，展示某城市各区域气温变化。
”`javascript // 地图折线图数据 var geoCoordMap = {