2025年电线电缆源头厂家权威推荐榜单：电缆/电缆厂家/长城电缆源头厂家精选 - 品牌推荐官
2025/12/24 11:38:38
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（显示国家名等） |
气泡图结合zoomType: 'xy'是探索密集数据的利器，交互体验极佳。
如果你需要：
- 动态实时气泡图（数据点不断加入）
- 第四维度用颜色表示（colorAxis）
- 负值气泡（需特殊处理）
- 3D 气泡图
告诉我你的具体需求，我可以提供完整代码示例！