嘿，这个问题我刚好有经验！当然可以单独处理ECharts的图例项，而且实现方式其实挺灵活的，咱们一步步来拆解：

一、为什么你的legend: { item: { rules: [] } }配置不生效？ #

首先得明确：ECharts的legend.item是用来设置所有图例项的全局默认样式的（比如统一的图标大小、文字颜色），它并没有rules这个官方配置项。你可能混淆了其他图表库的规则式配置逻辑，ECharts是通过legend.data数组里的单个对象来实现差异化定制的。

二、单独处理图例项的两种核心方式 #

1. 初始化时直接配置单个图例项 #

在legend.data里，每个图例项可以是字符串，也可以是一个包含个性化配置的对象，支持设置禁用状态、文字样式、图标样式等：

option = {
  legend: {
    data: [
      // 禁用指定图例项
      { name: '销量A', disabled: true },
      // 缩小该图例项的文字大小，同时修改图标样式
      { 
        name: '销量B', 
        textStyle: { fontSize: 10, color: '#999' },
        itemStyle: { borderWidth: 1, borderRadius: 2 }
      },
      // 默认样式的图例项
      '销量C'
    ]
  },
  xAxis: { type: 'category', data: ['1月', '2月', '3月'] },
  yAxis: { type: 'value' },
  series: [
    { name: '销量A', type: 'bar', data: [100, 120, 150] },
    { name: '销量B', type: 'bar', data: [90, 110, 130] },
    { name: '销量C', type: 'bar', data: [80, 100, 120] }
  ]
};

2. 动态操作图例项数组（适合模块/插件场景） #

如果需要在运行时动态修改图例项（比如通过自定义模块实现批量修改、条件式修改），可以通过ECharts实例的API来操作：

// 初始化ECharts实例
const myChart = echarts.init(document.getElementById('chart-container'));

// 封装一个可复用的图例项修改函数（可作为模块方法）
function modifyLegendItem(targetName, config) {
  // 获取当前图表配置
  const currentOpt = myChart.getOption();
  // 找到目标图例项的索引
  const targetIndex = currentOpt.legend[0].data.findIndex(item => {
    // 兼容字符串和对象类型的图例项
    const itemName = typeof item === 'string' ? item : item.name;
    return itemName === targetName;
  });
  
  if (targetIndex !== -1) {
    // 如果是字符串类型，先转为对象再合并配置
    if (typeof currentOpt.legend[0].data[targetIndex] === 'string') {
      currentOpt.legend[0].data[targetIndex] = { name: targetName };
    }
    // 合并自定义配置
    Object.assign(currentOpt.legend[0].data[targetIndex], config);
    // 更新图表
    myChart.setOption(currentOpt);
  }
}

// 使用示例：动态禁用销量A，缩小销量B的文字
modifyLegendItem('销量A', { disabled: true });
modifyLegendItem('销量B', { textStyle: { fontSize: 10 } });

三、进阶技巧：动态格式化图例文本 #

如果需要更复杂的样式（比如给特定图例项加标记），可以用legend.formatter函数来动态生成文本：

legend: {
  formatter: function(name) {
    // 给销量B添加小标记并缩小文字
    if (name === '销量B') {
      return `<span style="font-size:10px;">${name} (已缩小)</span>`;
    }
    return name;
  },
  // 开启HTML解析
  textStyle: { rich: {} }
}

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