嘿，我来帮你搞定这两个Tooltip自定义需求！我猜你用的是ECharts（毕竟是做折线图最常用的库之一），直接上解决方案：

1. 移除默认X轴Tooltip值 #

默认情况下，当Tooltip的trigger设为'axis'时，会自动显示X轴的对应值。要去掉它，我们可以通过自定义formatter函数完全控制Tooltip的输出内容，不包含X轴相关信息就行。

2. 为Y轴数据添加(分子/分母)格式的额外数据 #

假设你有三组数组：主Y轴数据数组、分子数组、分母数组，且它们的索引是一一对应的（比如第i个数据点的主值、分子、分母分别在三个数组的第i位），我们可以利用数据点的dataIndex来从额外数组中取值，再拼接到Tooltip内容里。

完整代码示例 #

先定义你的数据：

// 主Y轴数据
const mainYData = [120, 200, 150, 80, 70, 110, 130];
// 额外的分子数组（对应每个数据点的括号内前半部分）
const extraNums1 = [29, 35, 22, 18, 15, 27, 30];
// 额外的分母数组（对应每个数据点的括号内后半部分）
const extraNums2 = [3543, 3600, 3480, 3200, 3100, 3500, 3650];
// X轴数据（即使隐藏，依然需要用来渲染折线）
const xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

然后配置Tooltip：

option = {
  xAxis: {
    type: 'category',
    data: xAxisData
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    // 自定义formatter函数，完全控制Tooltip内容
    formatter: function(params) {
      // params是当前触发的所有系列数据集合，这里假设只有一个折线系列
      const currentData = params[0];
      // 获取当前数据点在数组中的索引
      const dataIndex = currentData.dataIndex;
      // 拼接成你想要的格式：系列名 + 主Y值 + (分子/分母)
      return `${currentData.seriesName}: ${currentData.value} (${extraNums1[dataIndex]}/${extraNums2[dataIndex]})`;
    }
  },
  series: [
    {
      name: '销量',
      type: 'line',
      data: mainYData
    }
  ]
};

多系列场景的适配 #

如果你有多个折线系列，每个系列对应不同的额外数组，可以遍历params数组，逐个处理每个系列的数据：

formatter: function(params) {
  let tooltipContent = '';
  params.forEach((seriesItem, index) => {
    // 这里可以根据seriesName或者索引，匹配对应的额外数组
    const targetExtra1 = extraNumsGroup1[index]; // 比如系列1的分子数组
    const targetExtra2 = extraNumsGroup2[index]; // 系列1的分母数组
    tooltipContent += `${seriesItem.seriesName}: ${seriesItem.value} (${targetExtra1[seriesItem.dataIndex]}/${targetExtra2[seriesItem.dataIndex]})<br/>`;
  });
  return tooltipContent;
}

如果你用的是Chart.js #

如果是Chart.js的话，思路类似，通过Tooltip的回调函数来实现：

options: {
  tooltip: {
    callbacks: {
      // 隐藏X轴标题
      title: () => '',
      // 自定义每个数据点的标签内容
      label: (context) => {
        const idx = context.dataIndex;
        return `${context.dataset.label}: ${context.parsed.y} (${extraNums1[idx]}/${extraNums2[idx]})`;
      }
    }
  }
}

这样就能完美实现你要的两个效果啦！

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