ApexCharts如何设置坐标轴文本值？Y轴百万级数值显示为1m、2m

要实现Y轴标签显示为1m、2m这类百万级格式，核心是利用ApexCharts提供的Y轴标签格式化函数，自定义数值的展示逻辑。

直接上配置示例，重点看yaxis.labels.formatter部分：

const options = {
  chart: {
    type: 'line', // 替换为你实际使用的图表类型，如bar、area等
    height: 350
  },
  series: [{
    name: '业务数据',
    data: [1500000, 2200000, 1800000, 3000000, 2500000] // 原始百万级整数数据
  }],
  yaxis: {
    labels: {
      // 自定义格式化函数
      formatter: function (value) {
        // 将数值转换为百万单位
        const millionValue = value / 1000000;
        // 整数直接显示，非整数保留1位小数（可根据需求调整精度）
        const displayValue = Number.isInteger(millionValue) ? millionValue : millionValue.toFixed(1);
        return `${displayValue}m`;
      }
    }
  }
};

// 初始化并渲染图表
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

逻辑说明： #

• formatter函数会接收Y轴的原始整数值作为参数
• 将数值除以1000000（1e6）转换为百万单位
• 可选处理小数位：如果转换后是整数，直接显示；否则保留指定小数位（修改toFixed的参数可调整精度）
• 最后拼接m后缀，得到1m、2.2m这类目标格式

如果需要兼容小于100万的数值（比如显示500k千级格式），可以扩展formatter函数：

formatter: function (value) {
  if (value >= 1000000) {
    const millionValue = value / 1000000;
    const displayValue = Number.isInteger(millionValue) ? millionValue : millionValue.toFixed(1);
    return `${displayValue}m`;
  } else if (value >= 1000) {
    const thousandValue = value / 1000;
    const displayValue = Number.isInteger(thousandValue) ? thousandValue : thousandValue.toFixed(1);
    return `${displayValue}k`;
  }
  return value;
}

这样就能根据数值大小自动切换单位格式，适配更多数据场景。

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