Fix remove of bar and candlestick.

apache · Apr 18, 2018 · 5f156ad · 5f156ad
1 parent faa78f7
commit 5f156ad
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 32 deletions.
diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js
@@ -152,17 +152,15 @@ export default echarts.extendChartView({
     _clear: function (ecModel) {
         var group = this.group;
         var data = this._data;
-        if (ecModel && ecModel.get('animation')) {
-            if (data) {
-                data.eachItemGraphicEl(function (el) {
-                    if (el.type === 'sector') {
-                        removeSector(el.dataIndex, ecModel, el);
-                    }
-                    else {
-                        removeRect(el.dataIndex, ecModel, el);
-                    }
-                });
-            }
+        if (ecModel && ecModel.get('animation') && data && !this._isLargeDraw) {
+            data.eachItemGraphicEl(function (el) {
+                if (el.type === 'sector') {
+                    removeSector(el.dataIndex, ecModel, el);
+                }
+                else {
+                    removeRect(el.dataIndex, ecModel, el);
+                }
+            });
         }
         else {
             group.removeAll();

diff --git a/src/chart/candlestick/CandlestickView.js b/src/chart/candlestick/CandlestickView.js
@@ -39,11 +39,6 @@ var CandlestickView = ChartView.extend({
         }
     },
 
-    _clear: function () {
-        this.group.removeAll();
-        this._data = null;
-    },
-
     _renderNormal: function (seriesModel) {
         var data = seriesModel.getData();
         var oldData = this._data;
@@ -129,12 +124,12 @@ var CandlestickView = ChartView.extend({
     },
 
     remove: function (ecModel) {
-        var group = this.group;
-        var data = this._data;
+        this._clear();
+    },
+
+    _clear: function () {
+        this.group.removeAll();
         this._data = null;
-        data && data.eachItemGraphicEl(function (el) {
-            el && group.remove(el);
-        });
     },
 
     dispose: zrUtil.noop

diff --git a/test/-cases.js b/test/-cases.js
@@ -41,6 +41,7 @@
             'scatter-gps.html',
             'scatter-weibo.html',
             'bar-stream-large.html',
+            'bar-stream-large1.html',
             'candlestick-large1.html',
             'lines-flight.html',
             'lines-stream-large.html',

diff --git a/test/bar-stream-large.html b/test/bar-stream-large.html
@@ -10,13 +10,15 @@
     </head>
     <body>
         <style>
-            html, body, #main0 {
-                width: 100%;
-                height: 100%;
-                margin: 0;
+            #snapshot {
+                width: 150;
+                height: 100;
+                background: #fff;
+                border: 5px solid rgba(0,0,0,0.5);
             }
         </style>
         <div id='main0'></div>
+        <img id="snapshot"/>
         <script>
 
         require(['echarts'], function (echarts) {
@@ -61,7 +63,7 @@
                     '(1) Check all bars rendered (full of xAxis)',
                     '(2) And check roam.',
                     '(3) Check click legend',
-                    '(4) "finished" should be printed on console'
+                    '(4) Check snapshot rendering when "finished"'
                 ],
                 option: option,
                 info: {
@@ -71,7 +73,9 @@
             });
 
             chart.on('finished', function () {
-                console.log('finished');
+                var url = chart.getDataURL();
+                var snapshotEl = document.getElementById('snapshot');
+                snapshotEl.src = url;
             });
 
         });

diff --git a/test/bar-large1.html → test/bar-stream-large1.html b/test/bar-large1.html → test/bar-stream-large1.html
@@ -15,9 +15,18 @@
                 background: #146402;
                 color: #fff;
             }
+
+            #snapshot {
+                width: 150;
+                height: 100;
+                background: #fff;
+                border: 5px solid rgba(0,0,0,0.5);
+            }
+
         </style>
 
         <div id="main0"></div>
+        <img id="snapshot"/>
 
         <script>
 
@@ -79,12 +88,8 @@
                         }
                     },
                     dataZoom: [{
-                        // startValue: 48,
-                        // endValue: 99,
                         type: 'inside'
                     }, {
-                        // startValue: 48,
-                        // endValue: 99,
                         type: 'slider'
                     }],
                     xAxis: {
@@ -122,10 +127,21 @@
                     }]
                 };
 
-                testHelper.create(echarts, 'main0', {
+                var chart = testHelper.create(echarts, 'main0', {
+                    title: [
+                        '(1) Check legend click',
+                        '(2) Check `progressiveChunkMode: "mod"` render correct',
+                        '(3) Check snapshot rendering when "finished"'
+                    ],
                     option: option
                 });
 
+                chart.on('finished', function () {
+                    var url = chart.getDataURL();
+                    var snapshotEl = document.getElementById('snapshot');
+                    snapshotEl.src = url;
+                });
+
             });
         </script>
     </body>