Add progressive rendering for large chart. Add animationThreshold

src/chart/heatmap/HeatmapSeries.js

@@ -23,6 +23,8 @@ define(function (require) {
             xAxisIndex: 0,
             yAxisIndex: 0,
 
+            progressive: 500,
+
             // Geo coordinate system
             geoIndex: 0,
 

src/chart/helper/Symbol.js

@@ -195,7 +195,7 @@ define(function (require) {
             dataType === 'ordinal' || dataType === 'time'
         )) {} // jshint ignore:line
 
-        if (valueDim != null && labelModel.get('show')) {
+        if (valueDim != null && labelModel.getShallow('show')) {
             graphic.setText(elStyle, labelModel, color);
             elStyle.text = zrUtil.retrieve(
                 seriesModel.getFormattedLabel(idx, 'normal'),
@@ -226,7 +226,7 @@ define(function (require) {
 
         graphic.setHoverStyle(symbolPath, hoverStyle);
 
-        if (itemModel.getShallow('hoverAnimation')) {
+        if (itemModel.getShallow('hoverAnimation') && seriesModel.ifEnableAnimation()) {
             var onEmphasis = function() {
                 var ratio = size[1] / size[0];
                 this.animateTo({

src/chart/scatter/ScatterSeries.js

@@ -41,6 +41,8 @@ define(function (require) {
             // Available when large is true
             largeThreshold: 2000,
 
+            progressive: 500,
+
             // label: {
                 // normal: {
                     // show: false

src/echarts.js

@@ -817,6 +817,24 @@ define(function (require) {
             chartView.group.silent = !!seriesModel.get('silent');
 
             updateZ(seriesModel, chartView);
+
+            // Progressive configuration
+            var data = seriesModel.getData();
+            var elCount = 0;
+            // FIXME edge data ?
+            var frameCount = +seriesModel.get('progressive');
+            var needProgressive = data.count() > seriesModel.get('progressiveThreshold') && frameCount;
+            if (needProgressive) {
+                chartView.group.traverse(function (el) {
+                    if (el.type !== 'group') {
+                        el.progressive = needProgressive ?
+                            Math.floor(elCount++ / frameCount) : -1;
+                        if (needProgressive) {
+                            el.stopAnimation(true);
+                        }
+                    }
+                });
+            }
         }, this);
 
         // Remove groups of unrendered charts
@@ -904,8 +922,10 @@ define(function (require) {
         var zlevel = model.get('zlevel');
         // Set z and zlevel
         view.group.traverse(function (el) {
-            z != null && (el.z = z);
-            zlevel != null && (el.zlevel = zlevel);
+            if (el.type !== 'group') {
+                z != null && (el.z = z);
+                zlevel != null && (el.zlevel = zlevel);
+            }
         });
     }
     /**

src/model/Series.js

@@ -202,6 +202,19 @@ define(function(require) {
                 : (colorEl + encodeHTML(this.name) + ' : ' + formattedValue);
         },
 
+        /**
+         * @return {boolean}
+         */
+        ifEnableAnimation: function () {
+            var animationEnabled = this.getShallow('animation');
+            if (animationEnabled) {
+                if (this.getData().count() > this.getShallow('animationThreshold')) {
+                    animationEnabled = false;
+                }
+            }
+            return animationEnabled;
+        },
+
         restoreData: function () {
             this._data = this._dataBeforeProcessed.cloneShallow();
         },

src/model/globalDefault.js

@@ -29,16 +29,15 @@ define(function () {
             fontStyle: 'normal',
             fontWeight: 'normal'
         },
-        // 主题，默认标志图形类型列表
-        // symbolList: [
-        //     'circle', 'rectangle', 'triangle', 'diamond',
-        //     'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
-        // ],
-        animation: true,                // 过渡动画是否开启
-        animationThreshold: 2000,       // 动画元素阀值，产生的图形原素超过2000不出动画
-        animationDuration: 1000,        // 过渡动画参数：进入
-        animationDurationUpdate: 300,   // 过渡动画参数：更新
-        animationEasing: 'exponentialOut',    //BounceOut
-        animationEasingUpdate: 'cubicOut'
+        animation: true,
+        animationThreshold: 2000,
+        animationDuration: 1000,
+        animationDurationUpdate: 300,
+        animationEasing: 'exponentialOut',
+        animationEasingUpdate: 'cubicOut',
+
+        // Progressive configuration
+        progressiveThreshold: 2000,
+        progressive: 100
     };
 });
\ No newline at end of file

src/util/graphic.js

@@ -376,6 +376,9 @@ define(function(require) {
             cb = dataIndex;
             dataIndex = null;
         }
+        var animationEnabled = animatableModel
+            && animatableModel.ifEnableAnimation
+            && animatableModel.ifEnableAnimation();
 
         var postfix = isUpdate ? 'Update' : '';
         var duration = animatableModel
@@ -388,7 +391,7 @@ define(function(require) {
             animationDelay = animationDelay(dataIndex);
         }
 
-        animatableModel && animatableModel.getShallow('animation')
+        animationEnabled && duration > 0
             ? el.animateTo(props, duration, animationDelay || 0, animationEasing, cb)
             : (el.attr(props), cb && cb());
     }

src/visual/symbol.js

@@ -27,8 +27,8 @@ define(function (require) {
                 }
                 data.each(function (idx) {
                     var itemModel = data.getItemModel(idx);
-                    var itemSymbolType = itemModel.get('symbol', true);
-                    var itemSymbolSize = itemModel.get('symbolSize', true);
+                    var itemSymbolType = itemModel.getShallow('symbol', true);
+                    var itemSymbolSize = itemModel.getShallow('symbolSize', true);
                     // If has item symbol
                     if (itemSymbolType != null) {
                         data.setItemVisual(idx, 'symbol', itemSymbolType);