Merge pull request #13443 from susiwen8/legend-scroll

Fix(legend.scroll): scroll animation start position was incorrect

src/component/legend/ScrollableLegendView.ts

@@ -205,7 +205,7 @@ class ScrollableLegendView extends LegendView {
         selector && (processMaxSize[wh] = maxSize[wh] - selectorRect[wh] - selectorButtonGap);
 
         const mainRect = this._layoutContentAndController(legendModel, isFirstRender,
-            processMaxSize, orientIdx, wh, hw, yx
+            processMaxSize, orientIdx, wh, hw, yx, xy
         );
 
         if (selector) {
@@ -238,7 +238,8 @@ class ScrollableLegendView extends LegendView {
         orientIdx: 0 | 1,
         wh: 'width' | 'height',
         hw: 'width' | 'height',
-        yx: 'x' | 'y'
+        yx: 'x' | 'y',
+        xy: 'y' | 'x'
     ) {
         const contentGroup = this.getContentGroup();
         const containerGroup = this._containerGroup;
@@ -264,12 +265,13 @@ class ScrollableLegendView extends LegendView {
         const controllerRect = controllerGroup.getBoundingRect();
         const showController = this._showController = contentRect[wh] > maxSize[wh];
 
+        // In case that the inner elements of contentGroup layout do not based on [0, 0]
         const contentPos = [-contentRect.x, -contentRect.y];
         // Remain contentPos when scroll animation perfroming.
         // If first rendering, `contentGroup.position` is [0, 0], which
         // does not make sense and may cause unexepcted animation if adopted.
         if (!isFirstRender) {
-            contentPos[orientIdx] = contentGroup[yx];
+            contentPos[orientIdx] = contentGroup[xy];
         }
 
         // Layout container group based on 0.

test/legend-scroll2plain.html

@@ -40,6 +40,7 @@ under the License.
 
 
     <div id="main0"></div>
+    <div id="main1"></div>
 
 
 
@@ -134,11 +135,92 @@ under the License.
                 // buttons: [{text: 'btn-txt', onclick: function () {}}],
                 // recordCanvas: true,
             });
-
+            
             setTimeout(function () {
                 option.legend.type = 'plain';
                 chart.setOption(option);
             }, 3000);
+
+            var option1 = {
+                legend: {
+                    data: [
+                        '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎',
+                        '邮件营销1', '联盟广告1', '视频广告1', '直接访问1', '搜索引擎1'
+                    ],
+                    type: 'scroll'
+                },
+                xAxis: [{
+                    type: 'category',
+                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+                }],
+                yAxis: [{
+                    type: 'value'
+                }],
+                series: [
+                    {
+                        name: '邮件营销',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    },
+                    {
+                        name: '联盟广告',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    },
+                    {
+                        name: '视频广告',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    },
+                    {
+                        name: '直接访问',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    },
+                    {
+                        name: '搜索引擎',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    },
+                    {
+                        name: '邮件营销1',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    },
+                    {
+                        name: '联盟广告1',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    },
+                    {
+                        name: '视频广告1',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    },
+                    {
+                        name: '直接访问1',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    },
+                    {
+                        name: '搜索引擎1',
+                        type: 'line',
+                        data: [null, null, null, null, null, null, null]
+                    }
+                ]
+                
+            };
+            var chart1 = testHelper.create(echarts, 'main1', {
+                title: [
+                    'Test Case Description of main1',
+                    'Legend scroll animation'
+                ],
+                option: option1,
+                width: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+            chart1.setOption(option1);
         });
     </script>