diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index a34cc153a0..c7c65225a9 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -783,9 +783,28 @@ const elementCreator: { rect.name = 'item'; if (animationModel) { + const isStacked = seriesModel.get('stack') != null; const rectShape = rect.shape; const animateProperty = isHorizontal ? 'height' : 'width' as 'width' | 'height'; rectShape[animateProperty] = 0; + if (isStacked) { + // if it's stacked, the bar will be animated from the + // 'bottom' of the value axis, regardless of 'inverse' + const stackAnimateProperty = isHorizontal ? 'y' : 'x' as 'y' | 'x'; + const itemLayout = data.getItemLayout(newIndex); + // valueAxisStart is unset only when `large` is true, + // in which case this branch is not taken + const valueAxisStart = itemLayout.valueAxisStart; + + // make sure we don't go beyond the grid + const coordSys = (seriesModel.coordinateSystem as Cartesian2D); + const valueAxis = coordSys.getOtherAxis(coordSys.getBaseAxis()); + const extentStart = valueAxis.getGlobalExtent()[0]; + // compare with extentStart in the same direction as the stackAnimateProperty + const cmpFn = (valueAxis.inverse === isHorizontal) ? mathMax : mathMin; + + rectShape[stackAnimateProperty] = cmpFn(valueAxisStart, extentStart); + } } return rect; }, diff --git a/src/layout/barGrid.ts b/src/layout/barGrid.ts index 3f6aeb4fb6..b478b487bd 100644 --- a/src/layout/barGrid.ts +++ b/src/layout/barGrid.ts @@ -559,7 +559,7 @@ export function createProgressiveLayout(seriesType: string): StageHandler { } if (!isLarge) { - data.setItemLayout(dataIndex, { x, y, width, height }); + data.setItemLayout(dataIndex, { x, y, width, height, valueAxisStart }); } else { largePoints[idxOffset] = x; diff --git a/test/bar-cartesian-stack-anim.html b/test/bar-cartesian-stack-anim.html new file mode 100644 index 0000000000..c512cd8cfc --- /dev/null +++ b/test/bar-cartesian-stack-anim.html @@ -0,0 +1,457 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +