地图数据展示
刀刀
0字
0分钟
2026/8/16
JS 地图数据准备
想要实现地图数据效果，需要准备以下两个数据：
地图边界数据
这个数据不需要自己手写，手写也不现实，可以去往中国地图数据官网下载相关 JSON 文件。官网指路：中国地图数据 。
关联交互数据
根据项目需求，如疫情地图，每个省份的疫情人数等。
JS 地图展示
首先准备好一个容器放地图：
html
<div class="geo"></div>然后引入 echart.js 做地图处理，也可以选择其他数据可视化的第三方库：
html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts/min.js"></script>接着就要手写逻辑了，具体可以查看官方文档：
初始化获得
echarts的实例，该实例有很多方法可以使用在图片加载期间使用
showLoading()方法加载loading效果使用
fetch远程请求地图数据和关联数据使用
echarts中的注册方法registerMap()注册地图数据通过
setOption()方法配置地图相关信息，如：title ：
text图表的标题tooltip ：鼠标悬停内容提示
其中，
formatter为文字提示格式visualMap ：可视地图，一般用户设置不同颜色来区分展示数据差异（选填）
其中，
top、left、bottom、right为可视地图显示的位置；min、max为区间数据的最值；text为文本，默认为数值文本；calculable为布尔值，是能允许控制区间series ：显示的内容（重点）
类型
type注册地图名称
map能否缩放和平移
roam缩放比例控制
scaleLimit关联数据
data
最后加载完毕，通过
hideLoading()方法把loading效果取消
JS 地图数据展示代码
js
(async function() {
// 为类名为geo的div初始化，获取echart实例
const myChart = echarts.init(document.querySelector('.geo'))
// 开启loading效果
myChart.showLoading()
// 通过相对路径获取内容
const resp = await fetch('./china.geojson.json').then((resp) => resp.json())
const users = await fetch('./user.json').then((resp) => resp.json())
// 注册地图数据
echarts.registerMap('China', resp)
myChart.setOption({
title: {
text: '用户分布图' // 标题
},
// 配置该项，鼠标悬停有提示
tooltip: {
formatter: '{b} 用户人数 {c} 人'
}
// 可视地图
visualMap: {
left: 'left',
top: 'center',
min: 0,
max: 10000,
text: ['高', '低'],
calculable: true,
},
series: [
{
type: 'map',
map: 'China',
roam: true,
scaleLimit: {
min: 0.7,
max: 3
},
data: users
}
]
})
// 关闭loading效果
myChart.hideLoading()
})贡献者
duyidao
平安喜乐 刀刀
Orange