如何创建蛛网地图｜气泡事件+全球发布+关联组合图表开发示例
完整HTML代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>挪威夏季奥运会奖牌分布地图 - Highcharts</title> <!-- 引入 Highcharts 核心库 + 地图库 --> <script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/highcharts.js"></script> <script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/modules/map.js"></script> <script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/modules/data.js"></script> <style> #container { width: 100%; height: 85vh; margin: 0 auto; } </style> </head> <body> <div id="container"></div> <script> (async () => { // 加载世界地图拓扑数据 const topology = await fetch( 'https://code.highcharts.com/mapdata/custom/world.topo.json' ).then(response => response.json()); // 奥运会城市数据：城市、国家、年份、纬度、经度、总奖牌、金牌、银牌、铜牌 const data = [ ['亚特兰大', '美国', '1996', 33.75, -84.38, 7, 2, 2, 3], ['悉尼', '澳大利亚', '2000', -33.87, 151.20, 10, 4, 3, 3], ['雅典', '希腊', '2004', 38, 23.72, 6, 5, 0, 1], ['北京', '中国', '2008', 39.92, 116.38, 9, 3, 5, 1], ['伦敦', '英国', '2012', 51.5, -0.12, 4, 2, 1, 1], ['里约热内卢', '巴西', '2016', -22.91, -43.20, 4, 0, 0, 4], ['东京', '日本', '2020', 35.69, 139.69, 8, 4, 2, 2] ]; Highcharts.mapChart('container', { chart: { map: topology }, // 关闭图例 legend: { enabled: false }, // 地图导航（缩放按钮） mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom' } }, // 地图自适应显示范围 mapView: { fitToGeometry: { type: 'MultiPoint', coordinates: [ [-164, 54], [-35, 84], [179, -38], [-68, -55] ] } }, // 标题（中文） title: { text: '挪威在夏季奥运会获得奖牌分布（1996-2020）', align: 'left' }, // 副标题 subtitle: { text: '数据来源：维基百科', align: 'left' }, // 鼠标悬浮提示框（汉化） tooltip: { headerFormat: '', pointFormat: '{point.city}（{point.country} {point.year}）<br/>' + '总奖牌数：{point.z}<br/>' + '<span style="color: #ffd700;">●</span> 金牌：{point.gold}<br/>' + '<span style="color: #c0c0c0;">●</span> 银牌：{point.silver}<br/>' + '<span style="color: #cd7f32;">●</span> 铜牌：{point.bronze}<br/>' }, series: [ { name: '世界地图', nullColor: '#fad3cf' // 地图底色 }, { name: '奥运会举办城市', type: 'mapbubble', // 气泡地图类型 color: '#fe5f55', lineWidth: 1, // 数据字段对应关系 keys: [ 'city', 'country', 'year', 'lat', 'lon', 'z', 'gold', 'silver', 'bronze' ], data: data, minSize: '5%', // 气泡最小尺寸 maxSize: '12.5%',// 气泡最大尺寸 } ] }); })(); </script> </body> </html>1. 图表类型
这是一个世界地图 + 气泡图（Map Bubble）组合图表
- 底层：世界地图
- 上层：气泡点→ 代表奥运会举办城市
2. 气泡代表什么？
每个气泡 =一届夏季奥运会
- 气泡位置 = 举办城市坐标
- 气泡大小 = 挪威获得的总奖牌数
- 气泡越大 → 奖牌越多
3. 数据包含哪些信息？
每一行数据对应：
['城市','国家','年份',纬度,经度,总奖牌,金牌,银牌,铜牌]4. 鼠标悬浮提示（Tooltip）
悬浮在气泡上会显示：
- 城市、国家、年份
- 总奖牌数
- 金牌、银牌、铜牌数量
5. 图表功能
- ✅ 支持鼠标缩放地图
- ✅ 支持拖拽移动
- ✅ 自动适配世界范围
- ✅ 美观配色 + 中文汉化
- ✅ 可直接本地运行
6. 适用场景
- 地理数据可视化
- 赛事 / 事件全球分布
- 带数值大小的点位展示
- 大屏数据展示
你直接复制这段代码保存为.html
双击打开就能看到完整地图图表！
需要我再给你做动态数据版、可切换年份、可筛选奖牌的增强版吗？