You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2021/07/13 01:35:18 UTC
[echarts] branch feat-ripple-effect-count created (now 2efe31d)
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a change to branch feat-ripple-effect-count
in repository https://gitbox.apache.org/repos/asf/echarts.git.
at 2efe31d fix(effectScatter): recreate effect if count changed.
This branch includes the following new commits:
new ff0c8d3 feat(effectScatter): make ripple effect count configurable, resolves #15252.
new 2efe31d fix(effectScatter): recreate effect if count changed.
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 01/02: feat(effectScatter): make ripple effect count
configurable, resolves #15252.
Posted by wa...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch feat-ripple-effect-count
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit ff0c8d3af79dafded7d34d75350eeda7c49be6cd
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Mon Jul 12 12:09:55 2021 +0800
feat(effectScatter): make ripple effect count configurable, resolves #15252.
---
src/chart/effectScatter/EffectScatterSeries.ts | 6 ++++--
src/chart/helper/EffectSymbol.ts | 11 ++++++-----
src/chart/helper/SymbolDraw.ts | 7 ++++++-
test/effectScatter.html | 9 +++++++--
4 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/src/chart/effectScatter/EffectScatterSeries.ts b/src/chart/effectScatter/EffectScatterSeries.ts
index 5d16446..58a867f 100644
--- a/src/chart/effectScatter/EffectScatterSeries.ts
+++ b/src/chart/effectScatter/EffectScatterSeries.ts
@@ -116,7 +116,9 @@ class EffectScatterSeriesModel extends SeriesModel<EffectScatterSeriesOption> {
// Scale of ripple
scale: 2.5,
// Brush type can be fill or stroke
- brushType: 'fill'
+ brushType: 'fill',
+ // Count of ripple effect
+ count: 3
},
universalTransition: {
@@ -142,4 +144,4 @@ class EffectScatterSeriesModel extends SeriesModel<EffectScatterSeriesOption> {
};
}
-export default EffectScatterSeriesModel;
\ No newline at end of file
+export default EffectScatterSeriesModel;
diff --git a/src/chart/helper/EffectSymbol.ts b/src/chart/helper/EffectSymbol.ts
index c20a160..c20292e 100644
--- a/src/chart/helper/EffectSymbol.ts
+++ b/src/chart/helper/EffectSymbol.ts
@@ -26,8 +26,6 @@ import type { ZRColor, ECElement } from '../../util/types';
import type Displayable from 'zrender/src/graphic/Displayable';
import { SymbolDrawItemModelOption } from './SymbolDraw';
-const EFFECT_RIPPLE_NUMBER = 3;
-
interface RippleEffectCfg {
showEffectOn?: 'emphasis' | 'render'
rippleScale?: number
@@ -38,7 +36,8 @@ interface RippleEffectCfg {
zlevel?: number
symbolType?: string
color?: ZRColor
- rippleEffectColor?: ZRColor
+ rippleEffectColor?: ZRColor,
+ effectCount?: number
}
function updateRipplePath(rippleGroup: Group, effectCfg: RippleEffectCfg) {
@@ -78,9 +77,10 @@ class EffectSymbol extends Group {
startEffectAnimation(effectCfg: RippleEffectCfg) {
const symbolType = effectCfg.symbolType;
const color = effectCfg.color;
+ const effectCount = effectCfg.effectCount;
const rippleGroup = this.childAt(1) as Group;
- for (let i = 0; i < EFFECT_RIPPLE_NUMBER; i++) {
+ for (let i = 0; i < effectCount; i++) {
// If width/height are set too small (e.g., set to 1) on ios10
// and macOS Sierra, a circle stroke become a rect, no matter what
// the scale is set. So we set width/height as 2. See #4136.
@@ -97,7 +97,7 @@ class EffectSymbol extends Group {
scaleY: 0.5
});
- const delay = -i / EFFECT_RIPPLE_NUMBER * effectCfg.period + effectCfg.effectOffset;
+ const delay = -i / effectCount * effectCfg.period + effectCfg.effectOffset;
// TODO Configurable effectCfg.period
ripplePath.animate('', true)
.when(effectCfg.period, {
@@ -202,6 +202,7 @@ class EffectSymbol extends Group {
effectCfg.symbolType = symbolType;
effectCfg.color = color;
effectCfg.rippleEffectColor = itemModel.get(['rippleEffect', 'color']);
+ effectCfg.effectCount = itemModel.get(['rippleEffect', 'count']);
this.off('mouseover').off('mouseout').off('emphasis').off('normal');
diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts
index 9f53db8..47c2063 100644
--- a/src/chart/helper/SymbolDraw.ts
+++ b/src/chart/helper/SymbolDraw.ts
@@ -83,7 +83,12 @@ interface RippleEffectOption {
brushType?: 'fill' | 'stroke'
- color?: ZRColor
+ color?: ZRColor,
+
+ /**
+ * Count of ripple effect
+ */
+ count?: number
}
interface SymbolDrawStateOption {
diff --git a/test/effectScatter.html b/test/effectScatter.html
index 30ab909..bce8254 100644
--- a/test/effectScatter.html
+++ b/test/effectScatter.html
@@ -547,12 +547,17 @@ under the License.
});
setInterval(function () {
+ var rippleEffectCount = ~~(Math.random() * 9) + 1;
+ console.log('rippleEffectCount', rippleEffectCount);
myChart.setOption({
series: [{
name: 'Top 5',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
- }).slice(0, Math.round(6 * Math.random())))
+ }).slice(0, Math.round(6 * Math.random()))),
+ rippleEffect: {
+ count: rippleEffectCount
+ }
}]
});
}, 2000);
@@ -561,4 +566,4 @@ under the License.
</script>
</body>
-</html>
\ No newline at end of file
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 02/02: fix(effectScatter): recreate effect if count
changed.
Posted by wa...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch feat-ripple-effect-count
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 2efe31db15d2eb0db2071304319f4d4b097bcaf9
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Tue Jul 13 09:33:22 2021 +0800
fix(effectScatter): recreate effect if count changed.
---
src/chart/helper/EffectSymbol.ts | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/chart/helper/EffectSymbol.ts b/src/chart/helper/EffectSymbol.ts
index c20292e..00e1ace 100644
--- a/src/chart/helper/EffectSymbol.ts
+++ b/src/chart/helper/EffectSymbol.ts
@@ -98,7 +98,6 @@ class EffectSymbol extends Group {
});
const delay = -i / effectCount * effectCfg.period + effectCfg.effectOffset;
- // TODO Configurable effectCfg.period
ripplePath.animate('', true)
.when(effectCfg.period, {
scaleX: effectCfg.rippleScale / 2,
@@ -127,7 +126,7 @@ class EffectSymbol extends Group {
const rippleGroup = this.childAt(1) as Group;
// Must reinitialize effect if following configuration changed
- const DIFFICULT_PROPS = ['symbolType', 'period', 'rippleScale'] as const;
+ const DIFFICULT_PROPS = ['symbolType', 'period', 'rippleScale', 'effectCount'] as const;
for (let i = 0; i < DIFFICULT_PROPS.length; i++) {
const propName = DIFFICULT_PROPS[i];
if (oldEffectCfg[propName] !== effectCfg[propName]) {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org