如何使用ECharts的formatter设置国际化数字格式？

问题原因 #

你写的formatter无法正常运行的核心原因是ECharts传入formatter回调的参数不是纯数值，而是包含系列信息、维度数值、坐标轴映射关系等的上下文对象，无法直接调用toLocaleString()方法。

基础可运行实现 #

适用于单数值维度的折线图、柱状图等常规图表的数据标签格式化：

formatter: function(params) {
  // 兼容单维度/多维度数值取值
  const rawValue = typeof params.value === 'number' ? params.value : params.value[params.encode.y[0]]
  // 异常值兜底
  if (rawValue == null || isNaN(rawValue)) return '-'
  // 自动读取浏览器当前地区配置格式化
  return rawValue.toLocaleString()
}

按指定地区自定义格式化 #

如果需要明确指定适配地区，可提前定义全局地区变量，所有图表统一复用：

// 可根据用户地区配置/浏览器环境动态赋值，如北美传'en-US'，欧洲德语区传'de-DE'
const USER_LOCALE = 'de-DE'
// 可全局复用的数值格式化函数
const numberFormatter = (value, options = {}) => {
  if (value == null || isNaN(value)) return '-'
  return value.toLocaleString(USER_LOCALE, {
    // 可自定义精度、单位等配置
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
    ...options
  })
}

// 图表系列中直接引用即可
series: [
  {
    type: 'bar',
    data: [10000, 20000, 30000],
    label: {
      show: true,
      formatter: params => numberFormatter(params.value)
    }
  }
]

多场景适配说明 #

• 多维度图表（如散点图、热力图）：根据实际要展示的维度，取params.value[n]传入格式化函数即可
• tooltip批量格式化：遍历tooltip回调返回的params数组，对每个项的数值逐个调用格式化函数拼接内容
• 全局统一格式：把抽离的numberFormatter函数统一挂载到全局配置中，所有图表的formatter都调用该函数即可实现全站点格式统一，不需要单独重复配置

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