Merge branch 'dev-3.0.0' of https://github.com/ecomfe/echarts into dev-3.0.0

src/chart/effectScatter.js

+define(function (require) {
+
+    var zrUtil = require('zrender/core/util');
+    var echarts = require('../echarts');
+
+    require('./effectScatter/EffectScatterSeries');
+    require('./effectScatter/EffectScatterView');
+
+    echarts.registerVisualCoding('chart', zrUtil.curry(
+        require('../visual/symbol'), 'effectScatter', 'circle', null
+    ));
+    echarts.registerLayout(zrUtil.curry(
+        require('../layout/points'), 'effectScatter'
+    ));
+});
\ No newline at end of file

src/chart/effectScatter/EffectScatterSeries.js

+define(function (require) {
+
+    'use strict';
+
+    var createListFromArray = require('../helper/createListFromArray');
+    var SeriesModel = require('../../model/Series');
+
+    return SeriesModel.extend({
+
+        type: 'series.effectScatter',
+
+        dependencies: ['grid', 'polar'],
+
+        getInitialData: function (option, ecModel) {
+            var list = createListFromArray(option.data, this, ecModel);
+            return list;
+        },
+
+        defaultOption: {
+            coordinateSystem: 'cartesian2d',
+            zlevel: 0,                  // 一级层叠
+            z: 2,                       // 二级层叠
+            legendHoverLink: true,
+
+            effectType: 'ripple',
+
+            // When to show the effect, option: 'render'|'emphasis'
+            showEffectOn: 'render',
+            // Period of effect
+            effectPeriod: 4000,
+
+            // Ripple effect config
+            rippleEffect: {
+                // Scale of ripple
+                scale: 2.5,
+                // Brush type can be fill or stroke
+                brushType: 'fill'
+            },
+
+            // 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,
+
+            // itemStyle: {
+            //     normal: {
+            //         opacity: 1
+            //     }
+            // }
+        }
+    });
+});
\ No newline at end of file

src/chart/effectScatter/EffectScatterView.js

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

src/chart/graph/GraphView.js

