本车企市值聚合气泡案例充分体现 Highcharts 专业气泡可视化能力解决传统散点气泡布局混乱、多分类无法自动分区的痛点。完整可预览修复 HTML!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title车企市值 PackedBubble 聚合气泡图/title !-- 官方CDN 严格加载顺序核心→扩展→模块 -- script srchttps://code.highcharts.com/highcharts.js/script script srchttps://code.highcharts.com/highcharts-more.js/script !-- 核心缺失模块packedbubble -- script srchttps://code.highcharts.com/modules/packedbubble.js/script script srchttps://code.highcharts.com/modules/exporting.js/script script srchttps://code.highcharts.com/modules/accessibility.js/script script srchttps://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 classhighcharts-figure div idcontainer/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. 极强业务适配性 完美适配企业估值、市场份额、用户规模、资产规模等体量类对比数据是产业研究、经营分析、商业大屏标准可视化方案。
