echarts
echarts copied to clipboard
[Feature] Allow separate style customization if mark highlighted from legend
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