Scatter add large symbol draw

src/chart/bar/BarView.js

@@ -98,15 +98,17 @@ define(function (require) {
                 })
                 .remove(function (idx) {
                     var rect = oldData.getItemGraphicEl(idx);
-                    // Not show text when animating
-                    rect.style.text = '';
-                    api.updateGraphicEl(rect, {
-                        shape: {
-                            width: 0
-                        }
-                    }, function () {
-                        group.remove(rect);
-                    });
+                    if (rect) {
+                        // Not show text when animating
+                        rect.style.text = '';
+                        api.updateGraphicEl(rect, {
+                            shape: {
+                                width: 0
+                            }
+                        }, function () {
+                            group.remove(rect);
+                        });
+                    }
                 })
                 .execute();
 

src/chart/helper/LargeSymbolDraw.js

+define(function (require) {
+
+    var graphic = require('../../util/graphic');
+    var symbolUtil = require('../../util/symbol');
+
+    var LargeSymbolPath = graphic.extendShape({
+        shape: {
+            points: null,
+            sizes: null
+        },
+
+        symbolProxy: null,
+
+        buildPath: function (path, shape) {
+            var points = shape.points;
+            var sizes = shape.sizes;
+
+            var symbolProxy = this.symbolProxy;
+            var symbolProxyShape = symbolProxy.shape;
+            for (var i = 0; i < points.length; i++) {
+                var pt = points[i];
+                var size = sizes[i];
+                if (size < 4) {
+                    // Optimize for small symbol
+                    path.rect(
+                        pt[0] - size / 2, pt[1] - size / 2,
+                        size, size
+                    );
+                }
+                else {
+                    symbolProxyShape.x = pt[0] - size / 2;
+                    symbolProxyShape.y = pt[1] - size / 2;
+                    symbolProxyShape.width = size;
+                    symbolProxyShape.height = size;
+
+                    symbolProxy.buildPath(path, symbolProxyShape);
+                }
+            }
+        }
+    });
+
+    function LargeSymbolDraw() {
+        this.group = new graphic.Group();
+
+        this._symbolEl = new LargeSymbolPath({
+            silent: true
+        });
+    }
+
+    var largeSymbolProto = LargeSymbolDraw.prototype;
+
+    /**
+     * Update symbols draw by new data
+     * @param {module:echarts/data/List} data
+     * @param {module:echarts/ExtensionAPI} api
+     */
+    largeSymbolProto.updateData = function (data, api) {
+        var symbolEl = this._symbolEl;
+
+        var seriesModel = data.hostModel;
+
+        symbolEl.setShape({
+            points: data.mapArray(data.getItemLayout),
+            sizes: data.mapArray(
+                function (idx) {
+                    return data.getItemVisual(idx, 'symbolSize');
+                }
+            )
+        });
+
+        // Create symbolProxy to build path for each data
+        symbolEl.symbolProxy = symbolUtil.createSymbol(
+            data.getVisual('symbol'), 0, 0, 0, 0
+        );
+        // Use symbolProxy setColor method
+        symbolEl.setColor = symbolEl.symbolProxy.setColor;
+
+        symbolEl.setStyle(
+            seriesModel.getModel('itemStyle.normal').getItemStyle(['color'])
+        );
+
+        var visualColor = data.getVisual('color');
+        if (visualColor) {
+            symbolEl.setColor(visualColor);
+        }
+
+        // Add back
+        this.group.add(this._symbolEl);
+    };
+
+    largeSymbolProto.updateLayout = function (seriesModel) {
+        var data = seriesModel.getData();
+        this._symbolEl.setShape({
+            points: data.mapArray(data.getItemLayout)
+        });
+    };
+
+    largeSymbolProto.remove = function () {
+        this.group.removeAll();
+    };
+
+    return LargeSymbolDraw;
+});
\ No newline at end of file

src/chart/scatter/ScatterSeries.js

