如何消除vue-apexcharts柱状图多余边距并适配容器？

当前图表样式：

期望图表样式：

你已完成标签移除、columnWidth、borderRadius和颜色配置，但图表四周仍有较大边距，设置chart.height与chart.width后也无法100%适配容器。以下是针对性的调整方案：

1. 优化ApexCharts核心配置 #

在chartOptions中补充/修改以下参数，彻底移除冗余边距：

const chartOptions = {
  dataLabels: {
    enabled: false
  },
  chart: {
    toolbar: {
      show: false
    },
    zoom: {
      enabled: false
    },
    height: '32px',
    width: '100%',
    sparkline: { // 开启sparkline模式，自动清理多余UI和边距
      enabled: true
    },
    offsetX: 0,
    offsetY: 0
  },
  colors: ['var(--color-bg-brand-primary)'],
  plotOptions: {
    bar: {
      columnWidth: 4,
      borderRadius: 1,
      barHeight: '100%', // 柱子高度占满容器
      borderRadiusApplication: 'end' // 仅顶部圆角，贴合示例样式
    }
  },
  legend: {
    show: false
  },
  grid: {
    show: false, // 完全关闭网格，避免残留间距
    padding: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    }
  },
  yaxis: {
    show: false // 彻底关闭Y轴，而非仅隐藏标签
  },
  xaxis: {
    show: false, // 彻底关闭X轴
    offset: 0
  },
  states: {
    hover: {
      filter: {
        type: 'none' // 关闭hover效果，保持样式统一
      }
    }
  }
}

2. 强制图表容器适配 #

通过深度选择器修正apexcharts-canvas的默认样式，确保尺寸严格匹配：

<style lang="scss" scoped>
.chart-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

:deep(.apexcharts-canvas) {
  width: 100% !important;
  height: 32px !important;
  margin: 0 !important; // 移除画布默认外边距
}
</style>

3. 模板简化 #

确保apexchart组件无额外嵌套容器，直接继承父容器尺寸：

<template>
  <BaseCard class="chart-card" :type="CardType.Elevated">
    <div class="title-small color-text-default">
      {{ props.title }}
    </div>
    <div class="headline6-strong color-text-default">
      {{ useCurrencyFormatter(total) }}
    </div>
    <apexchart
      type="bar"
      :options="chartOptions"
      :series="series"
    />
  </BaseCard>
</template>

关键原理 #

• Sparkline模式：专为小型极简图表设计，自动移除所有非必要的UI元素和间距
• 彻底关闭轴与网格：仅隐藏标签会残留占位空间，直接关闭轴的显示才能完全清除边距
• 强制画布样式：ApexCharts会根据内部计算生成画布尺寸，通过!important强制覆盖确保适配容器

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