Add effects on geoLine

src/chart/bar.js

@@ -8,10 +8,11 @@ define(function (require) {
     require('./bar/BarView');
 
     var barLayoutGrid = require('../layout/barGrid');
+    var echarts = require('../echarts');
 
-    require('../echarts').registerLayout(zrUtil.curry(barLayoutGrid, 'bar'));
+    echarts.registerLayout(zrUtil.curry(barLayoutGrid, 'bar'));
     // Visual coding for legend
-    require('../echarts').registerVisualCoding('chart', function (ecModel) {
+    echarts.registerVisualCoding('chart', function (ecModel) {
         ecModel.eachSeriesByType('bar', function (seriesModel) {
             var data = seriesModel.getData();
             data.setVisual('legendSymbol', 'roundRect');

src/chart/effectScatter/EffectScatterSeries.js

@@ -26,11 +26,10 @@ define(function (require) {
 
             // When to show the effect, option: 'render'|'emphasis'
             showEffectOn: 'render',
-            // Period of effect
-            effectPeriod: 4000,
 
             // Ripple effect config
             rippleEffect: {
+                period: 4,
                 // Scale of ripple
                 scale: 2.5,
                 // Brush type can be fill or stroke

src/chart/effectScatter/EffectScatterView.js

@@ -23,7 +23,7 @@ define(function (require) {
         },
 
         remove: function (ecModel, api) {
-            this._symbolDraw.remove(api);
+            this._symbolDraw && this._symbolDraw.remove(api);
         }
     });
 });
\ No newline at end of file

src/chart/geoLine.js

@@ -3,7 +3,13 @@ define(function (require) {
     require('./geoLine/GeoLineSeries');
     require('./geoLine/GeoLineView');
 
-    require('../echarts').registerLayout(
+    var zrUtil = require('zrender/core/util');
+    var echarts = require('../echarts');
+    echarts.registerLayout(
         require('./geoLine/geoLineLayout')
     );
+
+    echarts.registerVisualCoding(
+        'chart', zrUtil.curry(require('../visual/seriesColor'), 'geoLine', 'lineStyle')
+    );
 });
\ No newline at end of file

src/chart/geoLine/GeoLineSeries.js

@@ -56,9 +56,20 @@ define(function (require) {
             // Geo coordinate system
             geoIndex: 0,
 
-            // symbol: null,        // 图形类型
-            symbolSize: 10,          // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
-            // symbolRotate: null,  // 图形旋转控制
+            // symbol: null,
+            symbolSize: 10,
+            // symbolRotate: null,
+
+            effect: {
+                show: false,
+                period: 4,
+                symbol: 'circle',
+                symbolSize: 3,
+                // Length of trail, 0 - 1
+                trailLength: 0.2
+                // Same with lineStyle.normal.color
+                // color
+            },
 
             large: false,
             // Available when large is true

src/chart/geoLine/GeoLineView.js

 define(function (require) {
 
     var LineDraw = require('../helper/LineDraw');
+    var EffectLine = require('../helper/EffectLine');
+    var Line = require('../helper/Line');
 
     require('../../echarts').extendChartView({
 
         type: 'geoLine',
 
-        init: function () {
-            this._lineDraw = new LineDraw();
-        },
+        init: function () {},
 
         render: function (seriesModel, ecModel, api) {
             var data = seriesModel.getData();
             var lineDraw = this._lineDraw;
+
+            var hasEffect = seriesModel.get('effect.show');
+            if (hasEffect !== this._hasEffet) {
+                if (lineDraw) {
+                    lineDraw.remove();
+                }
+                lineDraw = this._lineDraw = new LineDraw(
+                    hasEffect ? EffectLine : Line
+                );
+                this._hasEffet = hasEffect;
+            }
+
+            var zlevel = seriesModel.get('zlevel');
+            var trailLength = seriesModel.get('effect.trailLength');
+
+            var zr = api.getZr();
+            zr.painter.getLayer(zlevel).clear(true);
+            // Config layer with motion blur
+            if (this._lastZlevel != null) {
+                zr.configLayer(this._lastZlevel, {
+                    motionBlur: false
+                });
+            }
+            if (hasEffect && trailLength) {
+                zr.configLayer(zlevel, {
+                    motionBlur: true,
+                    lastFrameAlpha: Math.max(Math.min(trailLength / 10 + 0.9, 1), 0)
+                });
+            }
+
             this.group.add(lineDraw.group);
 
             lineDraw.updateData(data);
+
+            this._lastZlevel = zlevel;
         },
 
-        updateLayout: function () {
+        updateLayout: function (seriesModel, ecModel, api) {
             this._lineDraw.updateLayout();
+            // Not use motion when dragging or zooming
+            var zr = api.getZr();
+            zr.painter.getLayer(this._lastZlevel).clear(true);
         },
 
         remove: function (ecModel, api) {
-            this._lineDraw.remove(api, true);
+            this._lineDraw && this._lineDraw.remove(api, true);
         }
     });
 });
\ No newline at end of file

src/chart/graph/GraphView.js

@@ -148,8 +148,8 @@ define(function (require) {
         },
 
         remove: function (ecModel, api) {
-            this._symbolDraw.remove();
-            this._lineDraw.remove();
+            this._symbolDraw && this._symbolDraw.remove();
+            this._lineDraw && this._lineDraw.remove();
         }
     });
 });
\ No newline at end of file

src/chart/helper/EffectLine.js

+/**
+ * @module echarts/chart/helper/EffectLine
+ */
+define(function (require) {
+
+    var graphic = require('../../util/graphic');
+    var Line = require('./Line');
+    var zrUtil = require('zrender/core/util');
+    var symbolUtil = require('../../util/symbol');
+
+    var curveUtil = require('zrender/core/curve');
+
+    /**
+     * @constructor
+     * @extends {module:zrender/graphic/Group}
+     * @alias {module:echarts/chart/helper/Line}
+     */
+    function EffectLine(lineData, fromData, toData, idx) {
+        graphic.Group.call(this);
+
+        var line = new Line(lineData, fromData, toData, idx);
+        this.add(line);
+
+        this._updateEffectSymbol(lineData, idx);
+    }
+
+    var effectLineProto = EffectLine.prototype;
+
+    function setAnimationPoints(symbol, points) {
+        symbol.__p1 = points[0];
+        symbol.__p2 = points[1];
+        symbol.__cp1 = points[2] || [
+            (points[0][0] + points[1][0]) / 2,
+            (points[0][1] + points[1][1]) / 2
+        ];
+    }
+
+    function updateSymbolPosition() {
+        var p1 = this.__p1;
+        var p2 = this.__p2;
+        var cp1 = this.__cp1;
+        var t = this.__t;
+        var pos = this.position;
+        pos[0] = curveUtil.quadraticAt(p1[0], cp1[0], p2[0], t);
+        pos[1] = curveUtil.quadraticAt(p1[1], cp1[1], p2[1], t);
+    }
+
+    effectLineProto._updateEffectSymbol = function (lineData, idx) {
+        var itemModel = lineData.getItemModel(idx);
+        var effectModel = itemModel.getModel('effect');
+        var size = effectModel.get('symbolSize');
+        var symbolType = effectModel.get('symbol');
+        if (!zrUtil.isArray(size)) {
+            size = [size, size];
+        }
+        var color = effectModel.get('color') || lineData.getItemVisual(idx, 'color');
+        var symbol = this.childAt(1);
+        var period = effectModel.get('period') * 1000;
+        if (this._symbolType !== symbolType || period !== this._period) {
+            symbol = symbolUtil.createSymbol(
+                symbolType, -0.5, -0.5, 1, 1, color
+            );
+            symbol.z2 = 100;
+            this._symbolType = symbolType;
+            this._period = period;
+
+            this.add(symbol);
+
+            symbol.updateSymbolPosition = updateSymbolPosition;
+
+            symbol.__t = 0;
+            symbol.animate('', true)
+                .when(period, {
+                    __t: 1
+                })
+                .delay(idx / lineData.count() * period / 2)
+                .during(zrUtil.bind(updateSymbolPosition, symbol))
+                .start();
+        }
+        // Shadow color is same with color in default
+        symbol.setStyle('shadowColor', color);
+        symbol.setStyle(effectModel.getItemStyle(['color']));
+
+        symbol.attr('scale', size);
+        var points = lineData.getItemLayout(idx);
+        setAnimationPoints(symbol, points);
+
+        symbol.setColor(color);
+        symbol.attr('scale', size);
+    };
+
+    effectLineProto.updateData = function (lineData, fromData, toData, idx) {
+        this.childAt(0).updateData(lineData, fromData, toData, idx);
+        this._updateEffectSymbol(lineData, idx);
+    };
+
+    effectLineProto.updateLayout = function (lineData, fromData, toData, idx) {
+        this.childAt(0).updateLayout(lineData, fromData, toData, idx);
+        var symbol = this.childAt(1);
+        var points = lineData.getItemLayout(idx);
+        setAnimationPoints(symbol, points);
+    };
+
+    zrUtil.inherits(EffectLine, graphic.Group);
+
+    return EffectLine;
+});
\ No newline at end of file

src/chart/helper/EffectSymbol.js

@@ -127,13 +127,13 @@ define(function (require) {
         var showEffectOn = seriesModel.get('showEffectOn');
         var rippleScale = itemModel.get('rippleEffect.scale');
         var brushType = itemModel.get('rippleEffect.brushType');
-        var effectPeriod = itemModel.get('effectPeriod');
+        var effectPeriod = itemModel.get('rippleEffect.period');
         var effectOffset = idx / data.count();
 
         this.stopEffectAnimation();
         if (showEffectOn === 'render') {
             this.startEffectAnimation(
-                effectPeriod, brushType, rippleScale, effectOffset
+                effectPeriod * 1000, brushType, rippleScale, effectOffset
             );
         }
         var symbol = this.childAt(0);

src/chart/helper/Line.js

+/**
+ * @module echarts/chart/helper/Line
+ */
+define(function (require) {
+
+    var symbolUtil = require('../../util/symbol');
+    var vector = require('zrender/core/vector');
+    var LinePath = require('./LinePath');
+    var graphic = require('../../util/graphic');
+    var zrUtil = require('zrender/core/util');
+    var numberUtil = require('../../util/number');
+
+    /**
+     * @inner
+     */
+    function createSymbol(name, data, idx) {
+        var color = data.getItemVisual(idx, 'color');
+        var symbolType = data.getItemVisual(idx, 'symbol');
+        var symbolSize = data.getItemVisual(idx, 'symbolSize');
+
+        if (symbolType === 'none') {
+            return;
+        }
+
+        if (!zrUtil.isArray(symbolSize)) {
+            symbolSize = [symbolSize, symbolSize];
+        }
+        var symbolPath = symbolUtil.createSymbol(
+            symbolType, -symbolSize[0] / 2, -symbolSize[1] / 2,
+            symbolSize[0], symbolSize[1], color
+        );
+        symbolPath.name = name;
+
+        return symbolPath;
+    }
+
+    function createLine(points) {
+        var line = new LinePath({
+            name: 'line'
+        });
+        setLinePoints(line.shape, points);
+        return line;
+    }
+
+    function setLinePoints(targetShape, points) {
+        var p1 = points[0];
+        var p2 = points[1];
+        var cp1 = points[2];
+        targetShape.x1 = p1[0];
+        targetShape.y1 = p1[1];
+        targetShape.x2 = p2[0];
+        targetShape.y2 = p2[1];
+        targetShape.percent = 1;
+
+        if (cp1) {
+            targetShape.cpx1 = cp1[0];
+            targetShape.cpy1 = cp1[1];
+        }
+    }
+
+    function isSymbolArrow(symbol) {
+        return symbol.type === 'symbol' && symbol.shape.symbolType === 'arrow';
+    }
+
+    function updateSymbolBeforeLineUpdate () {
+        if (!this.__dirty) {
+            return;
+        }
+        var lineGroup = this;
+        var line = lineGroup.childOfName('line');
+        var symbolFrom = lineGroup.childOfName('fromSymbol');
+        var symbolTo = lineGroup.childOfName('toSymbol');
+        var label = lineGroup.childOfName('label');
+        var fromPos = line.pointAt(0);
+        var toPos = line.pointAt(line.shape.percent);
+
+        var d = vector.sub([], toPos, fromPos);
+        vector.normalize(d, d);
+
+        if (symbolFrom) {
+            symbolFrom.attr('position', fromPos);
+            // Rotate the arrow
+            // FIXME Hard coded ?
+            if (isSymbolArrow(symbolTo)) {
+                symbolTo.attr('rotation', tangentRotation(fromPos, toPos));
+            }
+        }
+        if (symbolTo) {
+            symbolTo.attr('position', toPos);
+            if (isSymbolArrow(symbolFrom)) {
+                symbolFrom.attr('rotation', tangentRotation(toPos, fromPos));
+            }
+        }
+
+        label.attr('position', toPos);
+
+        var textPosition;
+        var textAlign;
+        var textBaseline;
+        // End
+        if (label.__position === 'end') {
+            textPosition = [d[0] * 5 + toPos[0], d[1] * 5 + toPos[1]];
+            textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
+            textBaseline = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
+        }
+        // Start
+        else {
+            textPosition = [-d[0] * 5 + fromPos[0], -d[1] * 5 + fromPos[1]];
+            textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
+            textBaseline = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
+        }
+        label.attr({
+            style: {
+                // Use the user specified text align and baseline first
+                textBaseline: label.__textBaseline || textBaseline,
+                textAlign: label.__textAlign || textAlign
+            },
+            position: textPosition
+        });
+    }
+
+    function tangentRotation(p1, p2) {
+        return -Math.PI / 2 - Math.atan2(
+            p2[1] - p1[1], p2[0] - p1[0]
+        );
+    }
+
+    /**
+     * @constructor
+     * @extends {module:zrender/graphic/Group}
+     * @alias {module:echarts/chart/helper/Line}
+     */
+    function Line(lineData, fromData, toData, idx) {
+        graphic.Group.call(this);
+
+        this._createLine(lineData, fromData, toData, idx);
+    }
+
+    var lineProto = Line.prototype;
+
+    // Update symbol position and rotation
+    lineProto.beforeUpdate = updateSymbolBeforeLineUpdate;
+
+    lineProto._createLine = function (lineData, fromData, toData, idx) {
+        var seriesModel = lineData.hostModel;
+        var linePoints = lineData.getItemLayout(idx);
+
+        var line = createLine(linePoints);
+        line.shape.percent = 0;
+        graphic.initProps(line, {
+            shape: {
+                percent: 1
+            }
+        }, seriesModel);
+
+        this.add(line);
+
+        var label = new graphic.Text({
+            name: 'label'
+        });
+        this.add(label);
+
+        if (fromData) {
+            var symbolFrom = createSymbol('fromSymbol', fromData, idx);
+            // symbols must added after line to make sure
+            // it will be updated after line#update.
+            // Or symbol position and rotation update in line#beforeUpdate will be one frame slow
+            this.add(symbolFrom);
+
+            this._fromSymbolType = fromData.getItemVisual(idx, 'symbol');
+        }
+        if (toData) {
+            var symbolTo = createSymbol('toSymbol', toData, idx);
+            this.add(symbolTo);
+
+            this._toSymbolType = toData.getItemVisual(idx, 'symbol');
+        }
+
+        this._updateCommonStl(lineData, fromData, toData, idx);
+    };
+
+    lineProto.updateData = function (lineData, fromData, toData, idx) {
+        var seriesModel = lineData.hostModel;
+
+        var line = this.childOfName('line');
+        var linePoints = lineData.getItemLayout(idx);
+        var target = {
+            shape: {}
+        };
+        setLinePoints(target.shape, linePoints);
+        graphic.updateProps(line, target, seriesModel);
+
+        // Symbol changed
+        if (fromData) {
+            var fromSymbolType = fromData.getItemVisual(idx, 'symbol');
+            if (this._fromSymbolType !== fromSymbolType) {
+                var symbolFrom = createSymbol('fromSymbol', fromData, idx);
+                this.remove(line.childOfName('fromSymbol'));
+                this.add(symbolFrom);
+            }
+            this._fromSymbolType = fromSymbolType;
+        }
+        if (toData) {
+            var toSymbolType = toData.getItemVisual(idx, 'symbol');
+            // Symbol changed
+            if (toSymbolType !== this._toSymbolType) {
+                var symbolTo = createSymbol('toSymbol', toData, idx);
+                this.remove(line.childOfName('toSymbol'));
+                this.add(symbolTo);
+            }
+            this._toSymbolType = toSymbolType;
+        }
+
+        this._updateCommonStl(lineData, fromData, toData, idx);
+    };
+
+    lineProto._updateCommonStl = function (lineData, fromData, toData, idx) {
+        var seriesModel = lineData.hostModel;
+
+        var line = this.childOfName('line');
+        var itemModel = lineData.getItemModel(idx);
+
+        var labelModel = itemModel.getModel('label.normal');
+        var textStyleModel = labelModel.getModel('textStyle');
+        var labelHoverModel = itemModel.getModel('label.emphasis');
+        var textStyleHoverModel = labelHoverModel.getModel('textStyle');
+
+        var defaultText = numberUtil.round(seriesModel.getData().getRawValue(idx));
+        line.setStyle(zrUtil.extend(
+            {
+                stroke: lineData.getItemVisual(idx, 'color')
+            },
+            itemModel.getModel('lineStyle.normal').getLineStyle()
+        ));
+
+        var label = this.childOfName('label');
+        label.setStyle({
+            text: labelModel.get('show')
+                ? seriesModel.getFormattedLabel(idx, 'normal') || defaultText
+                : '',
+            textFont: textStyleModel.getFont(),
+            fill: textStyleModel.get('color') || lineData.getItemVisual(idx, 'color')
+        });
+        label.hoverStyle = {
+            text: labelHoverModel.get('show')
+                ? seriesModel.getFormattedLabel(idx, 'emphasis') || defaultText
+                : '',
+            textFont: textStyleModel.getFont(),
+            fill: textStyleHoverModel.get('color')
+        };
+        label.__textAlign = textStyleModel.get('align');
+        label.__textBaseline = textStyleModel.get('baseline');
+        label.__position = labelModel.get('position');
+
+        graphic.setHoverStyle(
+            this, itemModel.getModel('lineStyle.emphasis').getLineStyle()
+        );
+    };
+
+    lineProto.updateLayout = function (lineData, fromData, toData, idx) {
+        var points = lineData.getItemLayout(idx);
+        var linePath = this.childOfName('line');
+        setLinePoints(linePath.shape, points);
+        linePath.dirty(true);
+        fromData && fromData.getItemGraphicEl(idx).attr('position', points[0]);
+        toData && toData.getItemGraphicEl(idx).attr('position', points[1]);
+    };
+
+    zrUtil.inherits(Line, graphic.Group);
+
+    return Line;
+});
\ No newline at end of file

src/chart/helper/LineDraw.js

 /**
- * @module echarts/component/marker/LineDraw
+ * @module echarts/chart/helper/LineDraw
  */
 define(function (require) {
 
-    var numberUtil = require('../../util/number');
     var graphic = require('../../util/graphic');
-    var zrUtil = require('zrender/core/util');
-    var symbolUtil = require('../../util/symbol');
-    var vector = require('zrender/core/vector');
-    var LinePath = require('./LinePath');
-
-    function tangentRotation(p1, p2) {
-        return -Math.PI / 2 - Math.atan2(
-            p2[1] - p1[1], p2[0] - p1[0]
-        );
-    }
-    /**
-     * @inner
-     */
-    function createSymbol(name, data, idx) {
-        var color = data.getItemVisual(idx, 'color');
-        var symbolType = data.getItemVisual(idx, 'symbol');
-        var symbolSize = data.getItemVisual(idx, 'symbolSize');
-
-        if (symbolType === 'none') {
-            return;
-        }
-
-        if (!zrUtil.isArray(symbolSize)) {
-            symbolSize = [symbolSize, symbolSize];
-        }
-        var symbolPath = symbolUtil.createSymbol(
-            symbolType, -symbolSize[0] / 2, -symbolSize[1] / 2,
-            symbolSize[0], symbolSize[1], color
-        );
-        symbolPath.name = name;
-
-        return symbolPath;
-    }
-
-    function createLine(points) {
-        var line = new LinePath({
-            name: 'line'
-        });
-        setLinePoints(line.shape, points);
-        return line;
-    }
-
-    function setLinePoints(targetShape, points) {
-        var p1 = points[0];
-        var p2 = points[1];
-        var cp1 = points[2];
-        targetShape.x1 = p1[0];
-        targetShape.y1 = p1[1];
-        targetShape.x2 = p2[0];
-        targetShape.y2 = p2[1];
-        targetShape.percent = 1;
-
-        if (cp1) {
-            targetShape.cpx1 = cp1[0];
-            targetShape.cpy1 = cp1[1];
-        }
-    }
-
-    function isSymbolArrow(symbol) {
-        return symbol.type === 'symbol' && symbol.shape.symbolType === 'arrow';
-    }
-
-    function updateSymbolBeforeLineUpdate () {
-        var lineGroup = this;
-        var line = lineGroup.childOfName('line');
-        var symbolFrom = lineGroup.childOfName('fromSymbol');
-        var symbolTo = lineGroup.childOfName('toSymbol');
-        var label = lineGroup.childOfName('label');
-        var fromPos = line.pointAt(0);
-        var toPos = line.pointAt(line.shape.percent);
-
-        var d = vector.sub([], toPos, fromPos);
-        vector.normalize(d, d);
-
-        if (symbolFrom) {
-            symbolFrom.attr('position', fromPos);
-            // Rotate the arrow
-            // FIXME Hard coded ?
-            if (isSymbolArrow(symbolTo)) {
-                symbolTo.attr('rotation', tangentRotation(fromPos, toPos));
-            }
-        }
-        if (symbolTo) {
-            symbolTo.attr('position', toPos);
-            if (isSymbolArrow(symbolFrom)) {
-                symbolFrom.attr('rotation', tangentRotation(toPos, fromPos));
-            }
-        }
-
-        label.attr('position', toPos);
-
-        var textPosition;
-        var textAlign;
-        var textBaseline;
-        // End
-        if (label.__position === 'end') {
-            textPosition = [d[0] * 5 + toPos[0], d[1] * 5 + toPos[1]];
-            textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
-            textBaseline = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
-        }
-        // Start
-        else {
-            textPosition = [-d[0] * 5 + fromPos[0], -d[1] * 5 + fromPos[1]];
-            textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
-            textBaseline = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
-        }
-        label.attr({
-            style: {
-                // Use the user specified text align and baseline first
-                textBaseline: label.__textBaseline || textBaseline,
-                textAlign: label.__textAlign || textAlign
-            },
-            position: textPosition
-        });
-    }
+    var LineGroup = require('./Line');
 
     /**
      * @alias module:echarts/component/marker/LineDraw
      * @constructor
      */
-    function LineDraw() {
+    function LineDraw(ctor) {
+        this._ctor = ctor || LineGroup;
         this.group = new graphic.Group();
     }
 
@@ -138,81 +24,21 @@ define(function (require) {
      */
     lineDrawProto.updateData = function (lineData, fromData, toData) {
 
-        var oldFromData = this._fromData;
-        var oldToData = this._toData;
         var oldLineData = this._lineData;
         var group = this.group;
-        var seriesModel = lineData.hostModel;
+        var LineCtor = this._ctor;
 
         lineData.diff(oldLineData)
             .add(function (idx) {
-                var linePoints = lineData.getItemLayout(idx);
-
-                var lineGroup = new graphic.Group();
-
-                var line = createLine(linePoints);
-                line.shape.percent = 0;
-                graphic.initProps(line, {
-                    shape: {
-                        percent: 1
-                    }
-                }, seriesModel);
-
-                lineGroup.add(line);
-
-                var label = new graphic.Text({
-                    name: 'label'
-                });
-                lineGroup.add(label);
-
-                if (fromData) {
-                    var symbolFrom = createSymbol('fromSymbol', fromData, idx);
-                    // symbols must added after line to make sure
-                    // it will be updated after line#update.
-                    // Or symbol position and rotation update in line#beforeUpdate will be one frame slow
-                    lineGroup.add(symbolFrom);
-                }
-                if (toData) {
-                    var symbolTo = createSymbol('toSymbol', toData, idx);
-                    lineGroup.add(symbolTo);
-                }
+                var lineGroup = new LineCtor(lineData, fromData, toData, idx);
 
-                // Update symbol position and rotation
-                lineGroup.beforeUpdate = updateSymbolBeforeLineUpdate;
                 lineData.setItemGraphicEl(idx, lineGroup);
 
                 group.add(lineGroup);
             })
             .update(function (newIdx, oldIdx) {
                 var lineGroup = oldLineData.getItemGraphicEl(oldIdx);
-                var line = lineGroup.childOfName('line');
-
-                var linePoints = lineData.getItemLayout(newIdx);
-                var target = {
-                    shape: {}
-                };
-                setLinePoints(target.shape, linePoints);
-
-                graphic.updateProps(line, target, seriesModel);
-
-                // Symbol changed
-                if (fromData) {
-                    var fromSymbolType = fromData.getItemVisual(newIdx, 'symbol');
-                    if (!oldFromData || fromSymbolType !== oldFromData.getItemVisual(oldIdx, 'symbol')) {
-                        var symbolFrom = createSymbol('fromSymbol', fromData, newIdx);
-                        lineGroup.remove(line.childOfName('fromSymbol'));
-                        lineGroup.add(symbolFrom);
-                    }
-                }
-                if (toData) {
-                    var toSymbolType = toData.getItemVisual(newIdx, 'symbol');
-                    // Symbol changed
-                    if (!oldToData || toSymbolType !== oldToData.getItemVisual(oldIdx, 'symbol')) {
-                        var symbolTo = createSymbol('toSymbol', toData, newIdx);
-                        lineGroup.remove(line.childOfName('toSymbol'));
-                        lineGroup.add(symbolTo);
-                    }
-                }
+                lineGroup.updateData(lineData, fromData, toData, newIdx);
 
                 lineData.setItemGraphicEl(newIdx, lineGroup);
 
@@ -223,48 +49,6 @@ define(function (require) {
             })
             .execute();
 
-        lineData.eachItemGraphicEl(function (lineGroup, idx) {
-            var line = lineGroup.childOfName('line');
-            var itemModel = lineData.getItemModel(idx);
-
-            var labelModel = itemModel.getModel('label.normal');
-            var textStyleModel = labelModel.getModel('textStyle');
-            var labelHoverModel = itemModel.getModel('label.emphasis');
-            var textStyleHoverModel = labelHoverModel.getModel('textStyle');
-
-            var defaultText = numberUtil.round(seriesModel.getData().getRawValue(idx));
-            line.setStyle(zrUtil.extend(
-                {
-                    stroke: lineData.getItemVisual(idx, 'color')
-                },
-                itemModel.getModel('lineStyle.normal').getLineStyle()
-            ));
-
-            var label = lineGroup.childOfName('label');
-            label.setStyle({
-                text: labelModel.get('show')
-                    ? seriesModel.getFormattedLabel(idx, 'normal') || defaultText
-                    : '',
-                textFont: textStyleModel.getFont(),
-                fill: textStyleModel.get('color') || lineData.getItemVisual(idx, 'color')
-            });
-            label.hoverStyle = {
-                text: labelHoverModel.get('show')
-                    ? seriesModel.getFormattedLabel(idx, 'emphasis') || defaultText
-                    : '',
-                textFont: textStyleModel.getFont(),
-                fill: textStyleHoverModel.get('color')
-            };
-            label.__textAlign = textStyleModel.get('align');
-            label.__textBaseline = textStyleModel.get('baseline');
-            label.__position = labelModel.get('position');
-
-            graphic.setHoverStyle(
-                line,
-                itemModel.getModel('lineStyle.emphasis').getLineStyle()
-            );
-        });
-
         this._lineData = lineData;
         this._fromData = fromData;
         this._toData = toData;
@@ -272,16 +56,9 @@ define(function (require) {
 
     lineDrawProto.updateLayout = function () {
         var lineData = this._lineData;
-        var fromData = this._fromData;
-        var toData = this._toData;
         lineData.eachItemGraphicEl(function (el, idx) {
-            var points = lineData.getItemLayout(idx);
-            var linePath = el.childOfName('line');
-            setLinePoints(linePath.shape, points);
-            linePath.dirty(true);
-            fromData && fromData.getItemGraphicEl(idx).attr('position', points[0]);
-            toData && toData.getItemGraphicEl(idx).attr('position', points[1]);
-        });
+            el.updateLayout(lineData, this._fromData, this._toData, idx);
+        }, this);
     };
 
     lineDrawProto.remove = function () {

src/chart/map/mapVisual.js

 define(function (require) {
     return function (ecModel) {
         ecModel.eachSeriesByType('map', function (seriesModel) {
-            var colorList = ecModel.get('color');
+            var colorList = seriesModel.get('color');
             var itemStyleModel = seriesModel.getModel('itemStyle.normal');
 
             var areaColor = itemStyleModel.get('areaColor');

src/chart/scatter/ScatterView.js

@@ -36,7 +36,7 @@ define(function (require) {
         },
 
         remove: function (ecModel, api) {
-            this._symbolDraw.remove(api, true);
+            this._symbolDraw && this._symbolDraw.remove(api, true);
         }
     });
 });
\ No newline at end of file

src/echarts.js

@@ -955,7 +955,9 @@ define(function (require) {
         zrUtil.createCanvas = creator;
     };
 
-    echarts.registerVisualCoding('echarts', require('./visual/seriesColor'));
+    echarts.registerVisualCoding('echarts', zrUtil.curry(
+        require('./visual/seriesColor'), '', 'itemStyle'
+    ));
     echarts.registerPreprocessor(require('./preprocessor/backwardCompat'));
 
     // Default action

src/util/number.js

@@ -31,7 +31,8 @@ define(function (require) {
         var sub = domain[1] - domain[0];
 
         if (sub === 0) {
-            return domain[0];
+            // FIXME
+            return range[0];
         }
         var t = (val - domain[0]) / sub;
 

src/visual/seriesColor.js

 define(function (require) {
     var Gradient = require('zrender/graphic/Gradient');
-    return function (ecModel) {
-        ecModel.eachRawSeries(function (seriesModel) {
-            var colorAccessPath = ['itemStyle', 'normal', 'color'];
+    return function (seriesType, styleType, ecModel) {
+        function encodeColor(seriesModel) {
+            var colorAccessPath = [styleType, 'normal', 'color'];
             var colorList = ecModel.get('color');
             var data = seriesModel.getData();
             var color = seriesModel.get(colorAccessPath) // Set in itemStyle
@@ -29,6 +29,8 @@ define(function (require) {
                     }
                 });
             }
-        });
+        }
+        seriesType ? ecModel.eachSeriesByType(seriesType, encodeColor)
+            : ecModel.eachSeries(encodeColor);
     };
 });
\ No newline at end of file