Highcharts 气泡图（Bubble Chart）详解
Highcharts 的气泡图是一种三维散点图，通过气泡的 X 位置、Y 位置 和 气泡大小（Z 值） 来同时展示三个变量的数据关系，非常适合表现带有规模或权重的对比场景，例如：
- 国家：X=人均GDP，Y=预期寿命，Z=人口
- 公司：X=营收，Y=利润率，Z=市值
- 产品：X=价格，Y=满意度，Z=销量
准备工作
气泡图需要引入额外模块：
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script> <!-- 必须引入 -->1. 基本气泡图完整示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Highcharts 气泡图示例</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div id="container" style="width: 900px; height: 600px; margin: 50px auto;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bubble', // 关键：设置为 'bubble'
zoomType: 'xy', // 支持拖拽缩放（强烈推荐）
backgroundColor: '#f8f9fa'
},
title: {
text: '2024年部分国家经济与健康指标对比',
style: { fontWeight: 'bold', fontSize: '20px' }
},
subtitle: {
text: 'X轴：人均GDP（万美元） Y轴：预期寿命（岁） 气泡大小：人口（亿人）'
},
xAxis: {
title: { text: '人均GDP（万美元）' },
gridLineWidth: 1,
min: 0
},
yAxis: {
title: { text: '预期寿命（岁）' },
min: 60,
max: 85
},
tooltip: {
useHTML: true,
headerFormat: '<b>{point.key}</b><br/>',
pointFormat: '人均GDP：{point.x} 万美元<br/>' +
'预期寿命：{point.y} 岁<br/>' +
'人口：{point.z} 亿人'
},
plotOptions: {
bubble: {
minSize: 10, // 最小气泡直径（像素）
maxSize: '15%', // 最大气泡直径（相对于图表区域）
zMin: 0, // Z 值最小映射
zMax: 14, // Z 值最大映射（自动计算气泡大小）
marker: {
fillOpacity: 0.6 // 气泡透明度
}
}
},
series: [{
name: '国家',
colorByPoint: true, // 每个气泡自动不同颜色
data: [
{ x: 9.5, y: 81.5, z: 14.0, name: '中国' },
{ x: 7.2, y: 78.8, z: 13.9, name: '印度' },
{ x: 6.8, y: 73.5, z: 3.3, name: '美国' },
{ x: 5.5, y: 82.1, z: 1.26, name: '日本' },
{ x: 4.2, y: 80.5, z: 0.67, name: '德国' },
{ x: 3.8, y: 79.9, z: 0.51, name: '英国' },
{ x: 1.2, y: 76.5, z: 2.1, name: '巴西' },
{ x: 0.8, y: 72.3, z: 1.7, name: '尼日利亚' }
]
}]
});
</script>
</body>
</html>2. 多系列气泡图（不同组别不同颜色）
series: [
{
name: '亚洲国家',
color: '#FF6B6B',
data: [
{ x: 9.5, y: 81.5, z: 14.0, name: '中国' },
{ x: 7.2, y: 78.8, z: 13.9, name: '印度' },
{ x: 5.5, y: 82.1, z: 1.26, name: '日本' }
]
},
{
name: '欧洲国家',
color: '#4ECDC4',
data: [
{ x: 4.2, y: 80.5, z: 0.67, name: '德国' },
{ x: 3.8, y: 79.9, z: 0.51, name: '英国' }
]
}
]3. 自定义气泡颜色和边框
data: [
{
x: 9.5, y: 81.5, z: 14.0, name: '中国',
color: '#FF0000', // 自定义填充色
marker: { borderWidth: 3, borderColor: '#000' }
}
]4. 常用配置总结
| 配置项 | 说明与推荐值 |
|---|---|
chart.type | ‘bubble’（必须） |
chart.zoomType | ‘xy’（大数据量时强烈推荐） |
plotOptions.bubble.minSize | 10~20（像素，最小气泡大小） |
plotOptions.bubble.maxSize | ‘10%’ ~ ‘20%’（或像素值，最大气泡大小） |
plotOptions.bubble.zMin/zMax | 设置Z值映射范围，避免极端值导致气泡过大/过小 |
series.colorByPoint | true（单系列时自动配色） |
marker.fillOpacity | 0.5~0.7（透明度，防止重叠看不清） |
5. 注意事项
- 数据格式：每点支持
[x, y, z]或对象{x, y, z, name}。 - Z 值越大，气泡越大（Highcharts 自动线性映射）。
- 气泡图本质是散点图的扩展，因此支持 jitter、marker 自定义等散点图特性。
如果你需要：
- 带负值的气泡图（需特殊处理）
- 3D 气泡图
- 与散点图混合
- 动态加载大数据量气泡
告诉我具体场景，我可以提供更针对性的完整代码！
