如何在ECharts Tooltip中使用系列自带的Symbol图标？

完全可以实现Tooltip图标与折线图系列点、图例的图标保持一致。ECharts默认的Tooltip会使用实心圆图标，要自定义匹配系列图标，只需通过tooltip.formatter手动构建包含对应图标的提示内容即可。

核心思路 #

通过tooltip.formatter的自定义函数，针对每个系列的symbol（图标类型），用HTML+CSS模拟出和系列一致的空心圆、菱形等图标，替换默认的实心圆。

代码示例 #

假设你有两个折线系列，分别使用空心圆和菱形图标：

// 图表配置
option = {
  tooltip: {
    trigger: 'axis',
    // 自定义Tooltip内容
    formatter: function(params) {
      let tipContent = params[0].axisValue + '<br/>';
      params.forEach(item => {
        let symbolHtml = '';
        // 根据系列名称匹配对应图标样式
        switch(item.seriesName) {
          case '空心圆系列':
            // 模拟空心圆
            symbolHtml = `<span style="display:inline-block;margin-right:6px;border-radius:50%;width:10px;height:10px;border:2px solid ${item.color};background:transparent;"></span>`;
            break;
          case '菱形系列':
            // 模拟菱形
            symbolHtml = `<span style="display:inline-block;margin-right:6px;width:10px;height:10px;border:2px solid ${item.color};background:transparent;transform:rotate(45deg);"></span>`;
            break;
        }
        tipContent += `${symbolHtml}${item.seriesName}: ${item.value}<br/>`;
      });
      return tipContent;
    }
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '空心圆系列',
      type: 'line',
      symbol: 'circle',
      symbolSize: 12,
      symbolStrokeWidth: 2,
      symbolFill: 'transparent',
      data: [120, 132, 101, 134, 90]
    },
    {
      name: '菱形系列',
      type: 'line',
      symbol: 'diamond',
      symbolSize: 12,
      symbolStrokeWidth: 2,
      symbolFill: 'transparent',
      data: [220, 182, 191, 234, 290]
    }
  ]
};

更灵活的实现方式 #

如果系列较多或需要动态匹配，可以提前定义系列的图标配置，通过seriesIndex关联：

// 预定义系列图标样式
const seriesSymbolConfig = [
  {
    symbol: 'circle',
    strokeColor: '#5470c6',
    strokeWidth: 2,
    fillColor: 'transparent'
  },
  {
    symbol: 'diamond',
    strokeColor: '#91cc75',
    strokeWidth: 2,
    fillColor: 'transparent'
  }
];

option = {
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      let tipContent = params[0].axisValue + '<br/>';
      params.forEach(item => {
        const config = seriesSymbolConfig[item.seriesIndex];
        let symbolHtml = '';
        if (config.symbol === 'circle') {
          symbolHtml = `<span style="display:inline-block;margin-right:6px;border-radius:50%;width:10px;height:10px;border:${config.strokeWidth}px solid ${config.strokeColor};background:${config.fillColor};"></span>`;
        } else if (config.symbol === 'diamond') {
          symbolHtml = `<span style="display:inline-block;margin-right:6px;width:10px;height:10px;border:${config.strokeWidth}px solid ${config.strokeColor};background:${config.fillColor};transform:rotate(45deg);"></span>`;
        }
        tipContent += `${symbolHtml}${item.seriesName}: ${item.value}<br/>`;
      });
      return tipContent;
    }
  },
  // xAxis、yAxis配置略
  series: [
    {
      name: '系列1',
      type: 'line',
      symbol: 'circle',
      symbolSize: 12,
      symbolStroke: '#5470c6',
      symbolStrokeWidth: 2,
      symbolFill: 'transparent',
      data: [120, 132, 101, 134, 90]
    },
    {
      name: '系列2',
      type: 'line',
      symbol: 'diamond',
      symbolSize: 12,
      symbolStroke: '#91cc75',
      symbolStrokeWidth: 2,
      symbolFill: 'transparent',
      data: [220, 182, 191, 234, 290]
    }
  ]
};

这种方法通过CSS模拟ECharts内置的symbol形状，能完美匹配系列的图标样式，实现Tooltip图标和系列、图例图标统一的效果。

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