ECharts 5.4.2版本饼图tooltip.formatter默认值咨询

关于默认格式化器 #

ECharts 5.4.2版本中饼图的tooltip默认格式化器不再是旧版的字符串模板{a} <br/>{b}: {c} ({d}%)，而是通过内部函数生成带图标和加粗数值的HTML结构，大致逻辑为：

• 生成与对应饼块颜色一致的圆形小图标
• 分类名称后跟随加粗显示的数值，再附上百分比

官方未对外暴露该默认的字符串模板，因为这是动态生成的HTML内容。

自定义实现带图标+加粗数值的效果 #

要实现你想要的类似{b.icon} {b}: {c} ({d}%)的效果，需使用tooltip.formatter回调函数，通过参数获取系列颜色生成图标，并给数值添加加粗样式，具体配置示例如下：

option = {
  tooltip: {
    trigger: 'item',
    // 自定义格式化回调函数
    formatter: function(params) {
      // 生成与默认样式一致的圆形图标
      const icon = `<span style="display:inline-block;margin-right:4px;border-radius:50%;width:10px;height:10px;background-color:${params.color};"></span>`;
      // 拼接带加粗数值的提示内容
      return `${icon} ${params.name}: <strong>${params.value}</strong> (${params.percent}%)`;
    }
  },
  // 其他配置示例
  series: [
    {
      type: 'pie',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    }
  ]
};

关键说明 #

• params.color：获取当前饼图项的系列颜色，用来生成图标背景色
• <strong>标签：实现数值的加粗效果，和默认提示框样式对齐
• 图标样式通过inline CSS控制，保持和默认图标一致的大小、间距和圆形样式

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