Optimize symbol draw.

src/chart/helper/LargeSymbolDraw.js

@@ -7,15 +7,13 @@ import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
 var LargeSymbolPath = graphic.extendShape({
 
     shape: {
-        points: null,
-        sizes: null
+        points: null
     },
 
     symbolProxy: null,
 
     buildPath: function (path, shape) {
         var points = shape.points;
-        var sizes = shape.sizes;
         var size = shape.size;
 
         var symbolProxy = this.symbolProxy;
@@ -31,9 +29,6 @@ var LargeSymbolPath = graphic.extendShape({
                 continue;
             }
 
-            if (sizes) {
-                size = sizes[i];
-            }
 
             if (canBoost) {
                 // Optimize for small symbol
@@ -55,29 +50,27 @@ var LargeSymbolPath = graphic.extendShape({
     },
 
     findDataIndex: function (x, y) {
-        // TODO
-        // support incremental, Typed array.
-
         // TODO ???
         // Consider transform
 
-        // var shape = this.shape;
-        // var points = shape.points;
-        // var sizes = shape.sizes;
-
-        // // Not consider transform
-        // // Treat each element as a rect
-        // // top down traverse
-        // for (var i = points.length - 1; i >= 0; i--) {
-        //     var pt = points[i];
-        //     var size = sizes[i];
-        //     var x0 = pt[0] - size[0] / 2;
-        //     var y0 = pt[1] - size[1] / 2;
-        //     if (x >= x0 && y >= y0 && x <= x0 + size[0] && y <= y0 + size[1]) {
-        //         // i is dataIndex
-        //         return i;
-        //     }
-        // }
+        var shape = this.shape;
+        var points = shape.points;
+        var size = shape.size;
+
+        var w = Math.max(size[0], 4);
+        var h = Math.max(size[1], 4);
+
+        // Not consider transform
+        // Treat each element as a rect
+        // top down traverse
+        for (var idx = points.length / 2 - 1; idx >= 0; idx--) {
+            var i = idx * 2;
+            var x0 = points[i] - w / 2;
+            var y0 = points[i + 1] - h / 2;
+            if (x >= x0 && y >= y0 && x <= x0 + w && y <= y0 + h) {
+                return idx;
+            }
+        }
 
         return -1;
     }
@@ -85,11 +78,6 @@ var LargeSymbolPath = graphic.extendShape({
 
 function LargeSymbolDraw() {
     this.group = new graphic.Group();
-
-    this._symbolEl = new LargeSymbolPath({
-        // rectHover: true,
-        // cursor: 'default'
-    });
 }
 
 var largeSymbolProto = LargeSymbolDraw.prototype;
@@ -100,38 +88,62 @@ var largeSymbolProto = LargeSymbolDraw.prototype;
  */
 largeSymbolProto.updateData = function (data) {
     this.group.removeAll();
-    var symbolEl = this._symbolEl;
+    var symbolEl = new LargeSymbolPath({
+        rectHover: true,
+        cursor: 'default'
+    });
 
-    this._symbolEl.setShape({
+    symbolEl.setShape({
         points: data.getLayout('symbolPoints')
     });
-    this._setCommon(data);
-
-    // Add back
+    this._setCommon(symbolEl, data);
     this.group.add(symbolEl);
+
+    this._incremental = null;
 };
 
 largeSymbolProto.incrementalPrepareUpdate = function (data) {
     this.group.removeAll();
 
-    this._setCommon(data, true);
     this._clearIncremental();
-
-    if (!this._incremental) {
-        this._incremental = new IncrementalDisplayable();
+    // Only use incremental displayables when data amount is larger than 2 million.
+    // PENDING Incremental data?
+    if (data.count() > 2e6) {
+        if (!this._incremental) {
+            this._incremental = new IncrementalDisplayable({
+                silent: true
+            });
+        }
+        this.group.add(this._incremental);
+    }
+    else {
+        this._incremental = null;
     }
-    this.group.add(this._incremental);
 };
 
 largeSymbolProto.incrementalUpdate = function (taskParams, data) {
-    this._symbolEl.setShape({
+    var symbolEl;
+    if (this._incremental) {
+        symbolEl = new LargeSymbolPath();
+        this._incremental.addDisplayable(symbolEl, true);
+    }
+    else {
+        symbolEl = new LargeSymbolPath({
+            rectHover: true,
+            cursor: 'default'
+        });
+        symbolEl.incremental = true;
+        symbolEl.__startIndex = taskParams.start;
+        this.group.add(symbolEl);
+    }
+
+    symbolEl.setShape({
         points: data.getLayout('symbolPoints')
     });
-    this._incremental.addDisplayable(this._symbolEl, true);
+    this._setCommon(symbolEl, data, !!this._incremental);
 };
 
-largeSymbolProto._setCommon = function (data, isIncremental) {
-    var symbolEl = this._symbolEl;
+largeSymbolProto._setCommon = function (symbolEl, data, isIncremental) {
     var hostModel = data.hostModel;
 
     if (data.hasItemVisual.symbolSize) {
@@ -173,7 +185,7 @@ largeSymbolProto._setCommon = function (data, isIncremental) {
             var dataIndex = symbolEl.findDataIndex(e.offsetX, e.offsetY);
             if (dataIndex >= 0) {
                 // Provide dataIndex for tooltip
-                symbolEl.dataIndex = dataIndex;
+                symbolEl.dataIndex = dataIndex + symbolEl.__startIndex;
             }
         });
     }

src/chart/helper/SymbolDraw.js

@@ -4,7 +4,6 @@
 
 import * as graphic from '../../util/graphic';
 import SymbolClz from './Symbol';
-import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
 
 /**
  * @constructor
@@ -81,42 +80,42 @@ symbolDrawProto.updateData = function (data, isIgnore) {
     this._data = data;
 };
 
-// symbolDrawProto.updateLayout = function () {
-//     var data = this._data;
-//     if (data) {
-//         // Not use animation
-//         data.eachItemGraphicEl(function (el, idx) {
-//             var point = data.getItemLayout(idx);
-//             el.attr('position', point);
-//         });
-//     }
-// };
+symbolDrawProto.updateLayout = function () {
+    var data = this._data;
+    if (data) {
+        // Not use animation
+        data.eachItemGraphicEl(function (el, idx) {
+            var point = data.getItemLayout(idx);
+            el.attr('position', point);
+        });
+    }
+};
 
 symbolDrawProto.incrementalPrepareUpdate = function (data) {
     this._seriesScope = makeSeriesScope(data);
-    this._clearIncremental();
-
-    !this._incremental && this.group.add(
-        this._incremental = new IncrementalDisplayable()
-    );
+    this._data = null;
+    this.group.removeAll();
 };
 
 symbolDrawProto.incrementalUpdate = function (taskParams, data) {
+
+    function updateIncrementalAndHover(el) {
+        if (!el.isGroup) {
+            el.incremental = el.useHoverLayer = true;
+        }
+    }
     for (var idx = taskParams.start; idx < taskParams.end; idx++) {
         var point = data.getItemLayout(idx);
-        // ???! IncrementalDisplayable do not support Group.
-        var el = new this._symbolCtor(data, idx, this._seriesScope).childAt(0);
+        var el = new this._symbolCtor(data, idx, this._seriesScope);
+        el.traverse(updateIncrementalAndHover);
         el.attr('position', point);
-        // data.setItemGraphicEl(idx, el);
-        if (symbolNeedsDraw(data, point, idx)) {
-            this._incremental.addDisplayable(el, true);
-        }
+        this.group.add(el);
+
+        data.setItemGraphicEl(idx, el);
     }
 };
 
 symbolDrawProto.remove = function (enableAnimation) {
-    // this._incremental = null;
-
     var group = this.group;
     var data = this._data;
     if (data) {
@@ -133,13 +132,6 @@ symbolDrawProto.remove = function (enableAnimation) {
     }
 };
 
-symbolDrawProto._clearIncremental = function () {
-    var incremental = this._incremental;
-    if (incremental) {
-        incremental.clearDisplaybles();
-    }
-};
-
 function makeSeriesScope(data) {
     var seriesModel = data.hostModel;
     return {

src/echarts.js

@@ -1579,10 +1579,7 @@ function updateBlend(seriesModel, chartView) {
         }
         if (el.eachPendingDisplayable) {
             el.eachPendingDisplayable(function (displayable) {
-                // Only set if blendMode is changed. In case element is incremental and don't wan't to rerender.
-                if (el.style.blend !== blendMode) {
-                    el.setStyle('blend', blendMode);
-                }
+                displayable.setStyle('blend', blendMode);
             });
         }
     });