Highcharts 气泡图（Bubble Chart）详解
Highcharts 的气泡图是一种增强型的散点图，通过气泡的 X 坐标、Y 坐标 和 气泡大小（Z 值） 同时展示三个维度的数据。非常适合以下场景：
- 国家/城市对比：X=人均GDP，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: '#f8f9fa',
borderRadius: 10
},
title: {
text: '2024年主要经济体对比',
style: { fontSize: '22px', fontWeight: 'bold' }
},
subtitle: {
text: 'X轴：人均GDP（万美元） | Y轴：人类发展指数（HDI） | 气泡大小：人口（亿人）'
},
xAxis: {
title: { text: '人均GDP（万美元）' },
gridLineWidth: 1,
min: 0,
max: 12
},
yAxis: {
title: { text: '人类发展指数（HDI）' },
min: 0.6,
max: 1.0,
labels: { format: '{value}' }
},
tooltip: {
useHTML: true,
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="font-size:14px">人均GDP：{point.x} 万美元</span><br>' +
'HDI：{point.y}<br>' +
'人口：{point.z} 亿人'
},
plotOptions: {
bubble: {
minSize: 15, // 最小气泡直径（像素）
maxSize: '18%', // 最大气泡直径（相对图表区域）
zMin: 0,
zMax: 15,
marker: {
fillOpacity: 0.65 // 气泡透明度（避免重叠看不清）
},
dataLabels: {
enabled: true,
format: '{point.name}',
style: { color: '#333', fontWeight: 'bold' }
}
}
},
series: [{
name: '国家/地区',
colorByPoint: true, // 每个气泡自动分配不同颜色
data: [
{ x: 7.0, y: 0.95, z: 14.5, name: '中国' },
{ x: 6.5, y: 0.92, z: 13.8, name: '印度' },
{ x: 8.5, y: 0.96, z: 3.4, name: '美国' },
{ x: 5.8, y: 0.95, z: 1.26, name: '日本' },
{ x: 5.2, y: 0.93, z: 0.84, name: '德国' },
{ x: 4.8, y: 0.92, z: 0.68, name: '英国' },
{ x: 4.5, y: 0.91, z: 0.67, name: '法国' },
{ x: 1.5, y: 0.78, z: 2.7, name: '巴西' },
{ x: 0.9, y: 0.65, z: 2.2, name: '尼日利亚' }
]
}]
});
</script>
</body>
</html>2. 多系列气泡图（分组展示）
series: [
{
name: '发达国家',
color: '#4ECDC4',
data: [
{ x: 8.5, y: 0.96, z: 3.4, name: '美国' },
{ x: 5.8, y: 0.95, z: 1.26, name: '日本' },
{ x: 5.2, y: 0.93, z: 0.84, name: '德国' }
]
},
{
name: '新兴国家',
color: '#FF6B6B',
data: [
{ x: 7.0, y: 0.95, z: 14.5, name: '中国' },
{ x: 6.5, y: 0.92, z: 13.8, name: '印度' },
{ x: 1.5, y: 0.78, z: 2.7, name: '巴西' }
]
}
]3. 自定义单个气泡样式
data: [
{
x: 7.0, y: 0.95, z: 14.5, name: '中国',
color: '#e74c3c', // 自定义填充色
marker: {
lineWidth: 3,
lineColor: '#c0392b'
}
}
]4. 常用配置速查表
| 配置项 | 说明与推荐值 |
|---|---|
chart.type | 'bubble'（必须） |
chart.zoomType | 'xy'（大数据量必开） |
plotOptions.bubble.minSize | 10~20 像素（最小气泡） |
plotOptions.bubble.maxSize | '12%' ~ '20%'（最大气泡） |
plotOptions.bubble.zMin/zMax | 手动控制 Z 值映射范围，避免极端值导致气泡失真 |
marker.fillOpacity | 0.5~0.7（透明度，防止重叠） |
series.colorByPoint | true（单系列自动配色） |
dataLabels.enabled | true（显示国家名等标签） |
5. 数据格式说明
每点支持两种格式：
- 数组：
[x, y, z]或[x, y, z, name] - 对象：
{ x: 1, y: 2, z: 3, name: '点A' }
Z 值越大 → 气泡越大（Highcharts 自动线性映射）。
气泡图是 Highcharts 中展示三维数据最直观的方式之一，结合 zoomType: 'xy' 可轻松探索密集数据。
如果你需要：
- 动态实时气泡图
- 四维数据（颜色代表第四维度）
- 3D 气泡图
- 与地图结合的气泡地图
告诉我具体需求，我可以提供完整代码示例！
