Apexcharts热力图单元格间距调整及描边遮挡问题求助

核心方案：通过配置单元格内边距拉开间距 #

Apexcharts热力图自带cellPadding配置项，可直接设置单元格间的间距，从根源解决描边被相邻单元格遮挡的问题。

具体配置步骤 #

1. 全局设置单元格间距
   在plotOptions.heatmap中添加cellPadding属性，定义水平和垂直方向的间距（单位为像素）：

plotOptions: {
  heatmap: {
    cellPadding: {
      x: 5, // 水平方向单元格间距
      y: 5  // 垂直方向单元格间距
    },
    stroke: {
      width: 2, // 描边宽度，需大于0才能显示
      colors: ['#ffffff'] // 默认描边颜色，可按需修改
    }
  }
}

2. 单独高亮指定单元格
   若需给特定单元格设置差异化描边样式，可在series对应数据项中单独配置stroke属性：

series: [{
  name: '热力数据',
  data: [
    { x: 'A', y: '1', value: 30, stroke: { colors: ['#ff0000'], width: 3 } }, // 高亮该单元格
    { x: 'A', y: '2', value: 50 },
    // 其他数据项...
  ]
}]

效果说明 #

设置cellPadding后，单元格间会出现空白间距，描边不再被相邻单元格遮挡，高亮样式可完整显示。

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