stream try

src/chart/parallel.js

@@ -7,6 +7,6 @@ define(function (require) {
     require('./parallel/ParallelSeries');
     require('./parallel/ParallelView');
 
-    echarts.registerVisualCoding('chart', require('./parallel/parallelVisual'));
+    require('./parallel/parallelVisual');
 
 });
\ No newline at end of file

src/chart/parallel/ParallelView.js

@@ -30,24 +30,20 @@ define(function (require) {
          * @override
          */
         render: function (seriesModel, ecModel, api, payload) {
-            this[
-                seriesModel.option.progressive
-                    ? '_renderForProgressive'
-                    : '_renderForNormal'
-            ](seriesModel);
-        },
-
-        /**
-         * @private
-         */
-        _renderForNormal: function (seriesModel) {
             var dataGroup = this._dataGroup;
+
+            var thisProgressive = seriesModel.getProgressive();
+            if (thisProgressive) {
+                this._data = null;
+                dataGroup.removeAll();
+                return;
+            }
+
             var data = seriesModel.getData();
             var oldData = this._data;
             var coordSys = seriesModel.coordinateSystem;
             var dimensions = coordSys.dimensions;
-            var option = seriesModel.option;
-            var smooth = option.smooth ? SMOOTH : null;
+            var smooth = seriesModel.option.smooth ? SMOOTH : null;
 
             // Consider switch between progressive and not.
             !oldData && dataGroup.removeAll();
@@ -59,7 +55,9 @@ define(function (require) {
                 .execute();
 
             // Update style
-            updateElStyle(data);
+            data.eachItemGraphicEl(function (line, dataIndex) {
+                updateElStyle(data, line, dataIndex);
+            });
 
             // First create
             if (!this._data) {
@@ -94,33 +92,28 @@ define(function (require) {
         },
 
         /**
-         * @private
+         * @override
          */
-        _renderForProgressive: function (seriesModel) {
+        updateProgressive: function (seriesModel, ecModel, api) {
             var dataGroup = this._dataGroup;
             var data = seriesModel.getData();
             var coordSys = seriesModel.coordinateSystem;
             var dimensions = coordSys.dimensions;
             var option = seriesModel.option;
-            var progressive = option.progressive;
             var smooth = option.smooth ? SMOOTH : null;
+            var thisProgressive = seriesModel.getProgressive();
 
             // In progressive animation is disabled, so data diff,
             // which effects performance, is not needed.
-            dataGroup.removeAll();
-            data.each(function (dataIndex) {
+            for (var i = thisProgressive.thisDataIndex; i < thisProgressive.nextDataIndex; i++) {
                 // FIXME
-                // 重复代码 ???????????????????
-                var points = createLinePoints(data, dataIndex, dimensions, coordSys);
-                var line = createPoly(points, dataIndex, progressive, smooth);
+                // 重复代码 TBD_PROGRESSIVE
+                var points = createLinePoints(data, i, dimensions, coordSys);
+                var line = createPoly(points, i, thisProgressive, smooth);
                 dataGroup.add(line);
-                data.setItemGraphicEl(dataIndex, line);
-            });
-
-            updateElStyle(data);
-
-            // Consider switch between progressive and not.
-            this._data = null;
+                data.setItemGraphicEl(i, line);
+                updateElStyle(data, line, i);
+            }
         },
 
         /**
@@ -154,16 +147,22 @@ define(function (require) {
         return rectEl;
     }
 
-    function createPoly(points, dataIndex, progressive, smooth) {
-        return new polyHelper.Polyline({
+    function createPoly(points, dataIndex, thisProgressive, smooth) {
+        var line = new polyHelper.Polyline({
             shape: {
                 points: points,
                 smooth: smooth
             },
             silent: true,
-            progressive: progressive ? Math.round(dataIndex / progressive) : -1,
             z2: 10
         });
+
+        if (thisProgressive) {
+            line.progressiveFrame = thisProgressive.frame;
+            line.progressiveKey = thisProgressive.key;
+        }
+
+        return line;
     }
 
     function createLinePoints(data, dataIndex, dimensions, coordSys) {
@@ -177,20 +176,18 @@ define(function (require) {
         return points;
     }
 
-    function updateElStyle(data) {
-        data.eachItemGraphicEl(function (line, idx) {
-            var itemModel = data.getItemModel(idx);
-            var lineStyleModel = itemModel.getModel('lineStyle.normal');
-
-            line.useStyle(zrUtil.extend(
-                lineStyleModel.getLineStyle(),
-                {
-                    fill: null,
-                    stroke: data.getItemVisual(idx, 'color'),
-                    opacity: data.getItemVisual(idx, 'opacity')
-                }
-            ));
-        });
+    function updateElStyle(data, line, dataIndex) {
+        var itemModel = data.getItemModel(dataIndex);
+        var lineStyleModel = itemModel.getModel('lineStyle.normal');
+
+        line.useStyle(zrUtil.extend(
+            lineStyleModel.getLineStyle(),
+            {
+                fill: null,
+                stroke: data.getItemVisual(dataIndex, 'color'),
+                opacity: data.getItemVisual(dataIndex, 'opacity')
+            }
+        ));
     }
 
     // FIXME

src/chart/parallel/parallelVisual.js

 define(function (require) {
 
-    /**
-     * @payload
-     * @property {string} parallelAxisId
-     * @property {Array.<number>} extent
-     */
-    return function (ecModel, payload) {
+    var echarts = require('../../echarts');
 
+    echarts.registerVisualCoding('chart', function (ecModel, payload) {
         ecModel.eachSeriesByType('parallel', function (seriesModel) {
+            visualCoding(seriesModel, ecModel);
+        });
+    });
+
+    echarts.registerVisualCodingProgressive('chart', 'series.parallel', visualCoding);
+
 
-            var itemStyleModel = seriesModel.getModel('itemStyle.normal');
-            var globalColors = ecModel.get('color');
+    function visualCoding(seriesModel, ecModel) {
+        var itemStyleModel = seriesModel.getModel('itemStyle.normal');
+        var globalColors = ecModel.get('color');
 
-            var color = itemStyleModel.get('color')
-                || globalColors[seriesModel.seriesIndex % globalColors.length];
-            var inactiveOpacity = seriesModel.get('inactiveOpacity');
-            var activeOpacity = seriesModel.get('activeOpacity');
-            var lineStyle = seriesModel.getModel('lineStyle.normal').getLineStyle();
+        var color = itemStyleModel.get('color')
+            || globalColors[seriesModel.seriesIndex % globalColors.length];
+        var inactiveOpacity = seriesModel.get('inactiveOpacity');
+        var activeOpacity = seriesModel.get('activeOpacity');
+        var lineStyle = seriesModel.getModel('lineStyle.normal').getLineStyle();
 
-            var coordSys = seriesModel.coordinateSystem;
-            var data = seriesModel.getData();
+        var coordSys = seriesModel.coordinateSystem;
+        var data = seriesModel.getData();
 
-            var opacityMap = {
-                normal: lineStyle.opacity,
-                active: activeOpacity,
-                inactive: inactiveOpacity
-            };
+        var opacityMap = {
+            normal: lineStyle.opacity,
+            active: activeOpacity,
+            inactive: inactiveOpacity
+        };
 
-            coordSys.eachActiveState(data, function (activeState, dataIndex) {
-                data.setItemVisual(dataIndex, 'opacity', opacityMap[activeState]);
-            });
+        // If progressive not set, not progressive and render full data normally.
+        var thisProgressive = seriesModel.getProgressive();
+        var page = thisProgressive == null
+            ? null
+            : [thisProgressive.thisDataIndex, thisProgressive.nextDataIndex];
 
-            data.setVisual('color', color);
+        coordSys.eachActiveState(data, page, function (activeState, dataIndex) {
+            data.setItemVisual(dataIndex, 'opacity', opacityMap[activeState]);
         });
-    };
+
+        data.setVisual('color', color);
+    }
+
 });
\ No newline at end of file

src/component/visualMap/visualCoding.js

@@ -8,12 +8,22 @@ define(function (require) {
     var zrUtil = require('zrender/core/util');
 
     echarts.registerVisualCoding('component', function (ecModel) {
+        travelVisualMaps(ecModel);
+    });
+
+    echarts.registerVisualCodingProgressive(
+        'chart', 'series.parallel', function (seriesModel, ecModel) {
+            travelVisualMaps(ecModel, seriesModel);
+        }
+    );
+
+    function travelVisualMaps(ecModel, targetSeriesModel) {
         ecModel.eachComponent('visualMap', function (visualMapModel) {
             processSingleVisualMap(visualMapModel, ecModel);
         });
-    });
+    }
 
-    function processSingleVisualMap(visualMapModel, ecModel) {
+    function processSingleVisualMap(visualMapModel, ecModel, targetSeriesModel) {
         var visualMappings = visualMapModel.targetVisuals;
         var visualTypesMap = {};
         zrUtil.each(['inRange', 'outOfRange'], function (state) {
@@ -22,8 +32,12 @@ define(function (require) {
         });
 
         visualMapModel.eachTargetSeries(function (seriesModel) {
+            if (targetSeriesModel && seriesModel !== targetSeriesModel) {
+                return;
+            }
+
             var data = seriesModel.getData();
-            var dimension = visualMapModel.getDataDimension(data);
+            var dimension = data.getDimension(visualMapModel.getDataDimension(data));
             var dataIndex;
 
             function getVisual(key) {
@@ -34,9 +48,14 @@ define(function (require) {
                 data.setItemVisual(dataIndex, key, value);
             }
 
-            data.each([dimension], function (value, index) {
+            var thisProgressive = seriesModel.getProgressive();
+            var seg = thisProgressive
+                ? [thisProgressive.thisDataIndex, thisProgressive.nextDataIndex]
+                : [0, data.count()];
+
+            for (dataIndex = seg[0]; dataIndex < seg[1]; dataIndex++) {
                 // For performance consideration, do not use curry.
-                dataIndex = index;
+                var value = data.get(dimension, dataIndex);
                 var valueState = visualMapModel.getValueState(value);
                 var mappings = visualMappings[valueState];
                 var visualTypes = visualTypesMap[valueState];
@@ -44,7 +63,7 @@ define(function (require) {
                     var type = visualTypes[i];
                     mappings[type] && mappings[type].applyVisual(value, getVisual, setVisual);
                 }
-            }, true);
+            }
         });
     }
 

src/coord/parallel/Parallel.js

@@ -234,11 +234,19 @@ define(function(require) {
 
         /**
          * @param {module:echarts/data/List} data
-         * @param {Functio} cb param: {string} activeState 'active' or 'inactive' or 'normal'
+         * @param {Array} [page] [thisDataIndex, nextDataIndex] If null or not pass, set to be [0, data.count].
+         * @param {Function} callback param: {string} activeState 'active' or 'inactive' or 'normal'
          *                            {number} dataIndex
          * @param {Object} context
          */
-        eachActiveState: function (data, callback, context) {
+        eachActiveState: function (data, page, callback, context) {
+            if (zrUtil.isFunction(page)) {
+                context = callback;
+                callback = page;
+                page = null;
+            }
+            page = page || [0, data.count()];
+
             var dimensions = this.dimensions;
             var axesMap = this._axesMap;
             var hasActiveSet = false;
@@ -249,7 +257,7 @@ define(function(require) {
                 }
             }
 
-            for (var i = 0, len = data.count(); i < len; i++) {
+            for (var i = page[0], len = Math.min(page[1], data.count()); i < len; i++) {
                 var values = data.getValues(dimensions, i);
                 var activeState;
 

src/echarts.js

@@ -379,6 +379,8 @@ define(function (require) {
 
             coordSysMgr.update(ecModel, api);
 
+            checkProgressive.call(this, ecModel);
+
             doLayout.call(this, ecModel, payload);
 
             doVisualCoding.call(this, ecModel, payload);
@@ -424,6 +426,8 @@ define(function (require) {
                 return;
             }
 
+            checkProgressive.call(this, ecModel);
+
             doLayout.call(this, ecModel, payload);
 
             doVisualCoding.call(this, ecModel, payload);
@@ -443,6 +447,8 @@ define(function (require) {
                 return;
             }
 
+            checkProgressive.call(this, ecModel);
+
             doVisualCoding.call(this, ecModel, payload);
 
             invokeUpdateMethod.call(this, 'updateVisual', ecModel, payload);
@@ -460,6 +466,8 @@ define(function (require) {
                 return;
             }
 
+            checkProgressive.call(this, ecModel);
+
             doLayout.call(this, ecModel, payload);
 
             invokeUpdateMethod.call(this, 'updateLayout', ecModel, payload);
@@ -827,6 +835,100 @@ define(function (require) {
         }, this);
     }
 
+    // TBD_PROGRESSIVE
+    function onProgressiveTick() {
+        // ecModel might be change so should not get from closure.
+        var ecModel = this._model;
+        var api = this._api;
+        var progressiveMap = {};
+
+        checkProgressive.call(this, ecModel, true);
+
+        ecModel.eachSeries(function (seriesModel, idx) {
+            var thisProgressive = seriesModel.__thisProgressive;
+
+            if (!thisProgressive) {
+                return;
+            }
+
+            progressiveMap[thisProgressive.key] = thisProgressive.frame;
+
+            // TBD_PROGRESSIVE
+            // 是否 visualCoding 中的 eachSeries 应该放到外面？
+            // Visual encoding for progressive.
+            each(VISUAL_CODING_STAGES, function (stage) {
+                each(
+                    (visualCodingProgressive[stage] || [])['series.' + seriesModel.subType] || [],
+                    function (func) {
+                        func(seriesModel, ecModel, api);
+                    }
+                );
+            });
+
+            // Render for progressive
+            var chart = this._chartsMap[seriesModel.__viewId];
+            chart.updateProgressive(seriesModel, ecModel, api);
+
+            updateZ(seriesModel, chart);
+        }, this);
+
+        this._zr.refreshImmediately({progressive: progressiveMap});
+    }
+
+    // TBD_PROGRESSIVE
+    function checkProgressive(ecModel, isInFurther) {
+        var needFurther;
+
+        ecModel.eachSeries(function (seriesModel, idx) {
+            var thisProgressive;
+            if (!isInFurther) {
+
+                // this.__needProgressive = size;
+                // var need = seriesModel.__needProgressive;
+                // seriesModel.__needProgressive = null;
+                // TBD_PROGRESSIVE
+                // 这段逻辑是否应该放在 series 中。从而能 action 只影响受影响的 series。
+                // 但是 action 触发时，又没有机会调用
+                var need = seriesModel.option.progressive;
+
+                thisProgressive = seriesModel.__thisProgressive = need
+                    ? {
+                        frame: -1,
+                        size: need,
+                        key: seriesModel.__viewId,
+                        thisDataIndex: 0,
+                        nextDataIndex: 0
+                    }
+                    : null;
+                if (need) {
+                    needFurther = true;
+                }
+            }
+            else {
+                thisProgressive = seriesModel.__thisProgressive;
+                if (thisProgressive) {
+                    thisProgressive.frame++;
+                    var thisDataIndex = thisProgressive.thisDataIndex =
+                        thisProgressive.frame * thisProgressive.size;
+                    thisProgressive.nextDataIndex = Math.min(
+                        seriesModel.getData().count(),
+                        thisDataIndex + thisProgressive.size
+                    );
+                    if (thisProgressive.nextDataIndex > thisProgressive.thisDataIndex) {
+                        needFurther = true;
+                    }
+                }
+            }
+
+        });
+
+        this._zr.onProgressive = needFurther
+            ? this.__onProgressiveTick || (
+                this.__onProgressiveTick = zrUtil.bind(onProgressiveTick, this)
+            )
+            : null;
+    }
+
     var MOUSE_EVENT_NAMES = [
         'click', 'dblclick', 'mouseover', 'mouseout', 'mousedown', 'mouseup', 'globalout'
     ];
@@ -945,6 +1047,10 @@ define(function (require) {
      * @inner
      */
     var visualCodingFuncs = {};
+
+    // TBD_PROGRESSIVE
+    var visualCodingProgressive = {};
+
     /**
      * Theme storage
      * @type {Object.<key, Object>}
@@ -1193,6 +1299,13 @@ define(function (require) {
         funcs.push(visualCodingFunc);
     };
 
+    // TBD_PROGRESSIVE
+    echarts.registerVisualCodingProgressive = function (stage, componentFullType, visualCodingFunc) {
+        var funcs = visualCodingProgressive[stage] || (visualCodingProgressive[stage] = []);
+        var funcsByType = funcs[componentFullType] || (funcs[componentFullType] = []);
+        funcsByType.push(visualCodingFunc);
+    };
+
     /**
      * @param {Object} opts
      */

src/model/Series.js

@@ -206,6 +206,19 @@ define(function(require) {
             this._data = this._dataBeforeProcessed.cloneShallow();
         },
 
+        // TBD_PROGRESSIVE
+        // 临时放在这里
+        // needProgressive do not need to be called each tick.
+        // needProgressive: function (size) {
+        //     this.__needProgressive = size;
+        // },
+
+        // TBD_PROGRESSIVE
+        // 临时放在这里
+        getProgressive: function () {
+            return this.__thisProgressive ? zrUtil.extend({}, this.__thisProgressive) : null;
+        },
+
         getAxisTooltipDataIndex: null
     });
 

test/parallel-nutrients.html

@@ -222,7 +222,7 @@
                                 type: 'parallel',
                                 lineStyle: lineStyle,
                                 inactiveOpacity: 0,
-                                activeOpacity: 0.01,
+                                activeOpacity: 0.03,
                                 progressive: 100,
                                 smooth: true,
                                 data: data