Highcharts Mapbubble同国气泡重叠问题求助（Angular6+Highcharts6）

嗨，我太懂你碰到的这个糟心问题了——同一国家的两个mapbubble系列气泡叠在一起，手动改x/y值还完全没效果。这是因为mapbubble的气泡位置是和地图区域的点位绑定死的，你手动设置的x/y会被Highcharts的地图坐标逻辑直接覆盖，得用它专门提供的配置项来搞定：

核心解决方案：用pointPlacement属性调整偏移 #

这是Highcharts专门为解决同区域多系列点重叠设计的属性，完美适配mapbubble场景。你只需要给两个系列分别设置不同的偏移值，就能让气泡自动错开：

Angular环境下的配置示例 #

// 第一个系列：向右偏移
{
  type: 'mapbubble',
  name: '销售额数据',
  data: yourFirstSeriesData,
  pointPlacement: 0.1 // 数值代表相对原始位置的比例偏移，正数向右/下，负数向左/上
}

// 第二个系列：向左偏移
{
  type: 'mapbubble',
  name: '用户量数据',
  data: yourSecondSeriesData,
  pointPlacement: -0.1
}

你也可以用更直观的字符串值控制方向：

• 'left'/'right'：水平方向偏移
• 'top'/'bottom'：垂直方向偏移

比如把其中一个系列设为pointPlacement: 'right'，另一个设为pointPlacement: 'left'，错开的效果会更明显。

额外优化小技巧 #

如果pointPlacement的偏移效果还不够理想，你可以配合以下配置进一步调整：

• pointPadding：控制系列内点的间距，数值越大间距越宽，可作为辅助调整项
• zIndex：如果不需要完全错开，只是想让某一系列的气泡显示在上方，给系列设置不同的zIndex值即可（数值大的系列会显示在上层）

为啥手动改x/y没用？ #

mapbubble的气泡位置是由地图数据里的区域中心坐标自动计算的，你手动设置的x/y会被Highcharts的地图布局逻辑直接覆盖，所以完全不生效。而pointPlacement是专门针对这类绑定地图点位的系列设计的偏移属性，能绕过这个限制。

内容的提问来源于stack exchange，提问作者Thilak raj