Add geoLine

src/chart/effectScatter/EffectScatterSeries.js

@@ -18,8 +18,8 @@ define(function (require) {
 
         defaultOption: {
             coordinateSystem: 'cartesian2d',
-            zlevel: 0,                  // 一级层叠
-            z: 2,                       // 二级层叠
+            zlevel: 0,
+            z: 2,
             legendHoverLink: true,
 
             effectType: 'ripple',

src/chart/geoLine.js

+define(function (require) {
+
+    require('./geoLine/GeoLineSeries');
+    require('./geoLine/GeoLineView');
+
+    require('../echarts').registerLayout(
+        require('./geoLine/geoLineLayout')
+    );
+});
\ No newline at end of file

src/chart/geoLine/GeoLineSeries.js

+define(function (require) {
+
+    'use strict';
+
+    var SeriesModel = require('../../model/Series');
+    var List = require('../../data/List');
+    var zrUtil = require('zrender/core/util');
+
+    return SeriesModel.extend({
+
+        type: 'series.geoLine',
+
+        dependencies: ['grid', 'polar'],
+
+        getInitialData: function (option, ecModel) {
+            var fromDataArr = [];
+            var toDataArr = [];
+            var lineDataArr = [];
+            zrUtil.each(option.data, function (opt) {
+                fromDataArr.push(opt[0]);
+                toDataArr.push(opt[1]);
+                lineDataArr.push(zrUtil.extend(
+                    zrUtil.extend({}, zrUtil.isArray(opt[0]) ? null : opt[0]),
+                    zrUtil.isArray(opt[1]) ? null : opt[1]
+                ));
+            });
+
+            var fromData = new List(['lng', 'lat'], this);
+            var toData = new List(['lng', 'lat'], this);
+            var lineData = new List(['value'], this);
+
+            fromData.initData(fromDataArr, null, 'geoCoord');
+            toData.initData(toDataArr, null, 'geoCoord');
+            lineData.initData(lineDataArr);
+
+            this.fromData = fromData;
+            this.toData = toData;
+
+            return lineData;
+        },
+
+        defaultOption: {
+            coordinateSystem: 'geo',
+            zlevel: 0,
+            z: 2,
+            legendHoverLink: true,
+
+            hoverAnimation: true,
+            // Cartesian coordinate system
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+
+            // Polar coordinate system
+            polarIndex: 0,
+
+            // Geo coordinate system
+            geoIndex: 0,
+
+            // symbol: null,        // 图形类型
+            symbolSize: 10,          // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
+            // symbolRotate: null,  // 图形旋转控制
+
+            large: false,
+            // Available when large is true
+            largeThreshold: 2000,
+
+            // label: {
+                // normal: {
+                    // show: false
+                    // distance: 5,
+                    // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                    // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                    //           'inside'|'left'|'right'|'top'|'bottom'
+                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+            //     }
+            // },
+            // itemStyle: {
+            //     normal: {
+            //     }
+            // },
+            lineStyle: {
+                normal: {
+                    opacity: 0.5
+                }
+            }
+        }
+    });
+});
\ No newline at end of file

src/chart/geoLine/GeoLineView.js

+define(function (require) {
+
+    var LineDraw = require('../helper/LineDraw');
+
+    require('../../echarts').extendChartView({
+
+        type: 'geoLine',
+
+        init: function () {
+            this._lineDraw = new LineDraw();
+        },
+
+        render: function (seriesModel, ecModel, api) {
+            var data = seriesModel.getData();
+            var lineDraw = this._lineDraw;
+            this.group.add(lineDraw.group);
+
+            lineDraw.updateData(data);
+        },
+
+        updateLayout: function () {
+            this._lineDraw.updateLayout();
+        },
+
+        remove: function (ecModel, api) {
+            this._lineDraw.remove(api, true);
+        }
+    });
+});
\ No newline at end of file

src/chart/geoLine/geoLineLayout.js

+define(function (require) {
+
+    return function (ecModel) {
+        ecModel.eachSeriesByType('geoLine', function (seriesModel) {
+            var coordSys = seriesModel.coordinateSystem;
+            var fromData = seriesModel.fromData;
+            var toData = seriesModel.toData;
+            var lineData = seriesModel.getData();
+
+            fromData.each(['lng', 'lat'], function (lng, lat, idx) {
+                fromData.setItemLayout(idx, coordSys.dataToPoint([lng, lat]));
+            });
+            toData.each(['lng', 'lat'], function (lng, lat, idx) {
+                toData.setItemLayout(idx, coordSys.dataToPoint([lng, lat]));
+            });
+            lineData.each(function (idx) {
+                var p1 = fromData.getItemLayout(idx);
+                var p2 = toData.getItemLayout(idx);
+                var curveness = lineData.getItemModel(idx).get('lineStyle.normal.curveness');
+                var cp1;
+                if (curveness > 0) {
+                    cp1 = [
+                        (p1[0] + p2[0]) / 2 - (p1[1] - p2[1]) * curveness,
+                        (p1[1] + p2[1]) / 2 - (p2[0] - p1[0]) * curveness
+                    ];
+                }
+                lineData.setItemLayout(idx, [p1, p2, cp1]);
+            });
+        });
+    };
+});
\ No newline at end of file

src/chart/graph/GraphView.js

@@ -75,7 +75,7 @@ define(function (require) {
             });
 
             this._nodeScaleRatio = seriesModel.get('nodeScaleRatio');
-            this._edgeScaleRatio = seriesModel.get('edgeScaleRatio');
+            // this._edgeScaleRatio = seriesModel.get('edgeScaleRatio');
 
             this._updateNodeAndLinkScale();
 
@@ -117,13 +117,13 @@ define(function (require) {
 
             var group = this.group;
             var nodeScaleRatio = this._nodeScaleRatio;
-            var edgeScaleRatio = this._edgeScaleRatio;
+            // var edgeScaleRatio = this._edgeScaleRatio;
 
             // Assume scale aspect is 1
             var groupScale = group.scale[0];
 
             var nodeScale = (groupScale - 1) * nodeScaleRatio + 1;
-            var edgeScale = (groupScale - 1) * edgeScaleRatio + 1;
+            // var edgeScale = (groupScale - 1) * edgeScaleRatio + 1;
             var invScale = [
                 nodeScale / groupScale,
                 nodeScale / groupScale
@@ -132,15 +132,14 @@ define(function (require) {
             data.eachItemGraphicEl(function (el, idx) {
                 el.attr('scale', invScale);
             });
-
-            data.graph.eachEdge(function (edge) {
-                var lineGroup = edge.getGraphicEl();
-                // FIXME
-                lineGroup.childOfName('line').setStyle(
-                    'lineWidth',
-                    edge.__lineWidth * edgeScale / groupScale
-                );
-            });
+            // data.graph.eachEdge(function (edge) {
+            //     var lineGroup = edge.getGraphicEl();
+            //     // FIXME
+            //     lineGroup.childOfName('line').setStyle(
+            //         'lineWidth',
+            //         edge.__lineWidth * edgeScale / groupScale
+            //     );
+            // });
         },
 
         updateLayout: function (seriesModel, ecModel) {

src/chart/graph/simpleLayout.js

@@ -21,11 +21,10 @@ define(function (require) {
                     var p1 = edge.node1.getLayout();
                     var p2 = edge.node2.getLayout();
                     var cp1;
-                    var inv = 1;
                     if (curveness > 0) {
                         cp1 = [
-                            (p1[0] + p2[0]) / 2 - inv * (p1[1] - p2[1]) * curveness,
-                            (p1[1] + p2[1]) / 2 - inv * (p2[0] - p1[0]) * curveness
+                            (p1[0] + p2[0]) / 2 - (p1[1] - p2[1]) * curveness,
+                            (p1[1] + p2[1]) / 2 - (p2[0] - p1[0]) * curveness
                         ];
                     }
                     edge.setLayout([p1, p2, cp1]);

src/chart/helper/EffectSymbol.js

@@ -44,14 +44,12 @@ define(function (require) {
         this.childAt(1).removeAll();
     };
 
-    effectSymbolProto.startEffectAnimation = function (period, brushType, rippleScale) {
+    effectSymbolProto.startEffectAnimation = function (period, brushType, rippleScale, effectOffset) {
         var symbolType = this._symbolType;
         var color = this._color;
 
         var rippleGroup = this.childAt(1);
 
-        var randomOffset = -Math.random() * period;
-
         for (var i = 0; i < EFFECT_RIPPLE_NUMBER; i++) {
             var ripplePath = symbolUtil.createSymbol(
                 symbolType, -0.5, -0.5, 1, 1, color
@@ -66,7 +64,7 @@ define(function (require) {
                 scale: [1, 1]
             });
 
-            var delay = -i / EFFECT_RIPPLE_NUMBER * period + randomOffset;
+            var delay = -i / EFFECT_RIPPLE_NUMBER * period + effectOffset;
             // TODO Configurable period
             ripplePath.animate('', true)
                 .when(period, {
@@ -130,16 +128,21 @@ define(function (require) {
         var rippleScale = itemModel.get('rippleEffect.scale');
         var brushType = itemModel.get('rippleEffect.brushType');
         var effectPeriod = itemModel.get('effectPeriod');
+        var effectOffset = idx / data.count();
 
         this.stopEffectAnimation();
         if (showEffectOn === 'render') {
-            this.startEffectAnimation(effectPeriod, brushType, rippleScale);
+            this.startEffectAnimation(
+                effectPeriod, brushType, rippleScale, effectOffset
+            );
         }
         var symbol = this.childAt(0);
         function onEmphasis() {
             symbol.trigger('emphasis');
             if (showEffectOn !== 'render') {
-                this.startEffectAnimation();
+                this.startEffectAnimation(
+                    effectPeriod, brushType, rippleScale, effectOffset
+                );
             }
         }
         function onNormal() {

src/chart/helper/LineDraw.js

@@ -3,11 +3,12 @@
  */
 define(function (require) {
 
-    var graphic = require('../../util/graphic');
     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(
@@ -39,24 +40,29 @@ define(function (require) {
     }
 
     function createLine(points) {
-        var line = new graphic[points[2] ? 'BezierCurve' : 'Line']({
-            name: 'line',
-            shape: {
-                x1: points[0][0],
-                y1: points[0][1],
-                x2: points[1][0],
-                y2: points[1][1]
-            }
+        var line = new LinePath({
+            name: 'line'
         });
-        if (points[2]) {
-            line.setShape({
-                cpx1: points[2][0],
-                cpy1: points[2][1]
-            });
-        }
+        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';
     }
@@ -182,22 +188,10 @@ define(function (require) {
                 var line = lineGroup.childOfName('line');
 
                 var linePoints = lineData.getItemLayout(newIdx);
-                var p1 = linePoints[0];
-                var p2 = linePoints[1];
-                var cp1 = linePoints[2];
                 var target = {
-                    shape: {
-                        x1: p1[0],
-                        y1: p1[1],
-                        x2: p2[0],
-                        y2: p2[1],
-                        percent: 1
-                    }
+                    shape: {}
                 };
-                if (cp1) {
-                    target.shape.cpx1 = cp1[0];
-                    target.shape.cpy1 = cp1[1];
-                }
+                setLinePoints(target.shape, linePoints);
 
                 graphic.updateProps(line, target, seriesModel);
 
@@ -239,7 +233,7 @@ define(function (require) {
             var textStyleHoverModel = labelHoverModel.getModel('textStyle');
 
             var defaultText = numberUtil.round(seriesModel.getData().getRawValue(idx));
-            line.setStyle(zrUtil.defaults(
+            line.setStyle(zrUtil.extend(
                 {
                     stroke: lineData.getItemVisual(idx, 'color')
                 },
@@ -277,7 +271,17 @@ 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]);
+        });
     };
 
     lineDrawProto.remove = function () {

src/chart/helper/LinePath.js

+/**
+ * Line path for bezier and straight line draw
+ */
+define(function (require) {
+    var graphic = require('../../util/graphic');
+
+    var straightLineProto = graphic.Line.prototype;
+    var bezierCurveProto = graphic.BezierCurve.prototype;
+
+    return graphic.extendShape({
+
+        type: 'ec-line',
+
+        style: {
+            stroke: '#000',
+            fill: null
+        },
+
+        shape: {
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: 0,
+            percent: 1,
+            cpx1: null,
+            cpy1: null
+        },
+
+        buildPath: function (ctx, shape) {
+            (shape.cpx1 == null || shape.cpy1 == null
+                ? straightLineProto : bezierCurveProto).buildPath(ctx, shape);
+        },
+
+        pointAt: function (t) {
+            var shape = this.shape;
+            return shape.cpx1 == null || shape.cpy1 == null
+                ? straightLineProto.pointAt.call(this, t)
+                : bezierCurveProto.pointAt.call(this, t);
+        }
+    });
+});
\ No newline at end of file

src/chart/map/backwardCompat.js

@@ -56,11 +56,12 @@ define(function (require) {
                     return dataOpt;
                 });
                 // Convert map series which only has markPoint without data to scatter series
+                // FIXME
                 if (!(seriesOpt.data && seriesOpt.data.length)) {
-
                     if (!option.geo) {
                         option.geo = [];
                     }
+
                     // Use same geo if multiple map series has same map type
                     var geoOpt = newCreatedGeoOptMap[seriesOpt.map];
                     if (!geoOpt) {
@@ -69,7 +70,7 @@ define(function (require) {
                     }
 
                     var scatterSeries = seriesOpt.markPoint;
-                    scatterSeries.type = 'scatter';
+                    scatterSeries.type = option.effect && option.effect.show ? 'effectScatter' : 'scatter';
                     scatterSeries.coordinateSystem = 'geo';
                     scatterSeries.geoIndex = zrUtil.indexOf(option.geo, geoOpt);
                     scatterSeries.name = seriesOpt.name;

src/chart/scatter/ScatterSeries.js

@@ -18,8 +18,8 @@ define(function (require) {
 
         defaultOption: {
             coordinateSystem: 'cartesian2d',
-            zlevel: 0,                  // 一级层叠
-            z: 2,                       // 二级层叠
+            zlevel: 0,
+            z: 2,
             legendHoverLink: true,
 
             hoverAnimation: true,