apache / apache/echarts

[Feature] Support rippleEffect in select, blur, and emphasis states for effectScatter

Open
#20,850 1 comment 0 reactions 0 assignees View on GitHub
en new-feature pending
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.