Component#name, Roam on map

src/action/geoRoam.js

+define(function (require) {
+
+    var echarts = require('../../echarts');
+    var actionInfo = {
+        type: 'geoRoam',
+        event: 'geoRoam',
+        update: 'updateView'
+    };
+
+    /**
+     * @payload
+     * @property {string} [component=series]
+     * @property {string} name Component name
+     * @property {number} [dx]
+     * @property {number} [dy]
+     * @property {number} [zoom]
+     * @property {number} [originX]
+     * @property {number} [originY]
+     */
+    echarts.registerAction(actionInfo, function (payload, ecModel) {
+        var componentType = payload.component || 'series';
+        ecModel.eachComponent(componentType, function (componentModel) {
+            if (componentModel.name === payload.name) {
+                var dx = payload.dx;
+                var dy = payload.dy;
+                var zoom = payload.zoom;
+                var geo = componentModel.coordinateSystem;
+                if (geo.type !== 'geo') {
+                    return;
+                }
+
+                var roamDetailModel = componentModel.getModel('roamDetail');
+                if (dx != null && dy != null) {
+                    var mapScale = geo.mapScale;
+
+                    var panX = (roamDetailModel.get('x') || 0) + dx / mapScale[0];
+                    var panY = (roamDetailModel.get('y') || 0) + dy / mapScale[1];
+
+                    componentModel.setRoamPan
+                        && componentModel.setRoamPan(panX, panY);
+
+                    geo && geo.setPan(panX, panY);
+
+                }
+                if (zoom != null && componentModel.setRoamZoom) {
+                    var previousZoom = roamDetailModel.get('zoom') || 1;
+
+                    zoom *= previousZoom;
+                    componentModel.setRoamZoom(zoom);
+
+                    geo && geo.setZoom(zoom);
+                }
+            }
+        });
+    });
+});
\ No newline at end of file

src/chart/bar/BarSeries.js

