Apexcharts（Angular）Treemap大屏尺寸右侧多余padding问题求助

问题描述 #

在Angular项目中使用Apexcharts实现Treemap组件时，遇到一个布局问题：当屏幕宽度大于904px时，图表右侧会多出约20px的内边距，尝试多种配置方案后仍未解决。

问题截图：

当前使用的配置代码：

this.categoryChartOptions = {
  series: [{
    data: [
      {x: 'New Delhi', y: 150},
      ...
    ]
  }],
  chart: {
    height: 320,
    type: 'treemap',
    foreColor: 'white',
    fontFamily: fontFamily,
    redrawOnParentResize: true,
    redrawOnWindowResize: true,
    parentHeightOffset: 0,
    toolbar: {show: false},
    selection: {enabled: false},
    animations: {enabled: true},
    offsetX: 0,
    offsetY: 0
  },
  legend: {show: false},
  title: {
    text: 'Treemap',
    align: 'center',
    style: {fontWeight: 'normal', fontSize: '12'},
  },
  dataLabels: {
    enabled: true,
    style: {fontWeight: 'normal', fontSize: '12'},
    formatter: (text, {value}) => [`${text}`, `$${value}`],
    offsetY: -4,
    dropShadow: {enabled: false}
  },
  grid: {
    show: false,
    padding: {top: 0, bottom: 0, right: 0, left: 0}
  },
  colors: [
    '#3B93A5', ...
  ],
  plotOptions: {
    treemap: {
      distributed: true,
      enableShades: false,
      useFillColorAsStroke: true,
    }
  },
  tooltip: {enabled: false}
};

解决方案尝试 #

以下是几个针对性的解决方向，可逐一测试：

• 强制覆盖图表margin配置：在chart对象中添加margin属性，直接将右侧margin设为0，覆盖Apexcharts的默认计算值：

chart: {
  // 保留原有配置
  margin: { top: 0, right: 0, bottom: 0, left: 0 }
}

• 调整Treemap布局参数：在plotOptions.treemap中添加宽度设置，强制组件占满容器宽度：

plotOptions: {
  treemap: {
    distributed: true,
    enableShades: false,
    useFillColorAsStroke: true,
    width: '100%' // 新增该行
  }
}

• CSS层面强制修正：如果配置调整无效，给图表容器添加自定义样式，直接移除多余内边距：

.apexcharts-treemap-area {
  width: 100% !important;
  padding-right: 0 !important;
}

• 检查父容器布局：确认图表所在的父容器没有设置固定宽度或额外padding，确保父容器宽度为100%，让图表可以自适应填充。

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