feat: Pie expansion animation behavior

[MohammadYounes]

Version

4.2.1

Steps to reproduce

When loading Pie series along with data, the expansion animation is continues,

Code Sample:

var data = [
    {"name":"A1B·1","value":92386},
    {"name":"BB1·","value":90611},
    {"name":"1BB","value":12596},
    {"name":"2BA·1","value":9438},
    {"name":"1BA","value":10049}
]
    
option = {
    series : [
        {
            type: 'pie',
            animationType:'expansion',
            animationDuration:5000,
            startAngle:0,
            endAngle:360,
            radius : ['50%','80%'],
            center: ['40%', '50%'],
            data: data // set along with series
        }
    ]
};

But when setting the data while the series has already been added, the expansion animation becomes discrete (per pie piece).

Code Sample:

var data = [
    {"name":"A1B·1","value":92386},
    {"name":"BB1·","value":90611},
    {"name":"1BB","value":12596},
    {"name":"2BA·1","value":9438},
    {"name":"1BA","value":10049}
]
    
option = {
    series : [
        {
            type: 'pie',
            animationType:'expansion',
            animationDuration:5000,
            animationDurationUpdate:5000,
            startAngle:0,
            endAngle:360,
            radius : ['50%','80%'],
            center: ['40%', '50%']
        }
    ]
};

//set after rendering
setTimeout(function() {
   myChart.setOption({
       series:[
           {
            data: data
           }
        ]
   })
}, 500);

Is there away to force continues animation even if data is added later?

What is expected?

Continues Pie Chart Animation

What is actually happening?

Discrete Pie Chart Animation

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵

[pissang]

It's the difference between entry animation and transition animation.

• The first one is entry animation, it is used when series is first created.

• The second one is transition animation, it is used when series already exists but the data is changed.

I suggest you only set series when data is ready.

[MohammadYounes]

@pissang I understand. However, This is a simulation of the issue. In my case I want to replace the whole data and the discrete animation looks odd. Is there a way to force the entry animation without recreating the whole series ?

[pissang]

@MohammadYounes Sorry, currently the only way to use the first animation type is creating a new series like following

// Every time data want to be replaced.
myChart.setOption({
    series: {
            // Use a different id to make sure this series is new created.
            id: Date.now(),
            // New data
            data: ...,

            // Other configs.
            type: 'pie',
            animationType:'expansion',
            animationDuration:5000,
            animationDurationUpdate:5000,
            startAngle:0,
            endAngle:360,
            radius : ['50%','80%'],
            center: ['40%', '50%']
     }
// Second parameter of setOption should be set true so option will not be merged with previous
}, true);

But it's a good idea to add a new config to specify the animation type.