如何在Apache ECharts折线图中实现系列组的强调聚焦与淡出效果？

ECharts默认的emphasis.focus仅支持单个系列的高亮控制，要实现分组高亮（悬停组内任意系列时，整组保持聚焦、其他组淡出），可以通过事件监听+dispatchActionAPI手动控制系列状态，具体方案如下：

核心思路 #

1. 定义分组映射关系，标记每个系列所属的分组
2. 监听鼠标mouseover/mouseout事件，触发对应分组的高亮/恢复逻辑
3. 关闭默认系列高亮行为，避免和手动控制冲突

完整实现代码 #

// 定义系列分组映射
const groupMap = {
  'line 1': 'group1',
  'line 2': 'group1',
  'line 3': 'group2',
  'line 4': 'group2'
};

// 图表配置
const option = {
  dataset: {
    dimensions: ['weekday', 'l1', 'l2', 'l3', 'l4'],
    source: [
      ['Mon', 250, 120, 75, 30],
      ['Tue', 220, 140, 100, 30],
      ['Wed', 230, 160, 80, 60],
      ['Thurs', 260, 200, 90, 20],
      ['Fri', 300, 128, 100, 40],
      ['Sat', 275, 150, 111, 20],
      ['Sun', 250, 175, 89, 20]
    ],
    sourceHeader: false
  },
  xAxis: {
    type: 'category',
  },
  yAxis: {
    type: 'value'
  },
  legend: {},
  series: [
    {
      name: 'line 1',
      encode: {x: 0, y: 1},
      type: 'line',
      emphasis: {
        focus: 'none' // 关闭默认系列聚焦，避免冲突
      }
    },
    {
      name: 'line 2',
      encode: {x: 0, y: 2},
      type: 'line',
      emphasis: {
        focus: 'none'
      }
    },
    {
      name: 'line 3',
      encode: {x: 0, y: 3},
      type: 'line',
      emphasis: {
        focus: 'none'
      }
    },
    {
      name: 'line 4',
      encode: {x: 0, y: 4},
      type: 'line',
      emphasis: {
        focus: 'none'
      }
    }
  ]
};

// 初始化图表实例
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

// 监听鼠标悬停事件，控制分组高亮
myChart.on('mouseover', (params) => {
  if (params.componentType === 'series') {
    const targetGroup = groupMap[params.seriesName];
    // 筛选目标分组和其他分组的系列
    const highlightSeries = Object.keys(groupMap).filter(name => groupMap[name] === targetGroup);
    const downplaySeries = Object.keys(groupMap).filter(name => groupMap[name] !== targetGroup);
    
    // 高亮目标分组，淡出其他分组
    myChart.dispatchAction({ type: 'highlight', seriesName: highlightSeries });
    myChart.dispatchAction({ type: 'downplay', seriesName: downplaySeries });
  }
});

// 监听鼠标离开事件，恢复所有系列正常状态
myChart.on('mouseout', () => {
  myChart.dispatchAction({ type: 'downplay', seriesName: Object.keys(groupMap) });
});

关键说明 #

• 分组逻辑完全自定义，支持任意数量的分组和系列组合
• 通过dispatchAction的highlight（高亮）和downplay（淡出）动作，精准控制系列状态
• 必须关闭默认的emphasis.focus，否则默认的单系列高亮会覆盖手动控制效果

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