ECharts是一款功能强大的可视化库，它可以帮助开发者轻松地将数据以图表的形式展示出来。其中，地图图表作为ECharts的一个特色功能，能够将地理信息与数据可视化结合，使得数据的展示更加直观和生动。本文将为你介绍50个实用的ECharts地图图表案例，帮助你快速掌握地图图表的制作技巧，让你的数据可视化更加精彩。
1. 世界地图展示各国GDP排名
使用ECharts的地图图表功能，可以轻松地将世界地图与各国GDP数据相结合，直观地展示出各国的经济实力。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '世界GDP排名'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['亚洲', '欧洲', '非洲', '北美洲', '南美洲', '大洋洲']
},
series: [
{
name: 'GDP',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '亚洲'},
{value: 310, name: '欧洲'},
{value: 234, name: '非洲'},
{value: 135, name: '北美洲'},
{value: 1548, name: '南美洲'},
{value: 1548, name: '大洋洲'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
2. 中国地图展示各省GDP排名
通过ECharts的地图图表，可以展示中国各省的GDP排名，让数据更加直观。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '中国各省GDP排名'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}'
},
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: 9000},
{name: '广东', value: 8000},
// ... 其他省份数据
]
}
]
};
myChart.setOption(option);
3. 地图热点图展示城市人口密度
使用ECharts的热点图功能，可以展示城市人口密度分布情况。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市人口密度'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['低', '高'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '人口密度',
type: 'heatmap',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, 1000]},
{name: '上海', value: [121.47, 31.23, 800]},
{name: '广州', value: [113.23, 23.16, 500]},
// ... 其他城市数据
]
}
]
};
myChart.setOption(option);
4. 地图迁徙图展示人口流动
ECharts的迁徙图功能可以展示人口流动情况，帮助分析人口流动趋势。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '人口流动'
},
tooltip: {
trigger: 'item',
formatter: '{b} -> {c}'
},
series: [
{
name: '人口流动',
type: 'lines',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92]},
{name: '上海', value: [121.47, 31.23]},
{name: '广州', value: [113.23, 23.16]},
// ... 其他城市数据
],
lineStyle: {
curveness: 0.2
}
}
]
};
myChart.setOption(option);
5. 地图多级联动展示城市层级信息
通过ECharts的多级联动功能，可以展示城市层级信息，例如展示各个省份的城市列表。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市层级信息'
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
name: '城市层级',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: 100},
{name: '上海', value: 200},
{name: '广东', value: 300},
// ... 其他省份数据
]
}
]
};
myChart.setOption(option);
6. 地图散点图展示城市地理位置
使用ECharts的散点图功能，可以展示城市地理位置信息。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市地理位置'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['低', '高'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '地理位置',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, 1000]},
{name: '上海', value: [121.47, 31.23, 800]},
{name: '广州', value: [113.23, 23.16, 500]},
// ... 其他城市数据
]
}
]
};
myChart.setOption(option);
7. 地图柱状图展示城市人口数量
通过ECharts的柱状图功能，可以展示城市人口数量信息。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市人口数量'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['低', '高'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '人口数量',
type: 'bar',
coordinateSystem: 'geo',
data: [
{name: '北京', value: 1000},
{name: '上海', value: 800},
{name: '广州', value: 500},
// ... 其他城市数据
]
}
]
};
myChart.setOption(option);
8. 地图折线图展示城市人口增长趋势
使用ECharts的折线图功能，可以展示城市人口增长趋势。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市人口增长趋势'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['低', '高'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '人口增长趋势',
type: 'line',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [100, 200, 300, 400, 500]},
{name: '上海', value: [200, 300, 400, 500, 600]},
{name: '广州', value: [300, 400, 500, 600, 700]},
// ... 其他城市数据
]
}
]
};
myChart.setOption(option);
9. 地图雷达图展示城市综合实力
通过ECharts的雷达图功能，可以展示城市综合实力。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市综合实力'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['低', '高'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '综合实力',
type: 'radar',
data: [
{name: '北京', value: [90, 80, 70, 60, 50]},
{name: '上海', value: [80, 70, 60, 50, 40]},
{name: '广州', value: [70, 60, 50, 40, 30]},
// ... 其他城市数据
]
}
]
};
myChart.setOption(option);
10. 地图漏斗图展示城市人口年龄分布
使用ECharts的漏斗图功能，可以展示城市人口年龄分布情况。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市人口年龄分布'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['低', '高'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '年龄分布',
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
position: 'inside',
fontSize: 12
},
data: [
{value: 60, name: '60岁以上'},
{value: 40, name: '40-60岁'},
{value: 20, name: '20-40岁'},
{value: 20, name: '20岁以下'}
]
}
]
};
myChart.setOption(option);
11. 地图饼图展示城市人口性别比例
通过ECharts的饼图功能，可以展示城市人口性别比例。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市人口性别比例'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
series: [
{
name: '性别比例',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '男'},
{value: 310, name: '女'}
]
}
]
};
myChart.setOption(option);
12. 地图环形图展示城市人口职业分布
使用ECharts的环形图功能，可以展示城市人口职业分布情况。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市人口职业分布'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
series: [
{
name: '职业分布',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '白领'},
{value: 310, name: '蓝领'},
{value: 234, name: '自由职业者'},
{value: 135, name: '学生'},
{value: 1548, name: '其他'}
]
}
]
};
myChart.setOption(option);
13. 地图柱状图堆叠展示城市人口结构
通过ECharts的柱状图堆叠功能，可以展示城市人口结构。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市人口结构'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['低', '高'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '人口结构',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'top'
},
data: [
{name: '60岁以上', value: 100},
{name: '40-60岁', value: 200},
{name: '20-40岁', value: 300},
{name: '20岁以下', value: 400}
]
}
]
};
myChart.setOption(option);
14. 地图折线图堆叠展示城市人口增长趋势
使用ECharts的折线图堆叠功能，可以展示城市人口增长趋势。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市人口增长趋势'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['低', '高'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '人口增长趋势',
type: 'line',
stack: '总量',
data: [
{name: '北京', value: [100, 200, 300, 400, 500]},
{name: '上海', value: [200, 300, 400, 500, 600]},
{name: '广州', value: [300, 400, 500, 600, 700]},
// ... 其他城市数据
]
}
]
};
myChart.setOption(option);
15. 地图散点图堆叠展示城市地理位置
通过ECharts的散点图堆叠功能，可以展示城市地理位置信息。
// 示例代码
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市地理位置'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['低', '高'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '地理位置',
type: 'scatter',
stack: '总量',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, 1000]},
{name: '上海', value: [121.47, 31.23, 800]},
{name: '广州', value: [113.23, 23.16, 500]},
// ... 其他城市数据
]
}
]
};
myChart.setOption(option);
16. 地图柱状图堆叠展示城市人口数量
使用ECharts的柱状图堆叠功能，可以展示城市人口数量信息。
”`javascript // 示例代码 var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: