分组气泡图（Packedbubble）实战：全球车企市值分层聚合可视化
本车企市值聚合气泡案例充分体现 Highcharts 专业气泡可视化能力，解决传统散点气泡布局混乱、多分类无法自动分区的痛点。
完整可预览修复 HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>车企市值 PackedBubble 聚合气泡图</title> <!-- 官方CDN 严格加载顺序：核心→扩展→模块 --> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <!-- 核心缺失模块：packedbubble --> <script src="https://code.highcharts.com/modules/packedbubble.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <script src="https://code.highcharts.com/modules/pattern-fill.js"></script> <style> .highcharts-figure, .highcharts-data-table table { min-width: 360px; max-width: 100%; margin: 1em auto; } /* 关键：给图表容器设置高度，否则空白 */ #container { width: 100%; height: 90vh; } </style> </head> <body> <figure class="highcharts-figure"> <div id="container"></div> </figure> <script> Highcharts.chart('container', { colors: ['#7CB5EC', '#346DA4', '#10487F'], chart: { type: 'packedbubble', height: '100%' }, title: { text: '全球市值前25汽车厂商气泡分布图' }, subtitle: { text: '(统计时间：2020年10月，单位：十亿美元)' }, tooltip: { pointFormat: '<b>{point.name}：</b>{point.value} 十亿美元' }, plotOptions: { packedbubble: { minSize: '20%', maxSize: '100%', layoutAlgorithm: { gravitationalConstant: 0.05, splitSeries: true, seriesInteraction: false, dragBetweenSeries: true, parentNodeLimit: true }, dataLabels: { enabled: true, format: '{point.name}', style: { textOutline: 'none', fontWeight: 'normal' } } } }, series: [{ name: '欧洲车企', data: [{ name: '大众集团', value: 84.44, dashStyle: 'longdash' }, { name: '戴姆勒', value: 60.89 }, { name: '宝马', value: 48.60 }, { name: '法拉利', value: 45.8 }, { name: '标致PSA', value: 16.27 }, { name: '雷诺', value: 7.69 }] }, { name: '美洲车企', data: [{ name: '特斯拉', value: 416.19 }, { name: '通用汽车', value: 45.61 }, { name: '福特', value: 30.87 }, { name: '尼古拉', value: 9.18 }] }, { name: '亚洲车企', data: [{ name: '丰田', value: 184.11 }, { name: '比亚迪', value: 51.65 }, { name: '本田', value: 41.21 }, { name: '上汽集团', value: 35.31 }, { name: '马鲁蒂铃木', value: 28.83 }, { name: '蔚来', value: 26.43 }, { name: '铃木', value: 22.29 }, { name: '吉利', value: 21.20 }, { name: '斯巴鲁', value: 15.11 }, { name: '小鹏', value: 14.88 }, { name: '日产', value: 14.07 }, { name: '马恒达', value: 10.57 }, { name: '长安', value: 9.5 }, { name: '一汽', value: 8.28 }] }] }); </script> </body> </html>图表 示例解析
图表类型
Packed Bubble 分组紧凑气泡图（聚合气泡图）区别于普通散点气泡：内置引力布局算法，气泡自动聚拢、避让、分组，无重叠，适合多分类体量对比。
核心功能拆解
- 自动分组聚合
splitSeries: true开启按series自动分区，欧洲、美洲、亚洲车企各自聚拢成独立区块，视觉分区清晰。 - 气泡大小映射市值
value控制气泡半径，minSize/maxSize限制气泡最小 / 最大缩放比例，特斯拉市值最高气泡体积远大于其他厂商，体量差距一目了然。 - 交互式拖拽
dragBetweenSeries: true支持鼠标拖动气泡，可跨分组自由移动，适合大屏交互演示。 - 引力排斥算法
gravitationalConstant引力系数控制气泡间距，自动互相排斥，不会重叠挤压，布局自动均衡。 - 气泡标签直显 内置
dataLabels直接在气泡内部展示车企名称，无需额外图例查找。 - 差异化线条样式 支持单独气泡配置虚线边框，突出特殊企业（示例中大众使用长虚线区分）。
- 悬浮提示详情 鼠标悬浮气泡展示厂商名称 + 精确市值。
业务适用场景
- 企业市值、营收、用户规模体量对比分析
- 区域 / 行业分类聚合可视化（车企、互联网、新能源企业分布）
- 数据大屏交互式看板，支持拖拽交互
- 市场竞争格局分析、产业报告可视化
- 投融资、企业估值对比图表
本案例Highcharts 核心优势
Highcharts 原生提供 packedbubble 专用聚合气泡模块，内置引力自动布局，无需手动计算坐标。支持按系列自动分区、气泡大小映射数值、跨分组拖拽交互，配置简洁，多类别体量数据分层展示直观，适配产业分析、企业估值大屏可视化场景。
1. 智能引力自动布局内置物理引力排斥算法，气泡自动排布避让，不会重叠遮挡，自动均衡填充画布，无需后端计算点位坐标，前端一键渲染。
2. 原生多系列分组能力splitSeries参数一键开启分类区块隔离，不同区域车企自动分成独立集群，搭配系列专属配色，多维分类数据一目了然。
3. 丰富交互与自定义能力 支持全局拖拽气泡、单气泡独立样式（虚线 / 实线边框）、自定义气泡尺寸区间、气泡内置文字标签，悬浮提示模板自由格式化。
4. 轻量化集成 仅需引入 packedbubble 扩展模块即可运行，无重型渲染依赖，兼容 PC 端后台、数据大屏、报表页面。
5. 极强业务适配性 完美适配企业估值、市场份额、用户规模、资产规模等体量类对比数据，是产业研究、经营分析、商业大屏标准可视化方案。