[讨论] 关于 Legend 等组件的鼠标事件

[pissang]

已经有好多同学反馈需要监听 legend 等组件的鼠标事件了。这里建一个 issue，希望相关的都能在这个 issue 下讨论。

对于 legend 等组件的事件我们要加是挺方便的，但是一直有个顾虑是现在版本默认只有图表系列有事件，所以可能很多程序在处理事件的时候只考虑图表系列的事件。比如要添加一个跳转的链接可能直接就是写

myChart.on('click', function (param) {
  window.open(param.data.link);
});

一旦加 legend 等组件也加入了事件，这些事件处理的代码可能都会出问题。

有个方案是像坐标轴（坐标轴有点击事件）一样加一个 silent 配置项。默认 silent: true 时不触发事件，
但是对于 legend 这样的交互组件来说 silent: true 更像是关闭交互。所以可能需要一个更好的参数名。

对于这些不知道大家是否有更好的意见。

[daoyuanjiao]

希望 legend 里面可以添加一个功能，就是可以将几个系列设为一个组显示一个别名，然后点击这个别名，可以显示隐藏这个组里面的所有系列！如：我有150个系列，现在要显示150个legend，界面显示太多且不美观，如果我可以将相似的1-50的系列设为一个组，51-100的系列设为一个组，101-150的系列设为一个组，然后显示只显示组名，这样我只要显示三个legend，界面就会简洁多了，而且便于用户操作！

[mosence]

也稍微看了下源代码
这个属性应该是类似 “自定义action” 的名字。

[strongrobot]

不是有legendselectchanged吗？

[anyexinglu]

最后支持监听 legend 等组件的鼠标事件了么？

[datou3600]

一旦加 legend 等组件也加入了事件，这些事件处理的代码可能都会出问题。

可以为legend 添加特定的事件，比如：legendmouseover 、legendmouseout，独立于原来的mouseover 等事件。
或者支持使用类似jQuery 的语法：

chart.on('mouseover', 'legend', function(){});

现在我们对于legend 的hover 事件还是有需求的，希望能支持~

[JJerrychen]

监听 legend 等组件的鼠标事件，实现legend的拖拽功能，，楼主有什么解决方法吗？想了好久了

[OneAndOnly1111]

求同，这个功能现在支持了么？

[xiaomantoujun]

很需要legend的hover事件

[lyw1991]

@pissang 请问现在这个问题有解决方案吗？

[lwl0812]

现在支持了吗？

[candy4290]

现在支持了吗？

[zhoujiachang]

0202年了还不支持吗- -

[Supertramplee]

给大家提供一个曲线救国方案...

需求: legend hover时高亮折线图上面的线。
Why: 折线是条拟合线，不需要show Symbol, 而当series比较多的时候，线就看不清了。。折线又没法单独highlight...

tooltip: {
  trigger: 'item',
  formatter: function(params) {
    // highlight hover series...
    myChart.setOption({
        series:{
            name:params.name,
            lineStyle:{
                width:8
            }
        }
    })
    // downplay after 800ms..
    setTimeout(()=>{
        myChart.setOption({
        series:{
            name:params.name,
            lineStyle:{
                width:2
            }
        }
    })
    },800)
    return params.name
  },
  show: true
}

最终效果:

[cactus1949]

2021年年末前来，好像还是没有

[wangjian80187994]

2021-11-15 还是没有

[SHISME]

2021-12-03 任然没有

[HobaiRiku]

2022-01-25 marked

[ydwan]

我这边使用有个hack方案，实现了legend的hover，通过highlight和downplay这两个事件，当他们的params有params.seriesName则是图例的hover和移除。通过这个加个局部全量，判断是否hover，并且我这边react项目使用了ahooks的useMouse()钩子，获取鼠标的位置。最后，通过防抖事件，处理显示hover后的浮窗。

[anyanyan07]

2022年08月22日还没支持

[1042478910]

2022年09月22日还没支持

[lazyYangn]

2023年04月27日还没支持

[a1067111756]

哈哈哈 感觉支持有点困难，我遇到的场景是需要实现一个自动hover tooltip的功能，但是鼠标悬浮在legend时echarts的默认行为是去显示tootip，这时我需要去关掉我的自动轮播行为，但是这个事件没办法捕捉到。

[TencentIT]

2023年6月30号 还不支持legend添加hover事件。。。

[xuyanzhuqing]

2024年3月28日，还不支持，建议官方可以在mouseover 中加一个target，判断是否是hover 到了legend