ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括地图图表。地图图表在展示地理分布数据时非常有用，可以直观地展示不同地区的数据差异。本文将详细介绍如何使用 ECharts 绘制地图图表，并提供 30 个实用案例供你参考。
一、ECharts 地图图表基础
1.1 地图数据准备
在绘制地图图表之前，需要准备地图数据。ECharts 支持多种地图数据格式，如 GeoJSON、TopoJSON 等。你可以从 ECharts 官方网站下载各种地图数据，或者使用在线工具生成。
1.2 地图配置
绘制地图图表需要配置以下参数：
mapType：指定地图类型，如中国地图、世界地图等。center：设置地图的中心点坐标。zoom：设置地图的缩放比例。roam：设置地图是否可拖拽和缩放。
二、30个实用案例详解
2.1 案例一：中国地图
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
},
geo: {
map: 'china',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: '北京',value: Math.round(Math.random() * 1000)},
{name: '上海',value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
]
}
]
};
myChart.setOption(option);
2.2 案例二：世界地图
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
},
geo: {
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'world',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: 'United States',value: Math.round(Math.random() * 1000)},
{name: 'Canada',value: Math.round(Math.random() * 1000)},
// ... 其他国家数据
]
}
]
};
myChart.setOption(option);
2.3 案例三：中国地图——按省份划分
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
},
geo: {
map: 'china',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: '北京',value: Math.round(Math.random() * 1000)},
{name: '上海',value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
]
}
]
};
myChart.setOption(option);
2.4 案例四：世界地图——按国家划分
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
},
geo: {
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'world',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: 'United States',value: Math.round(Math.random() * 1000)},
{name: 'Canada',value: Math.round(Math.random() * 1000)},
// ... 其他国家数据
]
}
]
};
myChart.setOption(option);
2.5 案例五：中国地图——按城市划分
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
},
geo: {
map: 'china',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: '北京市',value: Math.round(Math.random() * 1000)},
{name: '上海市',value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
]
}
]
};
myChart.setOption(option);
2.6 案例七：世界地图——按城市划分
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
},
geo: {
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'world',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: 'New York',value: Math.round(Math.random() * 1000)},
{name: 'Los Angeles',value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
]
}
]
};
myChart.setOption(option);
2.8 案例九：中国地图——按区域划分
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
},
geo: {
map: 'china',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: '华北',value: Math.round(Math.random() * 1000)},
{name: '东北',value: Math.round(Math.random() * 1000)},
// ... 其他区域数据
]
}
]
};
myChart.setOption(option);
2.10 案例十一：世界地图——按区域划分
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
},
geo: {
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'world',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: 'North America',value: Math.round(Math.random() * 1000)},
{name: 'South America',value: Math.round(Math.random() * 1000)},
// ... 其他区域数据
]
}
]
};
myChart.setOption(option);
2.12 案例十三：中国地图——按行政级别划分
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
},
geo: {
map: 'china',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: '直辖市',value: Math.round(Math.random() * 1000)},
{name: '自治区',value: Math.round(Math.random() * 1000)},
// ... 其他行政级别数据
]
}
]
};
myChart.setOption(option);
2.14 案例十五：世界地图——按行政级别划分
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
},
geo: {
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'world',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: 'Country',value: Math.round(Math.random() * 1000)},
{name: 'Province',value: Math.round(Math.random() * 1000)},
// ... 其他行政级别数据
]
}
]
};
myChart.setOption(option);
2.16 案例十七：中国地图——按经济类型划分
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
},
geo: {
map: 'china',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: '东部',value: Math.round(Math.random() * 1000)},
{name: '中部',value: Math.round(Math.random() * 1000)},
// ... 其他经济类型数据
]
}
]
};
myChart.setOption(option);
2.18 案例十九：世界地图——按经济类型划分
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
},
geo: {
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'world',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: 'Developed Countries',value: Math.round(Math.random() * 1000)},
{name: 'Developing Countries',value: Math.round(Math.random() * 1000)},
// ... 其他经济类型数据
]
}
]
};
myChart.setOption(option);
2.20 案例二十一：中国地图——按人口密度划分
”`javascript var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: '中国地图——按人口密度划分'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 100,
left: 'left',