如何创建蛛网地图｜气泡事件+全球发布+关联组合图表开发示例

完整HTML代码

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`

双击打开就能看到完整地图图表！

需要我再给你做 动态数据版、可切换年份、可筛选奖牌 的增强版吗？

如何创建蛛网地图｜气泡事件+全球发布+关联组合图表开发示例

1. 图表类型

2. 气泡代表什么？

3. 数据包含哪些信息？

4. 鼠标悬浮提示（Tooltip）

5. 图表功能

6. 适用场景

你直接复制这段代码保存为 .html

你直接复制这段代码保存为 `.html`