diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js index 59382fb631eaec94a35a291bd8bcf151995d95c4..a285d128b9439cc347c7f658cb6de0af8a7117b9 100644 --- a/src/chart/bar/BarView.js +++ b/src/chart/bar/BarView.js @@ -55,9 +55,9 @@ define(function (require) { var animateTarget = {}; rectShape[animateProperty] = 0; animateTarget[animateProperty] = layout[animateProperty]; - rect.animateTo({ + api.initGraphicEl(rect, { shape: animateTarget - }, 1000, 300 * dataIndex / data.count(), 'cubicOut'); + }); } }) .update(function (newIndex, oldIndex) { @@ -78,15 +78,15 @@ define(function (require) { group.add(rect); }) .remove(function (idx) { - var el = oldData.getItemGraphicEl(idx); - el.style.text = ''; - el.animateTo({ + var rect = oldData.getItemGraphicEl(idx); + // Not show text when animating + rect.style.text = ''; + api.updateGraphicEl(rect, { shape: { width: 0 } - }, 300, 'cubicOut', - function () { - group.remove(el); + }, function () { + group.remove(rect); }); }) .execute(); @@ -150,19 +150,18 @@ define(function (require) { }); }, - remove: function (ecModel) { + remove: function (ecModel, api) { var group = this.group; if (ecModel.get('animation')) { if (this._data) { this._data.eachItemGraphicEl(function (el) { // Not show text when animating el.style.text = ''; - el.animateTo({ + api.updateGraphicEl(el, { shape: { width: 0 } - }, 300, 'cubicOut', - function () { + }, function () { group.remove(el); }); }); diff --git a/src/chart/helper/Symbol.js b/src/chart/helper/Symbol.js index b81bb4e4bb2b6a8699375290447dc4bb36a300d7..4fe5722c6bf6ec2f7399b07f1049b9043e3036e2 100644 --- a/src/chart/helper/Symbol.js +++ b/src/chart/helper/Symbol.js @@ -120,6 +120,8 @@ define(function (require) { symbolProto.fadeOut = function (cb, api) { var symbolPath = this.childAt(0); + // Not show text when animating + symbolPath.style.text = ''; api.updateGraphicEl(symbolPath, { scale: [0, 0] }, cb); diff --git a/src/chart/line/LineView.js b/src/chart/line/LineView.js index ef23a5bed49f08c57c314906e4377a6db2165e28..527ef1fef89798f0887c0e5ea5ed57dc7c8e3d7b 100644 --- a/src/chart/line/LineView.js +++ b/src/chart/line/LineView.js @@ -83,9 +83,14 @@ define(function(require) { type: 'line', init: function () { + var lineGroup = new graphic.Group(); + var symbolDraw = new SymbolDraw(); this.group.add(symbolDraw.group); + this.group.add(lineGroup); + this._symbolDraw = symbolDraw; + this._lineGroup = lineGroup; }, render: function (seriesModel, ecModel, api) { @@ -104,12 +109,13 @@ define(function(require) { var polyline = this._polyline; var polygon = this._polygon; + var lineGroup = this._lineGroup; + var hasAnimation = ecModel.get('animation'); var isAreaChart = !areaStyleModel.isEmpty(); var stackedOnPoints = getStackedOnPoints(coordSys, data); - var isSymbolIgnore = !isCoordSysPolar && !seriesModel.get('showAllSymbol') && this._getSymbolIgnoreFunc(data, coordSys); @@ -127,16 +133,15 @@ define(function(require) { coordSys, hasAnimation ); } + lineGroup.setClipPath( + this._createClipShape(coordSys, true, api) + ); } else { // Update clipPath - // FIXME Clip path used by more than one elements if (hasAnimation) { - polyline.setClipPath( - this._createClipShape(coordSys) - ); - polygon && polygon.setClipPath( - this._createClipShape(coordSys) + lineGroup.setClipPath( + this._createClipShape(coordSys, false, api) ); } @@ -163,8 +168,7 @@ define(function(require) { } } // Add back - group.add(polyline); - group.add(polygon); + group.add(lineGroup); } polyline.setStyle(zrUtil.defaults( @@ -213,11 +217,9 @@ define(function(require) { /** * @param {module:zrender/container/Group} group * @param {Array.>} points - * @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys - * @param {boolean} hasAnimation * @private */ - _newPolyline: function (group, points, coordSys, hasAnimation) { + _newPolyline: function (group, points) { var polyline = this._polyline; // Remove previous created polyline if (polyline) { @@ -232,12 +234,7 @@ define(function(require) { z2: 10 }); - if (hasAnimation) { - var clipPath = this._createClipShape(coordSys, true); - polyline.setClipPath(clipPath); - } - - group.add(polyline); + this._lineGroup.add(polyline); this._polyline = polyline; @@ -248,11 +245,9 @@ define(function(require) { * @param {module:zrender/container/Group} group * @param {Array.>} stackedOnPoints * @param {Array.>} points - * @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys - * @param {boolean} hasAnimation * @private */ - _newPolygon: function (group, points, stackedOnPoints, coordSys, hasAnimation) { + _newPolygon: function (group, points, stackedOnPoints) { var polygon = this._polygon; // Remove previous created polygon if (polygon) { @@ -267,12 +262,7 @@ define(function(require) { silent: true }); - if (hasAnimation) { - var clipPath = this._createClipShape(coordSys, true); - polygon.setClipPath(clipPath); - } - - group.add(polygon); + this._lineGroup.add(polygon); this._polygon = polygon; return polygon; @@ -358,13 +348,13 @@ define(function(require) { } }, - _createClipShape: function (coordSys, hasAnimation) { + _createClipShape: function (coordSys, hasAnimation, api) { return coordSys.type === 'polar' - ? this._createPolarClipShape(coordSys, hasAnimation) - : this._createGridClipShape(coordSys, hasAnimation); + ? this._createPolarClipShape(coordSys, hasAnimation, api) + : this._createGridClipShape(coordSys, hasAnimation, api); }, - _createGridClipShape: function (cartesian, animation) { + _createGridClipShape: function (cartesian, hasAnimation, api) { var xExtent = getAxisExtentWithGap(cartesian.getAxis('x')); var yExtent = getAxisExtentWithGap(cartesian.getAxis('y')); @@ -377,20 +367,20 @@ define(function(require) { } }); - if (animation) { + if (hasAnimation) { clipPath.shape[cartesian.getBaseAxis().isHorizontal() ? 'width' : 'height'] = 0; - clipPath.animateTo({ + api.initGraphicEl(clipPath, { shape: { width: xExtent[1] - xExtent[0], height: yExtent[1] - yExtent[0] } - }, 1000); + }); } return clipPath; }, - _createPolarClipShape: function (polar, animation) { + _createPolarClipShape: function (polar, hasAnimation, api) { var angleAxis = polar.getAngleAxis(); var radiusAxis = polar.getRadiusAxis(); @@ -411,13 +401,13 @@ define(function(require) { } }); - if (animation) { + if (hasAnimation) { clipPath.shape.endAngle = -angleExtent[0] * RADIAN; - clipPath.animateTo({ + api.initGraphicEl(clipPath, { shape: { endAngle: -angleExtent[1] * RADIAN } - }, 1500, animation); + }); } return clipPath; @@ -425,8 +415,7 @@ define(function(require) { remove: function (ecModel, api) { var group = this.group; - group.remove(this._polyline); - group.remove(this._polygon); + group.remove(this._lineGroup); this._symbolDraw.remove(api, true); } }); diff --git a/src/data/List.js b/src/data/List.js index cf7fa25ee0617a546b7e4bd71d544fc3f59a3cd8..57bad8d1b5a1782ffccc90443d7568bf3b99a50d 100644 --- a/src/data/List.js +++ b/src/data/List.js @@ -374,7 +374,9 @@ define(function (require) { */ listProto.getDataExtent = function (dim, stack) { var dimData = this._storage[dim]; - var dimExtent = (this._extent || (this._extent = {}))[dim + stack]; + var dimInfo = this.getDimensionInfo(dim); + stack = (dimInfo && dimInfo.stackable) && stack; + var dimExtent = (this._extent || (this._extent = {}))[dim + (!!stack)]; var value; if (dimExtent) { return dimExtent; @@ -569,7 +571,6 @@ define(function (require) { for (var i = 0; i < indices.length; i++) { if (dimSize === 0) { - // FIXME Pass value as parameter ? cb.call(context, i); } // Simple optimization