ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括地图图表。地图图表可以用来展示地理位置信息，是数据可视化中非常实用的一种类型。本文将带你从新手到高手，通过实战案例来揭秘 ECharts 地图图表的制作过程。
初识 ECharts 地图图表
在开始实战之前，我们先来了解一下 ECharts 地图图表的基本概念。ECharts 地图图表主要分为以下几类：
- 中国地图：展示中国各省份、直辖市、自治区等行政区划的地图。
- 世界地图：展示全球各个国家和地区的地图。
- 自定义地图：可以根据自己的需求，通过 GeoJSON 格式定义地图。
实战案例一：中国地图基础展示
1. 准备工作
首先，我们需要引入 ECharts 库和地图数据。这里以中国地图为例，可以使用 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>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '中国地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '中国',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京',
value: Math.round(Math.random() * 1000)
}, {
name: '广东',
value: Math.round(Math.random() * 1000)
}]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
2. 分析与总结
在这个案例中，我们通过引入 ECharts 库和地图数据，创建了一个简单的中国地图图表。通过修改 data 数组中的内容，可以展示不同省份或城市的数值信息。
实战案例二：世界地图基础展示
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>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/world.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '世界地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '世界',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [{
name: '美国',
value: Math.round(Math.random() * 1000)
}, {
name: '中国',
value: Math.round(Math.random() * 1000)
}]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
2. 分析与总结
在这个案例中，我们通过引入 ECharts 库和世界地图数据，创建了一个简单的世界地图图表。与世界地图相比，中国地图在数据上更加丰富，可以展示更多省份或城市的数值信息。
实战案例三：自定义地图
1. 准备工作
自定义地图需要使用 GeoJSON 格式定义地图。这里我们以一个简单的矩形区域为例。
<!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>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var geoCoordMap = {
'北京': [116.46, 39.92],
'上海': [121.48, 31.22],
'广州': [113.23, 23.16],
'深圳': [114.07, 22.62]
};
var option = {
title: {
text: '自定义地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '自定义地图',
type: 'map',
mapType: 'custom',
label: {
show: true
},
data: [{
name: '北京',
value: Math.round(Math.random() * 1000)
}, {
name: '上海',
value: Math.round(Math.random() * 1000)
}, {
name: '广州',
value: Math.round(Math.random() * 1000)
}, {
name: '深圳',
value: Math.round(Math.random() * 1000)
}],
coordinateSystem: 'geo',
geoIndex: 0,
itemStyle: {
areaColor: '#f4e925',
borderColor: '#f4e925'
},
emphasis: {
itemStyle: {
areaColor: '#f4e925'
}
},
regions: [{
name: '北京',
itemStyle: {
areaColor: '#f4e925'
}
}, {
name: '上海',
itemStyle: {
areaColor: '#f4e925'
}
}, {
name: '广州',
itemStyle: {
areaColor: '#f4e925'
}
}, {
name: '深圳',
itemStyle: {
areaColor: '#f4e925'
}
}]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
2. 分析与总结
在这个案例中，我们通过 GeoJSON 格式定义了一个自定义地图，并展示了四个城市的数值信息。通过修改 geoCoordMap 和 regions 数组，可以定义更多城市的地理位置和区域样式。
总结
通过以上三个实战案例，我们学习了如何使用 ECharts 地图图表展示地理位置信息。在实际应用中，可以根据需求选择合适的地图类型、数据来源和样式配置。希望本文能帮助你从新手到高手，更好地掌握 ECharts 地图图表的制作技巧。