Skip to content

Commit

Permalink
effectScatter keep effect when setOption. Fix #3439
Browse files Browse the repository at this point in the history
  • Loading branch information
@pissang
pissang committed Jun 16, 2016
1 parent e823b6c commit a74bb6c
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 53 deletions.
5 changes: 3 additions & 2 deletions extension/bmap/BMapModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@ define(function (require) {
},

defaultOption: {
center: null,

zoom: 1,
center: [104.114129, 37.550339],

zoom: 5,

mapStyle: {},

Expand Down
140 changes: 89 additions & 51 deletions src/chart/helper/EffectSymbol.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,19 @@ define(function (require) {
}
return symbolSize;
}

function updateRipplePath(rippleGroup, effectCfg) {
rippleGroup.eachChild(function (ripplePath) {
ripplePath.attr({
z: effectCfg.z,
zlevel: effectCfg.zlevel,
style: {
stroke: effectCfg.brushType === 'stroke' ? effectCfg.color : null,
fill: effectCfg.brushType === 'fill' ? effectCfg.color : null
}
});
});
}
/**
* @constructor
* @param {module:echarts/data/List} data
Expand All @@ -45,12 +58,9 @@ define(function (require) {
this.childAt(1).removeAll();
};

effectSymbolProto.startEffectAnimation = function (
period, brushType, rippleScale, effectOffset, z, zlevel
) {
var symbolType = this._symbolType;
var color = this._color;

effectSymbolProto.startEffectAnimation = function (effectCfg) {
var symbolType = effectCfg.symbolType;
var color = effectCfg.color;
var rippleGroup = this.childAt(1);

for (var i = 0; i < EFFECT_RIPPLE_NUMBER; i++) {
Expand All @@ -59,34 +69,53 @@ define(function (require) {
);
ripplePath.attr({
style: {
stroke: brushType === 'stroke' ? color : null,
fill: brushType === 'fill' ? color : null,
strokeNoScale: true
},
z2: 99,
silent: true,
scale: [1, 1],
z: z,
zlevel: zlevel
scale: [1, 1]
});

var delay = -i / EFFECT_RIPPLE_NUMBER * period + effectOffset;
// TODO Configurable period
var delay = -i / EFFECT_RIPPLE_NUMBER * effectCfg.period + effectCfg.effectOffset;
// TODO Configurable effectCfg.period
ripplePath.animate('', true)
.when(period, {
scale: [rippleScale, rippleScale]
.when(effectCfg.period, {
scale: [effectCfg.rippleScale, effectCfg.rippleScale]
})
.delay(delay)
.start();
ripplePath.animateStyle(true)
.when(period, {
.when(effectCfg.period, {
opacity: 0
})
.delay(delay)
.start();

rippleGroup.add(ripplePath);
}

updateRipplePath(rippleGroup, effectCfg);
};

/**
* Update effect symbol
*/
effectSymbolProto.updateEffectAnimation = function (effectCfg) {
var oldEffectCfg = this._effectCfg;
var rippleGroup = this.childAt(1);

// Must reinitialize effect if following configuration changed
var DIFFICULT_PROPS = ['symbolType', 'period', 'rippleScale'];
for (var i = 0; i < DIFFICULT_PROPS; i++) {
var propName = DIFFICULT_PROPS[i];
if (oldEffectCfg[propName] !== effectCfg[propName]) {
this.stopEffectAnimation();
this.startEffectAnimation(effectCfg);
return;
}
}

updateRipplePath(rippleGroup, effectCfg);
};

/**
Expand Down Expand Up @@ -135,43 +164,52 @@ define(function (require) {
}
rippleGroup.rotation = (itemModel.getShallow('symbolRotate') || 0) * Math.PI / 180 || 0;

this._symbolType = symbolType;
this._color = color;

var showEffectOn = seriesModel.get('showEffectOn');
var rippleScale = itemModel.get('rippleEffect.scale');
var brushType = itemModel.get('rippleEffect.brushType');
var effectPeriod = itemModel.get('rippleEffect.period') * 1000;
var effectOffset = idx / data.count();
var z = itemModel.getShallow('z') || 0;
var zlevel = itemModel.getShallow('zlevel') || 0;

this.stopEffectAnimation();
if (showEffectOn === 'render') {
this.startEffectAnimation(
effectPeriod, brushType, rippleScale, effectOffset, z, zlevel
);
}
var symbol = this.childAt(0);
function onEmphasis() {
symbol.trigger('emphasis');
if (showEffectOn !== 'render') {
this.startEffectAnimation(
effectPeriod, brushType, rippleScale, effectOffset, z, zlevel
);
}
var effectCfg = {};

effectCfg.showEffectOn = seriesModel.get('showEffectOn');
effectCfg.rippleScale = itemModel.get('rippleEffect.scale');
effectCfg.brushType = itemModel.get('rippleEffect.brushType');
effectCfg.period = itemModel.get('rippleEffect.period') * 1000;
effectCfg.effectOffset = idx / data.count();
effectCfg.z = itemModel.getShallow('z') || 0;
effectCfg.zlevel = itemModel.getShallow('zlevel') || 0;
effectCfg.symbolType = symbolType;
effectCfg.color = color;

this.off('mouseover').off('mouseout').off('emphasis').off('normal');

if (effectCfg.showEffectOn === 'render') {
this._effectCfg
? this.updateEffectAnimation(effectCfg)
: this.startEffectAnimation(effectCfg);

this._effectCfg = effectCfg;
}
function onNormal() {
symbol.trigger('normal');
if (showEffectOn !== 'render') {
this.stopEffectAnimation();
}
else {
// Not keep old effect config
this._effectCfg = null;

this.stopEffectAnimation();
var symbol = this.childAt(0);
var onEmphasis = function () {
symbol.trigger('emphasis');
if (effectCfg.showEffectOn !== 'render') {
this.startEffectAnimation(effectCfg);
}
};
var onNormal = function () {
symbol.trigger('normal');
if (effectCfg.showEffectOn !== 'render') {
this.stopEffectAnimation();
}
};
this.on('mouseover', onEmphasis, this)
.on('mouseout', onNormal, this)
.on('emphasis', onEmphasis, this)
.on('normal', onNormal, this);
}
this.off('mouseover').off('mouseout').off('emphasis').off('normal');
this.on('mouseover', onEmphasis, this)
.on('mouseout', onNormal, this)
.on('emphasis', onEmphasis, this)
.on('normal', onNormal, this);

this._effectCfg = effectCfg;
};

effectSymbolProto.fadeOut = function (cb) {
Expand Down

0 comments on commit a74bb6c

Please sign in to comment.