Fix remove of bar and candlestick.

5f156ad4 · sushuang · faa78f73 · 5f156ad4 · 5f156ad4 · 5f156ad4
5 changed file
--- 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();

--- 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

--- 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',

--- 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;
            });

        });

--- a/test/bar-large1.html
+++ b/test/bar-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>