如何格式化ECharts旭日图（Sunburst）的Tooltip数值？

针对旭日图Tooltip数值无法通过valueFormatter格式化的问题，直接自定义Tooltip的formatter函数即可实现需求，以下是修改后的完整代码：

var data = [
  {
    name: 'Grandpa',
    value: 25000000,
    children: [
      {
        name: 'Uncle Leo',
        value: 15000000,
      },
      {
        name: 'Father',
        value: 10000000,
      }
    ]
  },
  {
    name: 'Nancy',
    value: 3000000,
    children: [
      {
        name: 'Cousin Betty',
        value: 1000000
      },
      {
        name: 'Cousin Jenny',
        value: 2000000
      }
    ]
  }
];

// 自定义数值格式化函数：添加千分位空格分隔
function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
}

option = {
  tooltip: {
    trigger: 'item',
    // 使用函数形式的formatter，手动处理数值格式化
    formatter: function(params) {
      return `${params.name}:<br/><b>${formatNumber(params.value)}</b>`;
    }
  },
  series: {
    type: 'sunburst',
    data: data,
    radius: [0, '90%'],
    label: {
      rotate: 'radial'
    }
  }
};

关键说明 #

• 放弃使用valueFormatter，改用Tooltip的函数式formatter，直接获取params.value进行格式化
• 自定义formatNumber函数，通过正则表达式给数字添加每三位一个空格的分隔符，实现易读的数值格式
• 函数式formatter完全可控，可根据需求调整数值格式（比如换成逗号分隔、添加单位等）

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