Apache ECharts值与回归线联动及缩放后消失问题的解决方案咨询

针对你遇到的ECharts联动显示数值系列与回归线、且缩放时回归线不消失的需求，推荐以下两种可行方案：

方案一：通过事件监听控制独立回归线系列 #

将回归线设为单独的line系列，隐藏其图例标识，再通过图例选择事件联动控制显示状态：

1. 配置系列：

   • 数值系列正常配置，保留图例项；
   • 回归线系列设置showLegendSymbol: false（不显示在图例），初始状态与对应数值系列一致。
   • 示例配置片段：

     series: [
       // 数值系列A
       {
         name: '数值系列A',
         type: 'line',
         data: [/* 你的业务数据 */],
         // 其他样式配置
       },
       // 对应回归线系列A
       {
         name: '回归线A',
         type: 'line',
         data: [/* 提前计算好的回归线拟合数据 */],
         showLegendSymbol: false, // 不显示在图例列表中
         lineStyle: { type: 'dashed', color: '#999' }, // 用虚线区分回归线样式
         silent: true, // 禁止回归线响应鼠标交互事件
         selected: true // 初始显示状态与数值系列同步
       },
       // 更多数值+回归线系列组合...
     ]
     

2. 监听图例选择事件：
   通过legendselectchanged事件，同步切换对应回归线系列的显示状态：

   myChart.on('legendselectchanged', function(params) {
     const targetSeries = params.name;
     // 按命名规则匹配对应回归线系列，可根据实际命名调整
     const regressionSeriesName = `回归线${targetSeries}`;
     // 同步选中状态
     myChart.dispatchAction({
       type: 'legendSelect',
       name: regressionSeriesName,
       selected: params.selected[targetSeries]
     });
   });
   

方案二：直接控制系列显示/隐藏 #

如果需要更直白的控制逻辑，可在图例事件中直接调用showSeries/hideSeries动作：

myChart.on('legendselectchanged', function(params) {
  const isSelected = params.selected[params.name];
  const targetSeries = [params.name, `回归线${params.name}`];
  // 先统一隐藏，再根据选中状态决定是否显示
  myChart.dispatchAction({ type: 'hideSeries', seriesName: targetSeries });
  if (isSelected) {
    myChart.dispatchAction({ type: 'showSeries', seriesName: targetSeries });
  }
});

补充说明 #

• 回归线数据需要提前通过算法（如最小二乘法）计算生成，作为独立系列的data传入，这样缩放时不会像markLine那样出现消失问题；
• 系列命名建议遵循统一规则，方便快速关联数值系列与对应回归线系列；
• 若不需要回归线触发交互，silent: true配置可避免干扰数值系列的交互逻辑。

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