如何基于seriesIndex为Apache Echarts Tooltip设置不同背景色及指定文本加粗？

1. 动态设置Tooltip背景色 #

ECharts 5及以上版本支持将tooltip.backgroundColor设为回调函数，通过params获取当前系列的seriesIndex，根据区间返回对应颜色。

2. 仅数值部分加粗 #

利用ECharts Tooltip支持HTML格式的特性，在格式化数值时用<b>标签包裹，同时移除全局textStyle的加粗设置，避免影响日期文本。

修改后的完整配置代码：

tooltip: {
  trigger: "axis",
  formatter: function (params) {
    const valueText = `<b>${params[0].value.toFixed(1)}%</b>`;
    return params[0].dataIndex === 0
      ? `${rangeLow.format("DD")}-${rangeLow.add(firstWeek.length - 1, "day").format("DD MMM")} \n ${valueText}` //prettier-ignore
      : params[0].dataIndex === 52
      ? `${rangeHigh.subtract(lastWeek.length - 1, "day").format("DD")}-${rangeHigh.format("DD MMM")} \n ${valueText}` //prettier-ignore
      : `${newRangeLow.add(params[0].dataIndex - 1, "week").format("DD")}-${newRangeLow.add(params[0].dataIndex - 1,"week").add(6,'day').format("DD MMM")} \n ${valueText}` //prettier-ignore
  },
  confine: true,
  axisPointer: {
    type: "none",
  },
  // 动态设置背景色
  backgroundColor: function(params) {
    const seriesIndex = params[0].seriesIndex;
    return seriesIndex >= 0 && seriesIndex <= 30 ? "#FFFFFF" : "#FF0000";
  },
  // 移除全局加粗，仅通过HTML标签控制数值样式
  textStyle: {
    fontWeight: "normal"
  },
},

关键说明 #

• 背景色回调函数：通过params[0].seriesIndex获取当前触发Tooltip的系列索引，判断后返回对应颜色值；
• 数值加粗：将数值文本用<b>标签包裹，ECharts会自动解析HTML样式，同时把全局textStyle.fontWeight设为normal，保证日期文本正常显示；
• 若使用ECharts 4及以下版本，backgroundColor不支持回调函数，可改用formatter返回完整的HTML结构，通过<div>的style属性控制背景色，示例：

formatter: function (params) {
  const seriesIndex = params[0].seriesIndex;
  const bgColor = seriesIndex >=0 && seriesIndex <=30 ? "#FFFFFF" : "#FF0000";
  const valueText = `<b>${params[0].value.toFixed(1)}%</b>`;
  const content = params[0].dataIndex === 0
    ? `${rangeLow.format("DD")}-${rangeLow.add(firstWeek.length - 1, "day").format("DD MMM")} \n ${valueText}`
    : params[0].dataIndex === 52
    ? `${rangeHigh.subtract(lastWeek.length - 1, "day").format("DD")}-${rangeHigh.format("DD MMM")} \n ${valueText}`
    : `${newRangeLow.add(params[0].dataIndex - 1, "week").format("DD")}-${newRangeLow.add(params[0].dataIndex - 1,"week").add(6,'day').format("DD MMM")} \n ${valueText}`;
  return `<div style="background-color: ${bgColor}; padding: 8px; border-radius: 4px;">${content.replace(/\n/g, "<br>")}</div>`;
}

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