如何仅将ECharts提示框（Tooltip）中的文本标签设置为粗体

要实现Tooltip里只有标签加粗、数据部分保持原样的效果，直接用全局fontWeight会让所有文本变粗，你可以通过自定义Tooltip的formatter函数来实现，具体做法如下：

核心思路 #

利用ECharts的tooltip.formatter配置，返回自定义的HTML结构，单独给标签部分套粗体样式标签，数据部分正常输出即可。

代码示例 #

1. 多系列（trigger: 'axis'）场景

如果你的图表是折线图、柱状图这类多系列联动的情况，示例配置：

option = {
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      let tipContent = '';
      // 遍历每个系列的提示内容
      params.forEach(item => {
        // 标签用<b>包裹，数据直接输出
        tipContent += `<b>${item.seriesName}</b>: ${item.value}<br>`;
      });
      return tipContent;
    }
  },
  // 以下是其他常规配置
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    { name: '销量', data: [120, 200, 150, 80, 70, 110, 130] },
    { name: '利润', data: [60, 100, 75, 40, 35, 55, 65] }
  ]
};

2. 单数据项（trigger: 'item'）场景

如果是饼图这类触发单个数据项的情况，调整formatter逻辑：

option = {
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      // 名称（标签）加粗，百分比和数值正常显示
      return `<b>${params.name}</b>: ${params.percent}% (${params.value})`;
    }
  },
  series: [
    {
      type: 'pie',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' }
      ]
    }
  ]
};

进阶样式调整 #

如果需要更灵活的样式（比如调整颜色、字号），可以用<span>标签指定内联样式：

tipContent += `<span style="font-weight:bold; color:#333;">${item.seriesName}</span>: <span style="color:#666;">${item.value}</span><br>`;

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