Vue ApexCharts柱状图负值不显示问题求助

问题分析 #

你的负值柱子无法正常显示，核心原因有两个：

1. 数据与x轴分类不匹配：x轴定义了3个分类，但每个系列的data数组只有2个元素，第三个分类无对应数据；
2. y轴范围自动压缩：正值数据（几十万级）和负值数据（几百级）差距过大，ApexCharts自动计算的y轴最小值接近0，导致负值柱子被挤压得几乎看不见。

具体修复步骤 #

1. 对齐数据与x轴分类数量

确保每个series的data数组长度和xaxis.categories一致，补充缺失的对应数据（无数据时可填0）：

series: [
  {
    name: "Receita",
    data: [241221.4, 277855.4, 0],
  },
  {
    name: "Sub",
    data: [15957.8, 18169.15, 0],
  },
  {
    name: "Rat",
    data: [-776.525, -322.625, 0], // 替换0为Mar对应的实际负值
  },
],

2. 手动设置y轴范围

在chartOptions中添加y轴配置，强制包含负值区间，确保负值柱子能正常显示：

chartOptions: {
  colors: ["#00E676", "#9155FD", "#8A8D93"],
  dataLabels: {
    enabled: false,
  },
  xaxis: {
    categories: ["Janeiro", "Feb", "Mar"],
  },
  yaxis: {
    min: -1000, // 根据你的负值大小调整，确保覆盖所有负值
    max: 300000, // 匹配正值的最大值，避免正值柱子被截断
  },
},

3. 可选：优化柱子显示效果

如果想让负值柱子更醒目，可调整柱子宽度：

chartOptions: {
  // 其他配置...
  plotOptions: {
    bar: {
      columnWidth: "60%", // 增大柱子宽度，提升可见度
    },
  },
},

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