在当今这个数据驱动的时代，地图图表已成为展示地理数据的重要工具。ECharts，作为国内流行的可视化库之一，提供了丰富的地图图表功能。对于新手来说，ECharts地图图表的使用可能会有些门槛，但别担心，通过以下5个实用案例，你将轻松上手，探索数据之美。
案例1：中国31省市GDP分布图
步骤一：准备数据
首先，我们需要准备中国31个省市自治区的GDP数据。这里我们以2020年的数据为例。
var geoCoordMap = {
'北京': [116.46, 39.92],
// ... 其他省市的经纬度
};
var data = [
{name: '北京', value: 34710.7},
// ... 其他省市的GDP
];
步骤二：配置ECharts实例
接下来，我们需要创建一个ECharts实例，并配置地图图表。
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '中国31省市GDP分布图'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 50000,
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: 'GDP',
type: 'map',
mapType: 'china',
data: data,
geoIndex: 0,
label: {
normal: {
show: true
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d',
borderColor: '#111'
}
}
}
]
};
myChart.setOption(option);
步骤三：运行代码，查看效果
将以上代码保存为HTML文件，并在浏览器中打开，即可看到中国31省市GDP分布图。
案例2：全球城市人口密度地图
这个案例我们将使用全球城市人口数据，展示全球城市的人口密度分布。
步骤一：准备数据
我们需要准备全球城市的人口数据，包括城市名称、经纬度和人口数量。
var data = [
{name: '纽约', value: [74.00597, 40.712776, 8558000]},
// ... 其他城市的数据
];
步骤二：配置ECharts实例
配置与案例1类似，只是将地图类型改为'world'。
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '全球城市人口密度地图'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 10000000,
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',
data: data,
geoIndex: 0,
label: {
normal: {
show: true
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d',
borderColor: '#111'
}
}
}
]
};
myChart.setOption(option);
步骤三：运行代码，查看效果
案例3：城市地铁线路图
在这个案例中，我们将使用ECharts绘制一个城市地铁线路图。
步骤一：准备数据
我们需要准备城市地铁线路的起点、终点和经纬度数据。
var data = [
{name: '1号线', coords: [[116.4126, 39.9175], [116.4212, 39.9117]]},
// ... 其他线路的数据
];
步骤二：配置ECharts实例
配置与案例1类似，只是将图表类型改为'lines'。
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '城市地铁线路图'
},
tooltip: {
trigger: 'item'
},
geo: {
map: 'city',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '地铁线路',
type: 'lines',
coordinateSystem: 'geo',
data: data,
lineStyle: {
color: '#fff',
opacity: 0.6,
width: 2
},
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
}
}
]
};
myChart.setOption(option);
步骤三：运行代码，查看效果
案例4：疫情实时地图
在这个案例中，我们将使用ECharts绘制一个疫情实时地图，展示全球疫情的分布情况。
步骤一：准备数据
我们需要准备全球各国的疫情数据，包括国家名称、经纬度和确诊病例数。
var data = [
{name: '美国', value: [100, 40, 50000]},
// ... 其他国家的数据
];
步骤二：配置ECharts实例
配置与案例1类似，只是将图表类型改为'scatter'。
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '疫情实时地图'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 10000,
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: 'scatter',
coordinateSystem: 'geo',
data: data,
symbolSize: function (val) {
return val[2] / 1000;
},
label: {
normal: {
formatter: '{b}: {c}',
position: 'right',
show: true
}
},
itemStyle: {
emphasis: {
label: {
show: true
}
}
}
}
]
};
myChart.setOption(option);
步骤三：运行代码，查看效果
案例5：全球贸易流量地图
在这个案例中，我们将使用ECharts绘制一个全球贸易流量地图，展示全球贸易的流向。
步骤一：准备数据
我们需要准备全球贸易的数据，包括起始国家和目的国家、经纬度和贸易金额。
var data = [
{name: '中国', value: [116.407526, 39.90403, 100]},
// ... 其他数据
];
步骤二：配置ECharts实例
配置与案例1类似，只是将图表类型改为'lines'。
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '全球贸易流量地图'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 1000000,
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: 'lines',
coordinateSystem: 'geo',
data: data,
lineStyle: {
color: '#fff',
opacity: 0.6,
width: 2
},
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
}
}
]
};
myChart.setOption(option);
步骤三：运行代码，查看效果
通过以上5个案例，相信你已经对ECharts地图图表有了初步的了解。接下来，你可以根据自己的需求，探索更多有趣的地图图表应用。记住，多动手实践，才能更好地掌握ECharts地图图表的使用技巧。祝你学习愉快！