Highcharts 气泡图（Bubble Chart）详解
Highcharts 气泡图是一种三维数据可视化图表，通过气泡的 X 坐标、Y 坐标 和 气泡大小（Z 值） 同时展示三个变量的关系。常用于：
- 国家对比：X=人均GDP，Y=幸福指数，Z=人口
- 企业分析：X=收入，Y=利润率，Z=市值
- 产品评估：X=价格，Y=评分，Z=销量
- 风险评估：X=概率，Y=影响程度，Z=损失金额
必须引入的模块
气泡图属于高级图表类型，需要额外加载 highcharts-more.js：
<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: '#ffffff'
},
title: {
text: '2025年全球主要经济体对比',
style: { fontSize: '22px', fontWeight: 'bold' }
},
subtitle: {
text: 'X轴：人均GDP（万美元） | Y轴：预期寿命（岁） | 气泡大小：人口（亿人）'
},
xAxis: {
title: { text: '人均GDP（万美元）' },
gridLineWidth: 1,
min: 0,
max: 12
},
yAxis: {
title: { text: '预期寿命（岁）' },
min: 65,
max: 85
},
tooltip: {
useHTML: true,
headerFormat: '<b>{point.name}</b><br>',
pointFormat: '<span style="font-size:14px">人均GDP：{point.x} 万美元</span><br>' +
'预期寿命：{point.y} 岁<br>' +
'人口：{point.z} 亿人'
},
plotOptions: {
bubble: {
minSize: 12, // 最小气泡直径（像素）
maxSize: '20%', // 最大气泡直径（相对图表区域）
zMin: 0,
zMax: 15,
marker: {
fillOpacity: 0.7 // 透明度，防止重叠看不清
},
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
color: '#333',
textOutline: 'none',
fontWeight: 'bold'
}
}
}
},
series: [{
name: '国家',
colorByPoint: true, // 每个气泡自动不同颜色
data: [
{ x: 8.2, y: 82.5, z: 14.6, name: '中国' },
{ x: 7.1, y: 79.2, z: 14.1, name: '印度' },
{ x: 8.8, y: 78.1, z: 3.4, name: '美国' },
{ x: 6.0, y: 83.2, z: 1.25, name: '日本' },
{ x: 5.8, y: 81.8, z: 0.83, name: '德国' },
{ x: 5.3, y: 81.0, z: 0.68, name: '英国' },
{ x: 4.9, y: 80.5, z: 0.67, name: '法国' },
{ x: 1.8, y: 77.0, z: 2.8, name: '巴西' },
{ x: 1.0, y: 73.5, z: 2.3, name: '尼日利亚' }
]
}]
});
</script>
</body>
</html>2. 多系列气泡图（分组不同颜色）
series: [
{
name: '亚洲国家',
color: '#e74c3c',
data: [
{ x: 8.2, y: 82.5, z: 14.6, name: '中国' },
{ x: 7.1, y: 79.2, z: 14.1, name: '印度' },
{ x: 6.0, y: 83.2, z: 1.25, name: '日本' }
]
},
{
name: '欧美国家',
color: '#3498db',
data: [
{ x: 8.8, y: 78.1, z: 3.4, name: '美国' },
{ x: 5.8, y: 81.8, z: 0.83, name: '德国' },
{ x: 5.3, y: 81.0, z: 0.68, name: '英国' }
]
}
]3. 数据格式说明
每点支持两种格式：
- 数组形式：
[x, y, z]或[x, y, z, name] - 对象形式（推荐）：
{ x: 8.2, y: 82.5, z: 14.6, name: '中国' }Z 值越大 → 气泡越大（自动线性映射）。
4. 常用配置速查
| 配置项 | 推荐值/说明 |
|---|---|
chart.type | 'bubble'（必须） |
chart.zoomType | 'xy'（大数据量必开） |
plotOptions.bubble.minSize | 10~20 像素 |
plotOptions.bubble.maxSize | '15%' ~ '25%' |
plotOptions.bubble.zMin/zMax | 手动限制 Z 值范围，避免极端值导致气泡过大/过小 |
marker.fillOpacity | 0.5~0.8（透明度） |
colorByPoint | true（单系列自动配色） |
dataLabels.enabled | true（显示国家名等） |
气泡图结合 zoomType: 'xy' 是探索密集数据的利器，交互体验极佳。
如果你需要：
- 动态实时气泡图（数据点不断加入）
- 第四维度用颜色表示（colorAxis）
- 负值气泡（需特殊处理）
- 3D 气泡图
告诉我你的具体需求，我可以提供完整代码示例！
