ECharts 是一款使用 JavaScript 实现的开源可视化库，它可以帮助我们快速开发数据可视化应用。其中，地图图表是 ECharts 中的一个重要组成部分，它能够将地理信息与数据相结合，直观地展示地域分布情况。对于新手来说，掌握 ECharts 地图图表制作技巧显得尤为重要。本文将为大家带来 20 个实战案例解析，帮助大家轻松掌握 ECharts 地图图表制作。
一、ECharts 地图图表基础
1.1 地图数据格式
ECharts 地图图表需要使用 GeoJSON 格式的地图数据。GeoJSON 是一种用于地理空间数据的格式，它定义了点、线、面等地理要素的结构。在 ECharts 中，我们可以通过在线工具或者第三方 API 获取 GeoJSON 格式的地图数据。
1.2 地图配置项
ECharts 地图图表的配置项主要包括以下几个部分：
- 地图类型：包括中国地图、世界地图、省市区地图等。
- 地图数据：GeoJSON 格式的地图数据。
- 视觉映射：将数据与地图上的颜色、形状等进行关联。
- 交互功能：如缩放、拖拽、点击事件等。
二、实战案例解析
2.1 案例一：中国地图展示
步骤 1：引入 ECharts 和地图数据
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<!-- 引入中国地图数据 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript">
// 初始化地图图表
var myChart = echarts.init(document.getElementById('container'));
// 配置地图图表
var option = {
// ...
};
// 渲染图表
myChart.setOption(option);
</script>
</body>
</html>
步骤 2：配置地图图表
var option = {
title: {
text: '中国地图展示',
left: 'center'
},
tooltip: {
trigger: 'item'
},
visualMap: {
type: 'continuous',
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
calculable: true
},
series: [{
name: '中国地图',
type: 'map',
mapType: 'china',
roam: true,
label: {
show: false,
position: 'center',
formatter: function(params){
return params.name;
}
},
data: [
// ...
]
}]
};
步骤 3：渲染图表
在上述代码中，我们已经完成了地图图表的配置。接下来，只需要调用 myChart.setOption(option) 即可渲染图表。
2.2 案例二：世界地图展示
与案例一类似，我们只需要将地图类型从 china 改为 world 即可。
series: [{
name: '世界地图',
type: 'map',
mapType: 'world',
roam: true,
label: {
show: false,
position: 'center',
formatter: function(params){
return params.name;
}
},
data: [
// ...
]
}]
2.3 案例三：省市区地图展示
与案例一类似，我们只需要将地图类型从 china 改为 province、city 或 circuit 即可。
series: [{
name: '省市区地图',
type: 'map',
mapType: 'province', // 或者 city 或 circuit
roam: true,
label: {
show: false,
position: 'center',
formatter: function(params){
return params.name;
}
},
data: [
// ...
]
}]
2.4 案例四：自定义地图
ECharts 支持自定义地图，我们只需要将 GeoJSON 格式的地图数据替换为自定义的地图数据即可。
series: [{
name: '自定义地图',
type: 'map',
mapType: 'custom',
roam: true,
label: {
show: false,
position: 'center',
formatter: function(params){
return params.name;
}
},
data: [
// ...
],
// 自定义地图数据
geoIndex: 0,
map: {
// ...
}
}]
2.5 案例五：多系列地图
ECharts 地图图表支持多系列，我们可以将多个系列叠加在同一张地图上。
series: [
// ...
{
name: '系列1',
type: 'map',
mapType: 'china',
// ...
data: [
// ...
]
},
{
name: '系列2',
type: 'map',
mapType: 'china',
// ...
data: [
// ...
]
}
]
2.6 案例六：散点图地图
ECharts 地图图表支持散点图，我们可以将散点图叠加在地图上。
series: [
// ...
{
name: '散点图',
type: 'scatter',
coordinateSystem: 'geo',
data: [
// ...
],
symbolSize: 10,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
}
}
]
2.7 案例七：热力图地图
ECharts 地图图表支持热力图，我们可以将热力图叠加在地图上。
series: [
// ...
{
name: '热力图',
type: 'heatmap',
coordinateSystem: 'geo',
data: [
// ...
],
pointSize: 10,
blurSize: 20
}
]
2.8 案例八：地理坐标系散点图
ECharts 地图图表支持地理坐标系散点图，我们可以将散点图叠加在地图上。
series: [
// ...
{
name: '地理坐标系散点图',
type: 'scatter',
coordinateSystem: 'geo',
data: [
// ...
],
symbolSize: 10,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
}
}
]
2.9 案例十：自定义视觉映射
ECharts 地图图表支持自定义视觉映射，我们可以根据数据值将地图上的颜色、形状等进行关联。
visualMap: {
type: 'continuous',
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
calculable: true,
inRange: {
color: ['#313695', '#4575B4', '#74A9CF', '#B3CDE3', '#FFFFCC']
}
}
2.11 案例十二：地图缩放和拖拽
ECharts 地图图表支持缩放和拖拽功能，我们可以通过配置 roam 属性来实现。
series: [{
name: '中国地图',
type: 'map',
mapType: 'china',
roam: true, // 启用缩放和拖拽
// ...
}]
2.13 案例十三：点击事件
ECharts 地图图表支持点击事件，我们可以通过配置 click 事件回调函数来实现。
tooltip: {
trigger: 'item',
formatter: function(params){
return params.name + '：' + params.value;
}
},
series: [{
name: '中国地图',
type: 'map',
mapType: 'china',
// ...
data: [
// ...
],
click: function(params){
// 点击事件回调函数
console.log(params);
}
}]
2.14 案例十四：地图边界
ECharts 地图图表支持地图边界，我们可以通过配置 border 属性来实现。
series: [{
name: '中国地图',
type: 'map',
mapType: 'china',
// ...
data: [
// ...
],
label: {
show: false,
position: 'center',
formatter: function(params){
return params.name;
}
},
border: {
show: true,
color: '#fff',
linestyle: 'solid'
}
}]
2.15 案例十五：地图阴影
ECharts 地图图表支持地图阴影，我们可以通过配置 shadowBlur、shadowColor 和 shadowOffset 属性来实现。
series: [{
name: '中国地图',
type: 'map',
mapType: 'china',
// ...
data: [
// ...
],
label: {
show: false,
position: 'center',
formatter: function(params){
return params.name;
}
},
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffset: [5, 5]
}]
2.16 案例十六：地图样式
ECharts 地图图表支持地图样式，我们可以通过配置 style 属性来实现。
series: [{
name: '中国地图',
type: 'map',
mapType: 'china',
// ...
data: [
// ...
],
label: {
show: false,
position: 'center',
formatter: function(params){
return params.name;
}
},
style: {
areaColor: '#f5f5f5',
borderColor: '#ddd'
}
}]
2.17 案例十八：地图动画
ECharts 地图图表支持地图动画，我们可以通过配置 animation 属性来实现。
series: [{
name: '中国地图',
type: 'map',
mapType: 'china',
// ...
data: [
// ...
],
label: {
show: false,
position: 'center',
formatter: function(params){
return params.name;
}
},
animation: true
}]
2.19 案例二十：地图数据更新
ECharts 地图图表支持地图数据更新，我们可以通过调用 setOption 方法来实现。
myChart.setOption({
series: [{
name: '中国地图',
type: 'map',
mapType: 'china',
// ...
data: [
// 更新后的数据
]
}]
});
通过以上 20 个实战案例解析，相信大家对 ECharts 地图图表制作技巧有了更深入的了解。在实际应用中，我们可以根据需求灵活运用这些技巧，制作出美观、实用的地图图表。希望本文对大家有所帮助！