diff --git a/src/chart/effectScatter/EffectScatterSeries.js b/src/chart/effectScatter/EffectScatterSeries.js index 5c81268eeaa7fb6a65b94e67e0fe2af258c1af2c..ae76720a179fd46b84b2377ac57f5a3b30f08f5d 100644 --- a/src/chart/effectScatter/EffectScatterSeries.js +++ b/src/chart/effectScatter/EffectScatterSeries.js @@ -26,6 +26,16 @@ define(function (require) { // When to show the effect, option: 'render'|'emphasis' showEffectOn: 'render', + // Period of effect + effectPeriod: 4000, + + // Ripple effect config + rippleEffect: { + // Scale of ripple + scale: 2.5, + // Brush type can be fill or stroke + brushType: 'fill' + }, // Cartesian coordinate system xAxisIndex: 0, diff --git a/src/chart/helper/EffectSymbol.js b/src/chart/helper/EffectSymbol.js index 66dce287d8a8fe59f47878da5224b050d2d77749..fa8984a0a2c127a1059a09ff5ba2afae68b3b91d 100644 --- a/src/chart/helper/EffectSymbol.js +++ b/src/chart/helper/EffectSymbol.js @@ -44,13 +44,13 @@ define(function (require) { this.childAt(1).removeAll(); }; - effectSymbolProto.startEffectAnimation = function () { + effectSymbolProto.startEffectAnimation = function (period, brushType, rippleScale) { var symbolType = this._symbolType; var color = this._color; var rippleGroup = this.childAt(1); - var randomOffset = -Math.random() * 5000; + var randomOffset = -Math.random() * period; for (var i = 0; i < EFFECT_RIPPLE_NUMBER; i++) { var ripplePath = symbolUtil.createSymbol( @@ -58,23 +58,24 @@ define(function (require) { ); ripplePath.attr({ style: { - stroke: null, - fill: color + stroke: brushType === 'stroke' ? color : null, + fill: brushType === 'fill' ? color : null, + strokeNoScale: true }, z2: 99, scale: [1, 1] }); - var delay = -i / EFFECT_RIPPLE_NUMBER * 5000 + randomOffset; + var delay = -i / EFFECT_RIPPLE_NUMBER * period + randomOffset; // TODO Configurable period ripplePath.animate('', true) - .when(5000, { - scale: [3, 3] + .when(period, { + scale: [rippleScale, rippleScale] }) .delay(delay) .start(); ripplePath.animateStyle(true) - .when(5000, { + .when(period, { opacity: 0 }) .delay(delay) @@ -109,6 +110,7 @@ define(function (require) { this.childAt(0).updateData(data, idx); var rippleGroup = this.childAt(1); + var itemModel = data.getItemModel(idx); var symbolType = data.getItemVisual(idx, 'symbol'); var symbolSize = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize')); var color = data.getItemVisual(idx, 'color'); @@ -125,9 +127,13 @@ define(function (require) { this._color = color; var showEffectOn = seriesModel.get('showEffectOn'); + var rippleScale = itemModel.get('rippleEffect.scale'); + var brushType = itemModel.get('rippleEffect.brushType'); + var effectPeriod = itemModel.get('effectPeriod'); + this.stopEffectAnimation(); if (showEffectOn === 'render') { - this.startEffectAnimation(); + this.startEffectAnimation(effectPeriod, brushType, rippleScale); } var symbol = this.childAt(0); function onEmphasis() { diff --git a/test/effectScatter.html b/test/effectScatter.html index d062155d2c491a958100da3cfd189acb59ed30d4..1cb77114d8f7dcd51560e971cb35b8cc66e44397 100644 --- a/test/effectScatter.html +++ b/test/effectScatter.html @@ -491,10 +491,12 @@ }, label: { normal: { + formatter: '{b}', + position: 'right', show: false }, emphasis: { - show: false + show: true } }, itemStyle: { @@ -514,6 +516,11 @@ return val[2] / 10; }, showEffectOn: 'render', + rippleEffect: { + brushType: 'stroke' + }, + + hoverAnimation: true, label: { normal: { formatter: '{b}',