Animate stacked bars in Bar Series from the 'bottom'

[Enigmatrix]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Fixes gaps in animation in stacked bar charts. Works irregardless of horizontal/vertical cartesian axis, inverse axis.

Fixed issues

Fixes #19095

Details

Before: What was the problem?

Stacked bar chart animations are strange in ECharts since only the value axis value (height for horizontal base axis, else width) is animated for Cartesian2D. So the animations have a weird effect where the stacked bars are hovering in the air with gaps before the animation completes.

before.mp4

After: How does it behave after the fixing?

after.mp4

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

• Please squash the commits into a single one when merging.

Other information

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

[github-actions]

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20862@26faaa4

[Copilot]

Pull Request Overview

This PR fixes a bug with stacked bar chart animations by ensuring that bars animate from the bottom of the value axis regardless of the Cartesian2D axis configuration.

• Introduces a check for whether the series is stacked and adjusts the animated property accordingly.
• Sets the initial coordinate for stacked bars to the lower bound of the related axis.

Comments suppressed due to low confidence (1)

src/chart/bar/BarView.ts:790

• Consider adding tests to verify the animation behavior for stacked bars, especially in scenarios involving inverse axes.

            if (isStacked) {

[Copilot]

[nitpick] Replace 'irregardless' with 'regardless' for clarity and formal tone.

Suggested change

	// 'bottom' of the value axis, irregardless of 'inverse'
	// 'bottom' of the value axis, regardless of 'inverse'

[Enigmatrix]

fixed in 444c75d

[Ovilia]

This is a nice feature to have! Thanks for your contribution.

Please add test cases for this PR and it would be nice if polar bars can also support this feature.

[Ovilia]

extent[0] is the minimum value of the axis, which may not be expected to be the starting point of bar growing in the case with negative axes. Consider using startValue instead. Make sure you test the cases in varied value ranges.

[Enigmatrix]

yep seems like you are correct, for test/bar-stack.html I edited the yAxis to have a startValue: -30 and min: -100 and it animates from the bottom (first 2s):

nani.mp4

The other half of the video describes a bug (not sure): the right most bar stack in that video isn't placed correctly (not respecting startValue). And by toggling the 'bottom'-most series of the stacked bar chart, the problem fixes itself. I can raise this in a issue if this is confirmed to be a bug.

I'll fix the startValue issue in a bit;

[Enigmatrix]

fixed in 444c75d - but will add tests in another commit

[Ovilia]

!= null should be better.

[Enigmatrix]

fixed in 444c75d

[Enigmatrix]

Hmm, might need some help with this PR. Seems like Series add (e.g. toggling from chart legend) triggers the animation, which makes it look very awkward. But currently there is no way to differentiate this from the initial renders' Series add

[Ovilia]

Hmm, might need some help with this PR. Seems like Series add (e.g. toggling from chart legend) triggers the animation, which makes it look very awkward. But currently there is no way to differentiate this from the initial renders' Series add

Yes, the problem happens if we create 3 series ABC and hide the middle one B and then show it from legend.

option = {
    animationDuration: 800,
    legend: {
        show: true
    },
    xAxis: {
        type: 'category',
    },
    grid: {
        left: 100,
        right: 100,
        bottom: 100,
        top: 100,
    },
    yAxis: {},
    series: [{
        name: 'A',
        type: 'bar',
        stack: 'a',
        data: [3, 4, 5, 6]
    }, {
        name: 'B',
        type: 'bar',
        stack: 'a',
        data: [1, 2, 4, 3]
    }, {
        name: 'C',
        type: 'bar',
        stack: 'a',
        data: [1, 2, 4, 3]
    }]
};

I don't think is an issue related to legend logic. What happens when we click the legend item to show B is that, series A and C calls data.update logic and use updateStyle to do animation while series B calls data.add logic and goes to the logic of animating from axis start position (instead of last position of the element).

So I guess when in data.add, you need to check if the element exists with oldData.getItemGraphicEl(dataIndex). If not, use the current logic you wrote just now. If it exists, call updateStyle similar to data.update.

But I'm not sure if this should work. Be careful to have a complete visual test with Bar series, taking special care for bar-race situations. And I should also think about whether this change may break other cases or bring performance issues. Let's see later after you come up with more ideas.