@@ -135,6 +135,7 @@ define(function (require) {
 
             data.graph.eachEdge(function (edge) {
                 var lineGroup = edge.getGraphicEl();
+                // FIXME
                 lineGroup.childOfName('line').setStyle(
                     'lineWidth',
                     edge.__lineWidth * edgeScale / groupScale

src/chart/helper/EffectSymbol.js

+/**
+ * Symbol with ripple effect
+ * @module echarts/chart/helper/EffectSymbol
+ */
+define(function (require) {
+
+    var zrUtil = require('zrender/core/util');
+    var symbolUtil = require('../../util/symbol');
+    var graphic = require('../../util/graphic');
+    var Symbol = require('./Symbol');
+    var Group = graphic.Group;
+
+    var EFFECT_RIPPLE_NUMBER = 3;
+
+    function normalizeSymbolSize(symbolSize) {
+        if (!zrUtil.isArray(symbolSize)) {
+            symbolSize = [+symbolSize, +symbolSize];
+        }
+        return symbolSize;
+    }
+    /**
+     * @constructor
+     * @param {module:echarts/data/List} data
+     * @param {number} idx
+     * @extends {module:zrender/graphic/Group}
+     */
+    function EffectSymbol(data, idx) {
+        Group.call(this);
+
+        var symbol = new Symbol(data, idx);
+        var rippleGroup = new Group();
+        this.add(symbol);
+        this.add(rippleGroup);
+
+        rippleGroup.beforeUpdate = function () {
+            this.attr(symbol.getScale());
+        };
+        this.updateData(data, idx);
+    }
+
+    var effectSymbolProto = EffectSymbol.prototype;
+
+    effectSymbolProto.stopEffectAnimation = function () {
+        this.childAt(1).removeAll();
+    };
+
+    effectSymbolProto.startEffectAnimation = function (period, brushType, rippleScale) {
+        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
+            );
+            ripplePath.attr({
+                style: {
+                    stroke: brushType === 'stroke' ? color : null,
+                    fill: brushType === 'fill' ? color : null,
+                    strokeNoScale: true
+                },
+                z2: 99,
+                scale: [1, 1]
+            });
+
+            var delay = -i / EFFECT_RIPPLE_NUMBER * period + randomOffset;
+            // TODO Configurable period
+            ripplePath.animate('', true)
+                .when(period, {
+                    scale: [rippleScale, rippleScale]
+                })
+                .delay(delay)
+                .start();
+            ripplePath.animateStyle(true)
+                .when(period, {
+                    opacity: 0
+                })
+                .delay(delay)
+                .start();
+
+            rippleGroup.add(ripplePath);
+        }
+    };
+
+    /**
+     * Highlight symbol
+     */
+    effectSymbolProto.highlight = function () {
+        this.trigger('emphasis');
+    };
+
+    /**
+     * Downplay symbol
+     */
+    effectSymbolProto.downplay = function () {
+        this.trigger('normal');
+    };
+
+    /**
+     * Update symbol properties
+     * @param  {module:echarts/data/List} data
+     * @param  {number} idx
+     */
+    effectSymbolProto.updateData = function (data, idx) {
+        var seriesModel = data.hostModel;
+
+        this.childAt(0).updateData(data, idx);
+
+        var rippleGroup = this.childAt(1);
+        var itemModel = data.getItemModel(idx);
+        var symbolType = data.getItemVisual(idx, 'symbol');
+        var symbolSize = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
+        var color = data.getItemVisual(idx, 'color');
+
+        rippleGroup.attr('scale', symbolSize);
+
+        rippleGroup.traverse(function (ripplePath) {
+            ripplePath.attr({
+                fill: color
+            });
+        });
+
+        this._symbolType = symbolType;
+        this._color = color;
+
+        var showEffectOn = seriesModel.get('showEffectOn');
+        var rippleScale = itemModel.get('rippleEffect.scale');
+        var brushType = itemModel.get('rippleEffect.brushType');
+        var effectPeriod = itemModel.get('effectPeriod');
+
+        this.stopEffectAnimation();
+        if (showEffectOn === 'render') {
+            this.startEffectAnimation(effectPeriod, brushType, rippleScale);
+        }
+        var symbol = this.childAt(0);
+        function onEmphasis() {
+            symbol.trigger('emphasis');
+            if (showEffectOn !== 'render') {
+                this.startEffectAnimation();
+            }
+        }
+        function onNormal() {
+            symbol.trigger('normal');
+            if (showEffectOn !== 'render') {
+                this.stopEffectAnimation();
+            }
+        }
+        this.on('mouseover', onEmphasis, this)
+            .on('mouseout', onNormal, this)
+            .on('emphasis', onEmphasis, this)
+            .on('normal', onNormal, this);
+    };
+
+    zrUtil.inherits(EffectSymbol, Group);
+
+    return EffectSymbol;
+});
\ No newline at end of file

src/chart/helper/Symbol.js

+/**
+ * @module echarts/chart/helper/Symbol
+ */
 define(function (require) {
 
     var zrUtil = require('zrender/core/util');
@@ -13,6 +16,9 @@ define(function (require) {
 
     /**
      * @constructor
+     * @alias {module:echarts/chart/helper/Symbol}
+     * @param {module:echarts/data/List} data
+     * @param {number} idx
      * @extends {module:zrender/graphic/Group}
      */
     function Symbol(data, idx) {
@@ -24,6 +30,7 @@ define(function (require) {
     var symbolProto = Symbol.prototype;
 
     symbolProto._createSymbol = function (symbolType, data, idx) {
+        // Remove paths created before
         this.removeAll();
 
         var seriesModel = data.hostModel;
@@ -32,12 +39,14 @@ define(function (require) {
         var symbolPath = symbolUtil.createSymbol(
             symbolType, -0.5, -0.5, 1, 1, color
         );
-        symbolPath.style.strokeNoScale = true;
 
         symbolPath.attr({
-            z2: 100
+            style: {
+                strokeNoScale: true
+            },
+            z2: 100,
+            scale: [0, 0]
         });
-        symbolPath.attr('scale', [0, 0]);
 
         var size = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
 
@@ -50,6 +59,23 @@ define(function (require) {
         this.add(symbolPath);
     };
 
+    /**
+     * Stop animation
+     * @param {boolean} toLastFrame
+     */
+    symbolProto.stopSymbolAnimation = function (toLastFrame) {
+        this.childAt(0).stopAnimation(toLastFrame);
+    };
+
+    /**
+     * Get scale(aka, current symbol size).
+     * Including the change caused by animation
+     * @param {Array.<number>} toLastFrame
+     */
+    symbolProto.getScale = function () {
+        return this.childAt(0).scale;
+    };
+
     /**
      * Highlight symbol
      */

src/chart/helper/SymbolDraw.js

@@ -29,13 +29,15 @@ define(function (require) {
         var seriesModel = data.hostModel;
         var oldData = this._data;
 
+        var SymbolCtor = this._symbolCtor;
+
         data.diff(oldData)
             .add(function (newIdx) {
                 if (
                     data.hasValue(newIdx) && !(isIgnore && isIgnore(newIdx))
                     && data.getItemVisual(newIdx, 'symbol') !== 'none'
                 ) {
-                    var symbolEl = new Symbol(data, newIdx);
+                    var symbolEl = new SymbolCtor(data, newIdx);
                     symbolEl.attr('position', data.getItemLayout(newIdx));
                     data.setItemGraphicEl(newIdx, symbolEl);
                     group.add(symbolEl);
@@ -52,7 +54,7 @@ define(function (require) {
                 }
                 var point = data.getItemLayout(newIdx);
                 if (!symbolEl) {
-                    symbolEl = new Symbol(data, newIdx);
+                    symbolEl = new SymbolCtor(data, newIdx);
                     symbolEl.attr('position', point);
                 }
                 else {

src/chart/line/LineView.js

@@ -241,7 +241,7 @@ define(function(require) {
                 // Stop symbol animation and sync with line points
                 // FIXME performance?
                 data.eachItemGraphicEl(function (el) {
-                    el.stopAnimation(true);
+                    el.stopSymbolAnimation(true);
                 });
 
                 // In the case data zoom triggerred refreshing frequently
@@ -328,8 +328,8 @@ define(function(require) {
                     symbol.__temp = true;
                     data.setItemGraphicEl(dataIndex, symbol);
 
-                    // Stop scale animation;
-                    symbol.childAt(0).stopAnimation(true);
+                    // Stop scale animation
+                    symbol.stopAnimation(true);
 
                     this.group.add(symbol);
                 }

src/chart/scatter/ScatterSeries.js

@@ -13,10 +13,6 @@ define(function (require) {
 
         getInitialData: function (option, ecModel) {
             var list = createListFromArray(option.data, this, ecModel);
-            // Not holding the data anymore so it can be removed in momory
-            // PENDING
-            // option.data = null;
-
             return list;
         },
 
@@ -34,6 +30,9 @@ define(function (require) {
             // Polar coordinate system
             polarIndex: 0,
 
+            // Geo coordinate system
+            geoIndex: 0,
+
             // symbol: null,        // 图形类型
             symbolSize: 10,          // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
             // symbolRotate: null,  // 图形旋转控制

src/util/symbol.js

@@ -231,7 +231,7 @@ define(function(require) {
     };
 
     var symbolBuildProxies = {};
-    for (var name in  symbolCtors) {
+    for (var name in symbolCtors) {
         symbolBuildProxies[name] = new symbolCtors[name]();
     }
 

test/graph.html

@@ -31,8 +31,6 @@
                 'echarts/component/dataRange'
             ], function (echarts, gexf) {
 
-                echarts.registerMap('china');
-
                 var chart = echarts.init(document.getElementById('main'), null, {
                     renderer: 'canvas'
                 });

test/loading.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+            #main {
+                background: #fff;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'));
+                chart.showLoading();
+                window.onresize = chart.resize;
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file

test/map.html

@@ -28,9 +28,7 @@
             ], function (echarts) {
 
                 require(['map/js/china'], function () {
-                    var chart = echarts.init(document.getElementById('main'), null, {
-                        renderer: 'canvas'
-                    });
+                    var chart = echarts.init(document.getElementById('main'));
 
                     var itemStyle = {
                         normal:{
@@ -70,7 +68,6 @@
                                 name: 'iphone3',
                                 type: 'map',
                                 map: 'china',
-                                roam: true,
                                 itemStyle: itemStyle,
                                 showLegendSymbol: true,
                                 label: {