Apex面积图背景无法精准贴合，sparkline线条截断问题求助

核心配置思路 #

直接通过调整ApexCharts基础配置+布局参数解决你的问题，不用依赖annotations.fillColor或sparkline选项：

• 固定图表高度为150px，彻底移除所有内外边距
• 关闭图例、工具栏、坐标轴标签等冗余元素，消除额外空白
• 调整y轴范围确保线条完整显示，避免截断

完整可运行代码示例 #

const options = {
  chart: {
    type: 'area',
    height: 150,
    // 移除图表所有内外边距
    margin: { top: 0, right: 0, bottom: 0, left: 0 },
    // 禁用工具栏
    toolbar: { show: false },
    sparkline: { enabled: false } // 关闭sparkline避免线条截断
  },
  series: [{
    name: '业务数据',
    data: [31, 40, 28, 51, 42, 109, 100] // 替换成你的实际数据
  }],
  grid: {
    show: false, // 隐藏网格线
    padding: { top: 0, right: 0, bottom: 0, left: 0 } // 网格区域无内边距
  },
  xaxis: {
    show: false, // 隐藏x轴所有元素
    labels: { show: false },
    axisBorder: { show: false },
    axisTicks: { show: false }
  },
  yaxis: {
    show: false, // 隐藏y轴所有元素
    labels: { show: false },
    axisBorder: { show: false },
    axisTicks: { show: false },
    // 自动调整y轴范围，确保所有数据点都在绘图区内
    forceNiceScale: true,
    // 如果自动调整仍有截断，可手动设置范围（可选）
    // min: 0,
    // max: Math.max(...yourDataArray) * 1.05 // 给顶部留5%余量
  },
  fill: {
    type: 'solid',
    opacity: 0.3 // 按需调整填充透明度
  },
  stroke: {
    width: 2, // 按需调整线条宽度
    curve: 'smooth' // 按需调整线条平滑度
  },
  // 移除所有冗余元素
  legend: { show: false },
  tooltip: { enabled: false } // 不需要提示框就关闭，需要的话可保留并调整样式
};

// 初始化图表，容器无需额外设置高度（chart.height已指定）
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

关键配置说明 #

1. 彻底消除空白：通过chart.margin和grid.padding设为0，关闭所有冗余元素，确保绘图区完全填满150px高度的容器
2. 避免线条截断：yaxis.forceNiceScale让Apex自动计算合适的y轴范围，确保顶部数据点不被裁剪；如果自动调整效果不佳，手动设置min/max给顶部留少量余量即可
3. 抛弃坑点方案：annotations.fillColor需要手动计算y轴范围且有加载延迟，sparkline会强制裁剪绘图区，这两个方案都没必要用

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