@@ -38,6 +38,10 @@ define(function (require) {
             symbolSize: 10,          // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
             // symbolRotate: null,  // 图形旋转控制
 
+            large: false,
+            // Available when large is true
+            largeThreshold: 2000,
+
             // label: {
                 // normal: {
                     // show: false

src/chart/scatter/ScatterView.js

 define(function (require) {
 
     var SymbolDraw = require('../helper/SymbolDraw');
+    var LargeSymbolDraw = require('../helper/LargeSymbolDraw');
 
     require('../../echarts').extendChartView({
 
         type: 'scatter',
 
         init: function () {
-            this._symbolDraw = new SymbolDraw();
-            this.group.add(this._symbolDraw.group);
+            this._normalSymbolDraw = new SymbolDraw();
+            this._largeSymbolDraw = new LargeSymbolDraw();
         },
 
         render: function (seriesModel, ecModel, api) {
-            this._symbolDraw.updateData(seriesModel.getData(), api);
+            var data = seriesModel.getData();
+            var largeSymbolDraw = this._largeSymbolDraw;
+            var normalSymbolDraw = this._normalSymbolDraw;
+            var group = this.group;
+
+            var symbolDraw = seriesModel.get('large') && data.count() > seriesModel.get('largeThreshold')
+                ? largeSymbolDraw : normalSymbolDraw;
+
+            this._symbolDraw = symbolDraw;
+            symbolDraw.updateData(data, api);
+            group.add(symbolDraw.group);
+
+            group.remove(
+                symbolDraw === largeSymbolDraw
+                ? normalSymbolDraw.group : largeSymbolDraw.group
+            );
         },
 
         updateLayout: function () {

src/component/tooltip/TooltipModel.js

@@ -94,7 +94,8 @@ define(function (require) {
                 }
             },
             textStyle: {
-                color: '#fff'
+                color: '#fff',
+                fontSize: 14
             }
         }
     });

src/util/symbol.js

@@ -172,104 +172,120 @@ define(function(require) {
 
     var symbolShapeMakers = {
 
-        line: function (x, y, w, h) {
+        line: function (x, y, w, h, shape) {
             // FIXME
-            return {
-                x1: x,
-                y1: y + h / 2,
-                x2: x + w,
-                y2: y + h / 2
-            };
+            shape.x1 = x;
+            shape.y1 = y + h / 2;
+            shape.x2 = x + w;
+            shape.y2 = y + h / 2;
         },
 
-        rect: function (x, y, w, h) {
-            return {
-                x: x,
-                y: y,
-                width: w,
-                height: h
-            };
+        rect: function (x, y, w, h, shape) {
+            shape.x = x;
+            shape.y = y;
+            shape.width = w;
+            shape.height = h;
         },
 
-        roundRect: function (x, y, w, h, r) {
-            return {
-                x: x,
-                y: y,
-                width: w,
-                height: h,
-                r: r || Math.min(w, h) / 4
-            };
+        roundRect: function (x, y, w, h, shape) {
+            shape.x = x;
+            shape.y = y;
+            shape.width = w;
+            shape.height = h;
+            shape.r = Math.min(w, h) / 4;
         },
 
-        square: function (x, y, size) {
-            return {
-                x: x,
-                y: y,
-                width: size / 2,
-                height: size / 2
-            };
+        square: function (x, y, w, h, shape) {
+            var size = Math.min(w, h);
+            shape.x = x;
+            shape.y = y;
+            shape.width = size;
+            shape.height = size;
         },
 
-        circle: function (x, y, w, h) {
+        circle: function (x, y, w, h, shape) {
             // Put circle in the center of square
-            var size = Math.min(w, h);
-            return {
-                cx: x + w / 2,
-                cy: y + h / 2,
-                r: size / 2
-            };
+            shape.cx = x + w / 2;
+            shape.cy = y + h / 2;
+            shape.r = Math.min(w, h) / 2;
         },
 
-        diamond: function (x, y, w, h) {
-            return {
-                cx: x + w / 2,
-                cy: y + h / 2,
-                width: w,
-                height: h
-            };
+        diamond: function (x, y, w, h, shape) {
+            shape.cx = x + w / 2;
+            shape.cy = y + h / 2;
+            shape.width = w;
+            shape.height = h;
         },
 
-        pin: function (x, y, w, h) {
-            return {
-                x: x + w / 2,
-                // FIXME Why not y + h ?
-                y: y + h / 2,
-                width: w,
-                height: h
-            };
+        pin: function (x, y, w, h, shape) {
+            shape.x = x + w / 2;
+            shape.y = y + h / 2;
+            shape.width = w;
+            shape.height = h;
         },
 
-        arrow: function (x, y, w, h) {
-            return {
-                x: x + w / 2,
-                y: y + h / 2,
-                width: w,
-                height: h
-            };
+        arrow: function (x, y, w, h, shape) {
+            shape.x = x + w / 2;
+            shape.y = y + h / 2;
+            shape.width = w;
+            shape.height = h;
         },
 
-        triangle: function (x, y, w, h) {
-            return {
-                cx: x + w / 2,
-                cy: y + h / 2,
-                width: w,
-                height: h
-            };
+        triangle: function (x, y, w, h, shape) {
+            shape.cx = x + w / 2;
+            shape.cy = y + h / 2;
+            shape.width = w;
+            shape.height = h;
         }
     };
 
+    var symbolBuildProxies = {};
+    for (var name in  symbolCtors) {
+        symbolBuildProxies[name] = new symbolCtors[name]();
+    }
+
+    var Symbol = graphic.extendShape({
+
+        type: 'symbol',
+
+        shape: {
+            symbolType: '',
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        },
+
+        buildPath: function (ctx, shape) {
+            var proxySymbol = symbolBuildProxies[shape.symbolType];
+            if (proxySymbol) {
+                symbolShapeMakers[shape.symbolType](
+                    shape.x, shape.y, shape.width, shape.height, proxySymbol.shape
+                );
+                proxySymbol.buildPath(ctx, proxySymbol.shape);
+            }
+        }
+    });
+
     // Provide setColor helper method to avoid determine if set the fill or stroke outside
     var symbolPathSetColor = function (color) {
-        var symbolStyle = this.style;
-        if (this.__isEmptyBrush) {
-            symbolStyle.stroke = color;
-        }
-        else {
-            // FIXME 判断图形默认是填充还是描边，使用 onlyStroke ?
-            symbolStyle.fill && (symbolStyle.fill = color);
-            symbolStyle.stroke && (symbolStyle.stroke = color);
+        if (this.type !== 'image') {
+            var symbolStyle = this.style;
+            var symbolShape = this.shape;
+            if (symbolShape.symbolType === 'line') {
+                symbolStyle.stroke = color;
+            }
+            else if (this.__isEmptyBrush) {
+                symbolStyle.stroke = color;
+                symbolStyle.fill = '#fff';
+            }
+            else {
+                // FIXME 判断图形默认是填充还是描边，使用 onlyStroke ?
+                symbolStyle.fill && (symbolStyle.fill = color);
+                symbolStyle.stroke && (symbolStyle.stroke = color);
+            }
+            this.dirty();
         }
-        this.dirty();
     };
 
     var symbolUtil = {
@@ -304,19 +320,18 @@ define(function(require) {
                 symbolPath = graphic.makePath(symbolType.slice(7), {}, new BoundingRect(x, y, w, h));
             }
             else {
+                // Default rect
                 if (!symbolShapeMakers[symbolType]) {
                     symbolType = 'rect';
                 }
-                symbolPath = new symbolCtors[symbolType]({
-                    shape: symbolShapeMakers[symbolType](x, y, w, h)
-                });
-            }
-
-            var symbolStyle = symbolPath.style;
-            if (isEmpty) {
-                symbolStyle.set({
-                    fill: '#fff',
-                    lineWidth: 2
+                symbolPath = new Symbol({
+                    shape: {
+                        symbolType: symbolType,
+                        x: x,
+                        y: y,
+                        width: w,
+                        height: h
+                    }
                 });
             }
 
@@ -327,39 +342,6 @@ define(function(require) {
             symbolPath.setColor(color);
 
             return symbolPath;
-        },
-
-        /**
-         * Get symbol shape object by given x, y, w, h
-         * @param {string} symbolType
-         * @param {number} x
-         * @param {number} y
-         * @param {number} w
-         * @param {number} h
-         * @return {Object}
-         */
-        getSymbolShape: function (symbolType, x, y, w, h) {
-            if (symbolType.indexOf('empty') === 0) {
-                symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
-            }
-            if (symbolType.indexOf('image://') === 0) {
-                return {
-                    style: {
-                        x: x,
-                        y: y,
-                        width: w,
-                        height: h
-                    }
-                };
-            }
-            else if (symbolType.indexOf('path://') !== 0) {
-                if (!symbolShapeMakers[symbolType]) {
-                    symbolType = 'rect';
-                }
-                return {
-                    shape: symbolShapeMakers[symbolType](x, y, w, h)
-                };
-            }
         }
     };