[Feature] Support rippleEffect in select, blur, and emphasis states for effectScatter
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### What problem does this feature solve?
Currently, the `effectScatter` series allows customizing `rippleEffect` globally and per data point. However, `rippleEffect` does not support modifications within the `select`, `blur`, and `emphasis` states. This means that while `itemStyle` properties (such as color) can be adjusted for these states, the `rippleEffect` remains unchanged.
Use Case:
My goal is to dynamically modify the `rippleEffect` appearance when a data point is emphasized, selected, or blurred. Specifically, I would like to:
Change the `rippleEffect` color when a point is selected (select).
Modify the rippleEffect's brushType and color on emphasis (emphasis).
Hide the rippleEffect in the blur state by setting its color to transparent.
Since `rippleEffect` is a key visual element in `effectScatter`, not being able to adjust it in these states limits interactive visual effects. Adding this feature would enhance user experience by allowing smoother visual transitions when interacting with data points.
### What does the proposed API look like?
I propose extending the `select`, `blur`, and `emphasis` states to support `rippleEffect`. This would allow configuring its properties (e.g., color, scale, period, brushType) within these states, similar to how `itemStyle` is handled.
{
type: "effectScatter",
symbol: "emptyCircle",
symbolSize: 25,
rippleEffect: {
scale: 10,
period: 5,
color: "red",
brushType: "stroke"
},
itemStyle: {
color: "#ff4500"
},
selectedMode: "multiple",
select: {
itemStyle: {
color: "cyan"
},
rippleEffect: {
color: "cyan" // Change ripple color when selected
}
},
emphasis: {
focus: "self",
rippleEffect: {
brushType: "fill",
color: "cyan" // Change ripple effect on emphasis
}
},
blur: {
itemStyle: {
color: "transparent"
},
rippleEffect: {
color: "transparent", // Hide ripple effect on blur
brushType: "fill"
}
},
data: [
{
value: [10, 20],
symbolSize: 14,
rippleEffect: { color: "blue" },
itemStyle: { color: "#000" },
emphasis: {
scale: 1.5,
itemStyle: { color: "red" }
}
},
[50, 50],
[80, 90]
]
}
By supporting `rippleEffect` within `select`, `blur`, and `emphasis`, users will have more control over how selections and interactions visually impact the chart.
Contributor guide
Assessment
This issue has not been assessed yet.