当前位置：首页 > news >正文

Highcharts 气泡图

news 2026/5/12 22:22:05

Highcharts 气泡图（Bubble Chart）详解

Highcharts气泡图是一种三维数据可视化图表，通过气泡的X 坐标、Y 坐标和气泡大小（Z 值）同时展示三个变量的关系。常用于：

国家对比：X=人均GDP，Y=幸福指数，Z=人口
企业分析：X=收入，Y=利润率，Z=市值
产品评估：X=价格，Y=评分，Z=销量
风险评估：X=概率，Y=影响程度，Z=损失金额

必须引入的模块

气泡图属于高级图表类型，需要额外加载highcharts-more.js：

<scriptsrc="https://code.highcharts.com/highcharts.js"></script><scriptsrc="https://code.highcharts.com/highcharts-more.js"></script><!-- 必须 -->

1. 完整基础气泡图示例

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>Highcharts 气泡图示例</title><scriptsrc="https://code.highcharts.com/highcharts.js"></script><scriptsrc="https://code.highcharts.com/highcharts-more.js"></script></head><body><divid="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（显示国家名等）