ECharts v5.4：如何为Tooltip标记添加边框以突出显示

需求说明 #

使用ECharts v5.4版本，希望实现类似TensorBoard的Tooltip标记效果：鼠标悬停折线图时，Tooltip中的系列标记周围显示边框以突出显示。尝试修改tooltip.formatter但效果不理想，寻求可行实现方案。

实现方案 #

默认ECharts的marker不带边框，要实现目标效果，需在tooltip.formatter中自定义标记的HTML结构，给每个标记添加带边框的容器，同时保留原系列的颜色匹配。

核心思路：

• 从默认marker的HTML中提取系列颜色值
• 生成带边框的自定义标记元素，替换原marker

修改后的完整代码 #

option = {
  tooltip: {
    trigger: 'axis',
    formatter: (params) => {
      let tooltip = '';
      params.forEach(item => {
        // 提取原marker的背景色
        const colorMatch = item.marker.match(/background-color:(#[0-9a-fA-F]+)/);
        const color = colorMatch ? colorMatch[1] : '#ccc';
        // 自定义带边框的marker结构
        const borderedMarker = `<span style="display:inline-block; width:10px; height:10px; border:2px solid #fff; box-shadow:0 0 0 1px ${color}; border-radius:50%; margin-right:8px;"></span>`;
        tooltip += `<p>${borderedMarker} ${item.seriesName}: ${item.value}</p>`;
      });
      return tooltip;
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

代码细节说明 #

1. 颜色匹配：通过正则从默认marker的style中提取背景色，确保自定义标记和系列颜色一致
2. 边框实现：用box-shadow实现外层颜色边框，搭配白色内边框，模拟高亮突出效果，和目标样式对齐
3. 多系列适配：遍历所有params项，不再手动指定索引，兼容任意数量的折线系列

可选样式调整 #

如果需要更柔和的高亮效果，可修改box-shadow参数增加模糊度：

box-shadow:0 0 3px 1px ${color};

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