无需使用formatter，如何修改tooltip中图例的样式？

如果不想逐个图表写formatter来修改tooltip的图例样式，可以试试以下两种批量统一配置的方式：

1. 封装通用Tooltip配置函数 #

把自定义图例样式的逻辑抽成可复用的函数，每个图表初始化时直接合并该配置：

// 封装通用tooltip配置，统一定义图例样式
function getUnifiedTooltip() {
  return {
    tooltip: {
      formatter: params => {
        let content = `${params.name}<br>`;
        params.forEach(item => {
          // 自定义标记样式：这里改成圆形标记，可调整大小、颜色、边距等
          const marker = `<span style="display:inline-block;margin-right:8px;width:10px;height:10px;border-radius:50%;background:${item.color};"></span>`;
          content += `${marker}${item.seriesName}: ${item.value}<br>`;
        });
        return content;
      },
      // 可选：统一修改tooltip容器样式
      extraCssText: 'border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;'
    }
  };
}

// 图表1初始化
const chart1 = echarts.init(document.getElementById('chart1'));
chart1.setOption({
  ...getUnifiedTooltip(),
  // 其他图表配置（xAxis、series等）
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  series: [{ name: '系列1', type: 'bar', data: [10, 20, 30] }]
});

// 图表2初始化，直接复用同一配置
const chart2 = echarts.init(document.getElementById('chart2'));
chart2.setOption({
  ...getUnifiedTooltip(),
  // 其他图表配置
  xAxis: { type: 'category', data: ['X', 'Y', 'Z'] },
  series: [{ name: '系列2', type: 'line', data: [15, 25, 35] }]
});

2. 注册全局自定义主题 #

通过ECharts的主题注册功能，把tooltip样式写入主题，所有使用该主题的图表会自动应用：

// 注册自定义主题，统一配置tooltip及其他全局样式
echarts.registerTheme('customTooltipTheme', {
  tooltip: {
    formatter: params => {
      let content = `${params.name}<br>`;
      params.forEach(item => {
        // 自定义方形标记，可调整样式
        const marker = `<span style="display:inline-block;margin-right:8px;width:12px;height:12px;background:${item.color};border:1px solid #fff;"></span>`;
        content += `${marker}${item.seriesName}: ${item.value}<br>`;
      });
      return content;
    },
    extraCssText: 'background:#fff;border:1px solid #e5e5e5;'
  },
  // 可添加其他全局样式（如坐标轴、系列颜色等）
});

// 使用自定义主题初始化图表
const chart1 = echarts.init(document.getElementById('chart1'), 'customTooltipTheme');
const chart2 = echarts.init(document.getElementById('chart2'), 'customTooltipTheme');

// 后续仅需设置图表自身的业务配置即可
chart1.setOption({
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  series: [{ name: '系列1', type: 'bar', data: [10, 20, 30] }]
});

这两种方式都能实现一次配置、多图表复用，避免重复编写formatter逻辑，后续要修改图例样式时，只需调整封装的函数或主题配置即可。

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