echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Feature] Allow separate style customization if mark highlighted from legend

Open pa7-sigma opened this issue 1 year ago • 0 comments

What problem does this feature solve?

Use case

I'd like to visually distinguish direct interactions with marks from legend interactions. When hovering over a Pie slice I'd like to apply emphasis styles, but when highlighting a Pie slice through the legend I'd like to apply different styles.

Example Experience

https://github.com/user-attachments/assets/64410e67-f6e8-4c54-b51b-946c2edc058d

Current Workaround

  • customize styles through mutating the graphics elements when legend items are hovered
  • rely on emphasis state for direct interactions
    // for legend highlight, iterate through each graphic element and apply opacity as needed
    const data = series.getData(); // from chart model
    data.eachItemGraphicEl((graphic, index) => {
        graphic.setStyle({
          opacity:
            dataIndexes.includes(index)
              ? HIGHLIGHT_OPACITY
              : HIGHLIGHT_OPACITY_MUTED,
        });
    });

Open Questions

Is there a better way to achieve this without customizing on the renderer level?

What does the proposed API look like?

This may not be a good idea so open to alternative approaches:

  • Extend the highlight action payload support applying custom styles when dispatching a highlight action

pa7-sigma avatar Dec 27 '24 19:12 pa7-sigma