EchartsJS - 有没有办法/解决方法来监听“图例”组件上的鼠标事件？

Question

I have two graphs side-by-side (pie and line) and I'd like to be able to highlight a line in the line graph upon hovering a legend in the pie graph (without the legend toggling feature).

The mouse events doesn't seem to fire on the legend component.

There's the selectMode option for the legend, but that's not what I want since its toggling the series in the pie chart.

I'm able to catch the legendselectchanged event and "undo" the toggling by setting selected option of the series to true again, but its not ideal and the animation still fires, was unable to disable it.

Any ideas or workarounds?

Answer 1

[ECharts v4] From what I know, legend component internally dispatches 'highlight' and 'downplay' actions, but you can subscribe to those events to.

chart.on('highlight', function (e) {
   // e => {
   // excludeSeriesId: ...
   // name: ...
   // seriesName: ...
   // type: "highlight"
   // }
});
// same for 'downplay'