[GitHub] [echarts] Ovilia opened a new issue #15627: feat(transition): fade in labels after shape transformed

[GitBox <gi...@apache.org>]

Ovilia opened a new issue #15627:
URL: https://github.com/apache/echarts/issues/15627


   ### 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.
   
   ![bar-pie](https://user-images.githubusercontent.com/779050/131294946-62f1ff0d-8523-4537-9c90-491b1cb1b24d.gif)
   
   
   ```js
   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.
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org