如何实现当Tooltip对应值为0时不显示该提示框？

嘿，我来帮你实现这个Tooltip逻辑！核心就是拼接数字生成百分比提示，同时让值为0的项完全不显示Tooltip，比如你提到的「New Business」「Policy To Broker」「Service Request」这些项。

实现思路拆解 #

• 第一步：计算目标值占总数的百分比，把数字和百分比拼接成提示内容
• 第二步：加个关键判断——只有当目标值大于0的时候才生成提示，值为0时直接跳过Tooltip渲染

代码示例（通用JavaScript逻辑） #

假设你有数据项和总数，比如：

const items = [
  { name: "New Business", value: 0 },
  { name: "Existing Business", value: 50 },
  { name: "Policy To Broker", value: 0 },
  { name: "Service Request", value: 0 },
  { name: "Renewal", value: 150 }
];
const totalValue = items.reduce((sum, item) => sum + item.value, 0);

然后写一个生成Tooltip内容的函数：

const generateTooltip = (item, total) => {
  // 核心判断：值为0时直接返回null/空，Tooltip就不会显示
  if (item.value === 0) {
    return null;
  }
  // 计算百分比，保留两位小数
  const percentage = ((item.value / total) * 100).toFixed(2);
  // 拼接成你要的提示格式
  return `${item.name}: ${item.value} (${percentage}%)`;
};

适配可视化工具的例子（比如ECharts） #

如果是在ECharts这类图表里用Tooltip，直接在formatter里加判断就行：

option = {
  tooltip: {
    formatter: (params) => {
      if (params.value === 0) {
        return ''; // 返回空字符串，Tooltip就不会弹出
      }
      const percentage = ((params.value / totalValue) * 100).toFixed(2);
      return `${params.name}: ${params.value} (${percentage}%)`;
    }
  },
  // 其他图表配置...
};

关键提醒 #

一定要先判断值是否为0，别先计算百分比再判断——不然可能会出现0%的提示，不符合你“完全不显示”的要求。这样处理后，所有值为0的项hover上去都不会有Tooltip啦！

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