@@ -66,10 +66,7 @@ define(function(require) {
                     // 柱条边线圆角，单位px，默认为0
                     barBorderRadius: 0,
                     // 柱条边线线宽，单位px，默认为1
-                    barBorderWidth: 0,
-                    label: {
-                        show: false
-                    }
+                    barBorderWidth: 0
                 },
                 emphasis: {
                     // color: '各异',

src/chart/helper/DataSymbol.js

@@ -151,8 +151,6 @@ define(function (require) {
                                 symbolSize[0], symbolSize[1]
                             ) || {};
                         }
-                        var newColor = data.getItemVisual(newIdx, 'color');
-                        el.setColor(newColor);
 
                         // TODO Merge animateTo and attr methods into one
                         newTarget.position = point;
@@ -192,13 +190,16 @@ define(function (require) {
                 .execute();
 
             // Update common properties
-            var itemStyleAccessPath = ['itemStyle', 'normal'];
+            var normalStyleAccessPath = ['itemStyle', 'normal'];
+            var emphasisStyleAccessPath = [normalStyleAccessPath[0], 'emphasis'];
             data.eachItemGraphicEl(function (el, idx) {
                 var itemModel = data.getItemModel(idx);
-                var normalItemStyleModel = itemModel.getModel(itemStyleAccessPath);
+                var normalItemStyleModel = itemModel.getModel(normalStyleAccessPath);
                 var labelModel = itemModel.getModel('label.normal');
                 var color = data.getItemVisual(idx, 'color');
 
+                el.setColor(color);
+
                 zrUtil.extend(
                     el.style,
                     normalItemStyleModel.getItemStyle(['color'])
@@ -221,7 +222,7 @@ define(function (require) {
 
                 graphic.setHoverStyle(
                     el,
-                    itemModel.getModel('itemStyle.emphasis').getItemStyle()
+                    itemModel.getModel(emphasisStyleAccessPath).getItemStyle()
                 );
             }, this);
 

src/chart/map.js

@@ -6,6 +6,8 @@ define(function (require) {
 
     require('./map/MapView');
 
+    require('../action/geoRoam');
+
     echarts.registerLayout(require('./map/mapSymbolLayout'));
 
     echarts.registerVisualCoding('chart', require('./map/mapVisual'));

src/chart/map/MapSeries.js

@@ -134,6 +134,6 @@ define(function (require) {
                 roamDetail.x = x;
                 roamDetail.y = y;
             }
-         }
+        }
     })
 });
\ No newline at end of file

src/chart/map/MapView.js

@@ -3,18 +3,41 @@ define(function (require) {
     var zrUtil = require('zrender/core/util');
     var graphic = require('../../util/graphic');
 
+    var RoamController = require('../../component/helper/RoamController');
+
     require('../../echarts').extendChartView({
 
         type: 'map',
 
+        init: function (ecModel, api) {
+            var controller = new RoamController(api.getZr(), null, null);
+            this._controller = controller;
+        },
+
         render: function (mapModel, ecModel, api) {
-            this.group.removeAll();
+            var group = this.group;
+            var geo = mapModel.coordinateSystem;
+            group.removeAll();
 
             mapModel.needsDrawMap &&
                 this._renderArea(mapModel, ecModel, api);
 
             mapModel.get('showLegendSymbol') && ecModel.getComponent('legend')
                 && this._renderSymbols(mapModel, ecModel, api);
+
+            var controller = this._controller;
+            controller.off('pan')
+                .on('pan', function (dx, dy) {
+                    api.dispatch({
+                        type: 'geoRoam',
+                        // component: 'series',
+                        name: mapModel.name,
+                        dx: dx,
+                        dy: dy
+                    });
+                });
+
+            controller.rect = geo.getViewBox();
         },
 
         _renderArea: function (mapModel, ecModel, api) {
@@ -47,7 +70,7 @@ define(function (require) {
                 // Competitable with 2.0
                 var areaStylePath = 'areaStyle.color';
                 itemStyle.fill = itemStyleModel.get(areaStylePath);
-                hoverItemStyle.fill = hoverItemStyleModel.get(areaStylePath);
+                hoverItemStyle.fill = hoverItemStyleModel.get('areaColor');
 
                 var styleObj = zrUtil.defaults(
                     {

src/component/geo.js

@@ -3,4 +3,6 @@ define(function (require) {
     require('../coord/geo/geoCreator');
 
     require('./geo/GeoView');
+
+    require('../action/geoRoam');
 });
\ No newline at end of file

src/component/geo/GeoView.js

@@ -5,10 +5,17 @@ define(function (require) {
     var zrUtil = require('zrender/core/util');
     var graphic = require('../../util/graphic');
 
+    var RoamController = require('../helper/RoamController');
+
     return require('../../echarts').extendComponentView({
 
         type: 'geo',
 
+        init: function (ecModel, api) {
+            var controller = new RoamController(api.getZr(), null, null);
+            this._controller = controller;
+        },
+
         render: function (geoModel, ecModel, api) {
             this.group.removeAll();
 
@@ -55,6 +62,20 @@ define(function (require) {
 
                 mapGroup.add(regionGroup);
             });
+
+            var controller = this._controller;
+            controller.off('pan')
+                .on('pan', function (dx, dy) {
+                    api.dispatch({
+                        type: 'geoRoam',
+                        component: 'geo',
+                        name: geoModel.name,
+                        dx: dx,
+                        dy: dy
+                    });
+                });
+
+            controller.rect = geo.getViewBox();
         }
     });
 });
\ No newline at end of file

src/component/helper/RoamController.js

+define(function (require) {
+
+    var Eventful = require('zrender/mixin/Eventful');
+    var zrUtil = require('zrender/core/util');
+
+    function mousedown(e) {
+        var x = e.offsetX;
+        var y = e.offsetY;
+        var rect = this.rect;
+        if (rect && rect.contain(x, y)) {
+            this._x = x;
+            this._y = y;
+            this._dragging = true;
+        }
+    }
+
+    function mousemove(e) {
+        if (this._dragging) {
+            var x = e.offsetX;
+            var y = e.offsetY;
+
+            var dx = x - this._x;
+            var dy = y - this._y;
+
+            this._x = x;
+            this._y = y;
+
+            var target = this.target;
+
+            if (target) {
+                var pos = target.position;
+                var scale = target.scale;
+                pos[0] += dx * scale[0];
+                pos[1] += dy * scale[1];
+                target.dirty();
+            }
+
+            this.trigger('pan', dx, dy);
+        }
+    }
+
+    function mouseup(e) {
+        this._dragging =false;
+    }
+
+    function mousewheel(e) {
+        var x = e.offsetX;
+        var y = e.offsetY;
+        var rect = this.rect;
+        if (rect && rect.contain(x, y)) {
+            
+        }
+    }
+
+    /**
+     * @param {module:zrender/zrender~ZRender} zr
+     * @param {module:zrender/Element} target
+     * @param {module:zrender/core/BoundingRect} rect
+     */
+    function RoamController(zr, target, rect) {
+
+        /**
+         * @type {module:zrender/Element}
+         */
+        this.target = target;
+
+        /**
+         * @type {module:zrender/core/BoundingRect}
+         */
+        this.rect = rect;
+
+        zr.on('mousedown', mousedown, this);
+        zr.on('mousemove', mousemove, this);
+        zr.on('mouseup', mouseup, this);
+        zr.on('mousewheel', mousewheel, this);
+
+        Eventful.call(this);
+    }
+
+    zrUtil.mixin(RoamController, Eventful);
+
+    return RoamController;
+});
\ No newline at end of file

src/coord/geo/Geo.js

@@ -8,6 +8,8 @@ define(function (require) {
 
     var BoundingRect = require('zrender/core/BoundingRect');
 
+    var v2Copy = vector.copy;
+
     function Geo(name, geoJson) {
 
         this.name = name;
@@ -22,6 +24,27 @@ define(function (require) {
         Transformable.call(this);
 
         this._nameCoordMap = {};
+
+        /**
+         * @param Array.<number>
+         */
+        this.mapPosition = [0, 0];
+
+        /**
+         * @param Array.<number>
+         */
+        this.mapScale = [1, 1];
+
+        /**
+         * @param Array.<number>
+         * @private
+         */
+        this._pan = [0, 0];
+        /**
+         * @param number
+         * @private
+         */
+        this._zoom = 1;
     };
 
     Geo.prototype = {
@@ -80,12 +103,12 @@ define(function (require) {
 
         /**
          * Transformed to particular position and size
-         * @param {number} cx
-         * @param {number} cy
+         * @param {number} x
+         * @param {number} y
          * @param {number} width
          * @param {number} height
          */
-        transformTo: function (cx, cy, width, height) {
+        transformTo: function (x, y, width, height) {
             var rect = this.getBoundingRect();
 
             rect = rect.clone();
@@ -93,17 +116,75 @@ define(function (require) {
             rect.y = -rect.y - rect.height;
 
             this.transform = rect.calculateTransform(
-                new BoundingRect(cx - width / 2, cy - height / 2, width, height)
+                new BoundingRect(x, y, width, height)
             );
 
             this.decomposeTransform();
 
             var scale = this.scale;
+
             scale[1] = -scale[1];
 
+            v2Copy(this.mapPosition, this.position);
+            v2Copy(this.mapScale, scale);
+
+            this._updateTransform();
+        },
+
+        /**
+         * @param {number} x
+         * @param {number} y
+         * @param {number} width
+         * @param {number} height
+         */
+        setViewBox: function (x, y, width, height) {
+            this._viewBox = new BoundingRect(x, y, width, height);
+        },
+
+        /**
+         * @param {number} x
+         * @param {number} y
+         */
+        setPan: function (x, y) {
+            var pan = this._pan;
+            pan[0] = x;
+            pan[1] = y;
+
+            this._updateTransform();
+        },
+
+        /**
+         * @param {number} zoom
+         */
+        setZoom: function (zoom) {
+            this._zoom = zoom;
+
+            this._updateTransform();
+        },
+
+        /**
+         * Update transform from roam and mapLocation
+         * @private
+         */
+        _updateTransform: function () {
+            var mapScale = this.mapScale;
+
+            var pan = this._pan;
+
+            // Update transform position
+            pan = [
+                pan[0] * mapScale[0],
+                pan[1] * mapScale[1]
+            ];
+            vector.add(this.position, this.mapPosition, pan);
+            vector.scale(this.scale, mapScale, this._zoom);
+
             this.updateTransform();
         },
 
+        /**
+         * @return {module:zrender/core/BoundingRect}
+         */
         getBoundingRect: function () {
             if (this._rect) {
                 return this._rect;
@@ -120,6 +201,13 @@ define(function (require) {
             return this._rect = rect || new BoundingRect(0, 0, 0, 0);
         },
 
+        /**
+         * @return {module:zrender/core/BoundingRect}
+         */
+        getViewBox: function () {
+            return this._viewBox;
+        },
+
         /**
          * If contain point
          * @param {Array.<number>} point
@@ -134,7 +222,6 @@ define(function (require) {
          * @return {boolean}
          */
         containData: function (data) {
-
         },
 
         /**

src/coord/geo/GeoModel.js

@@ -29,6 +29,13 @@ define(function (require) {
             // Map type
             map: '',
 
+            // 在 roam 开启的时候使用
+            roamDetail: {
+                x: 0,
+                y: 0,
+                zoom: 1
+            },
+
             itemStyle: {
                 normal: {
                     // color: 各异,
@@ -52,6 +59,19 @@ define(function (require) {
                     }
                 }
             }
+        },
+
+        setRoamZoom: function (zoom) {
+            var roamDetail = this.option.roamDetail;
+            roamDetail && (roamDetail.zoom = zoom);
+        },
+
+        setRoamPan: function (x, y) {
+            var roamDetail = this.option.roamDetail;
+            if (roamDetail) {
+                roamDetail.x = x;
+                roamDetail.y = y;
+            }
         }
     });
 });
\ No newline at end of file

src/coord/geo/geoCreator.js

@@ -10,12 +10,13 @@ define(function (require) {
 
     /**
      * Resize method bound to the geo
-     * @param {module:echarts/coord/geo/GeoModel|module:echarts/chart/map/MapModel} locModel
+     * @param {module:echarts/coord/geo/GeoModel|module:echarts/chart/map/MapModel} geoModel
      * @param {module:echarts/ExtensionAPI} api
      */
-    var resizeGeo = function (locModel, api) {
-        if (locModel.type === 'series.map') {
-            locModel = locModel.getModel('mapLocation');
+    var resizeGeo = function (geoModel, api) {
+        var locModel = geoModel;
+        if (geoModel.type === 'series.map') {
+            locModel = geoModel.getModel('mapLocation');
         }
 
         var x = locModel.get('x');
@@ -66,7 +67,19 @@ define(function (require) {
                 break;
         }
 
-        this.transformTo(cx, cy, width, height);
+        x = cx - width / 2;
+        y = cy - height / 2;
+        this.transformTo(x, y, width, height);
+        this.setViewBox(x, y, width, height);
+
+        var roamDetailModel = geoModel.getModel('roamDetail');
+
+        var panX = roamDetailModel.get('x') || 0;
+        var panY = roamDetailModel.get('y') || 0;
+        var zoom = roamDetailModel.get('zoom') || 1;
+
+        this.setPan(panX, panY);
+        this.setZoom(zoom);
     }
 
     var geoCreator = {

src/model/Component.js

@@ -21,6 +21,11 @@ define(function(require) {
 
         type: 'component',
 
+        /**
+         * @readOnly
+         */
+        name: '',
+
         /**
          * @type {Object}
          * @protected
@@ -47,7 +52,7 @@ define(function(require) {
          */
         uid: null,
 
-        init: function () {
+        init: function (option, parentModel, ecModel, dependentModels, index) {
             this.mergeDefaultAndTheme(this.option, this.ecModel);
         },
 
@@ -80,10 +85,16 @@ define(function(require) {
     // Reset ComponentModel.extend, add preConstruct.
     componentUtil.enableClassExtend(
         ComponentModel,
-        function (option, parentModel, ecModel, dependentModels) {
+        function (option, parentModel, ecModel, dependentModels, index) {
             this.ecModel = ecModel;
             this.dependentModels = dependentModels;
             this.uid = componentUtil.getUID('componentModel');
+
+            var componentName = option.name;
+            if (componentName == null) {
+                componentName = this.type + '' + index;
+            }
+            this.name = componentName + '';
         }
     );
 

src/model/Series.js

@@ -18,11 +18,6 @@ define(function(require) {
          */
         seriesIndex: 0,
 
-        /**
-         * @readOnly
-         */
-        name: '',
-
         // coodinateSystem will be injected in the echarts/CoordinateSystem
         coordinateSystem: null,
 
@@ -47,12 +42,6 @@ define(function(require) {
 
             this.mergeDefaultAndTheme(option, ecModel);
 
-            var seriesName = this.get('name');
-            if (seriesName == null) {
-                seriesName = this.get('type') + '' + seriesIndex;
-            }
-            this.name = seriesName + '';
-
             /**
              * @type {module:echarts/data/List|module:echarts/data/Tree|module:echarts/data/Graph}
              * @private