apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.74k stars 19.62k forks source link

[Feature] graph highlight both nodes and edges #19368

Open hx425072624 opened 11 months ago

hx425072624 commented 11 months ago

What problem does this feature solve?

I want to highlight the nodes and edges like the picture below by using dispatchAction,but the function can only highlight nodes or edges.Is there any way to achieve this target

截屏2023-12-07 13 51 06

What does the proposed API look like?

dispatchAction({ type:'highlight', batch:[ { dataIndex:[1,2,34,5,6], dataType:'node' } { dataIndex:[1,2,34,5], dataType:'edge' } ] })

helgasoft commented 11 months ago

using dispatchAction, but the function can only highlight nodes or edges.

Nope, it can do both simultaneously - Demo Code. 📌 please close issue if problem solved.

image

hx425072624 commented 11 months ago

but this can't fade out of other data to focus the highlighted,is this a bug?

helgasoft commented 11 months ago

I doubt dispatchAction can change focus. Focus works only with mouseover.

hx425072624 commented 11 months ago

I doubt dispatchAction can change focus. Focus works only with mouseover.

截屏2023-12-13 11 05 19

But the document shows Focus works with highlight.I want to fade out of other data when i dispatchAction highlight,but it don't work

nanianlisao commented 1 month ago

But the document shows Focus works with highlight.I want to fade out of other data when i dispatchAction highlight,but it don't work

I had the same problem, and here's my solution

The second time you highlight node or edge, you need to add the notBlur: true property and recommend the focus setting self.

chart?.dispatchAction({
    type: 'highlight',
    batch: [
      { dataType: 'node', dataIndex: nodeIndexes },
      { dataType: 'edge', dataIndex: selected.indexes, notBlur: true },
    ],
  });