feat(transition): delay fading in labels until shapes are transformed #15627
Description
Version
5.2.0
Steps to reproduce
#15208 introduced trasition animation between different series, which is a very cool feature but since we don't have data label transitions, it may seem a little too conspicuous for the labels to be displayed at the start of the transition.
So, it the transition between the data labels are too hard to implement, we should at least provide a method (whether by default or not) to delay the fading in of labels (and optionally the labelLines for pie charts) after the translation.
The following code shows the translation between a pie chart and a bar chart.
var pieOption = {
series: [
{
id: 'a',
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
formatter: 'Label {b}'
},
labelLine: {
show: true
},
data: [
{value: 1048, name: 'a'},
{value: 735, name: 'b'},
{value: 580, name: 'c'},
{value: 484, name: 'd'},
{value: 300, name: 'e', groupId: 'e'}
],
universalTransition: {
enabled: true,
divideShape: 'clone'
},
animationDuration: 2000,
animationDurationUpdate: 2000
}
]
};
var barOption = {
yAxis: {
type: 'category',
data: ['a', 'b', 'c', 'd', 'e1', 'e2', 'e3'],
inverse: true
},
xAxis: {
type: 'value'
},
series: [{
id: 'a',
data: [
{value: 1048},
{value: 735},
{value: 580},
{value: 484},
{value: 100, groupId: 'e'},
{value: 120, groupId: 'e'},
{value: 20, groupId: 'e'}
],
label: {
show: true,
position: 'insideLeft'
},
type: 'bar',
colorBy: 'data',
universalTransition: {
enabled: true,
divideShape: 'clone'
},
animationDuration: 2000,
animationDurationUpdate: 2000
}]
};
let option = pieOption;
chart.setOption(option);
setInterval(function() {
option = option === pieOption ? barOption : pieOption;
chart.setOption(option, true);
}, 3000);What is expected?
Final labels are not expected to be displayed at the start of the translation.
What is actually happening?
Labels are displayed at the final positions.