Merge branch 'master' of https://github.com/pissang/echarts-next

src/action/geoRoam.js

+define(function (require) {
+
+    var echarts = require('../../echarts');
+    var actionInfo = {
+        type: 'geoRoam',
+        event: 'geoRoam',
+        update: 'updateLayout'
+    };
+
+    /**
+     * @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');
+                var panX = roamDetailModel.get('x') || 0;
+                var panY = roamDetailModel.get('y') || 0;
+
+                if (dx != null && dy != null) {
+                    // FIXME Must divide mapScale ?
+                    panX += dx;
+                    panY += dy;
+
+                    componentModel.setRoamPan
+                        && componentModel.setRoamPan(panX, panY);
+
+                    geo && geo.setPan(panX, panY);
+
+                }
+                if (zoom != null && componentModel.setRoamZoom) {
+                    var previousZoom = roamDetailModel.get('zoom') || 1;
+
+                    var fixX = (payload.originX - panX) * (zoom - 1);
+                    var fixY = (payload.originY - panY) * (zoom - 1);
+
+                    panX -= fixX;
+                    panY -= fixY;
+
+                    geo && geo.setPan(panX, panY);
+                    componentModel.setRoamPan
+                        && componentModel.setRoamPan(panX, panY);
+
+                    geo && geo.setZoom(zoom * previousZoom);
+                    componentModel.setRoamZoom(zoom * previousZoom);
+
+                }
+            }
+        });
+    });
+});
\ No newline at end of file

src/chart/bar/BarSeries.js

@@ -38,6 +38,26 @@ define(function(require) {
             barGap: '30%',
             // 类目间柱形距离，默认为类目间距的20%，可设固定值
             barCategoryGap: '20%',
+            label: {
+                normal: {
+                    show: false
+                    // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+
+                    // 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                    //           'inside' | 'insideleft' | 'insideTop' | 'insideRight' | 'insideBottom' |
+                    //           'outside' |'left' | 'right'|'top'|'bottom'
+                    // position:
+
+                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                },
+                emphasis: {
+                    show: false
+                    // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                    // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                    //           'inside'|'left'|'right'|'top'|'bottom'
+                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                }
+            },
             itemStyle: {
                 normal: {
                     // color: '各异',
@@ -46,31 +66,16 @@ define(function(require) {
                     // 柱条边线圆角，单位px，默认为0
                     barBorderRadius: 0,
                     // 柱条边线线宽，单位px，默认为1
-                    barBorderWidth: 0,
-                    label: {
-                        show: false
-                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
-
-                        // 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
-                        //           'inside' | 'insideleft' | 'insideTop' | 'insideRight' | 'insideBottom' |
-                        //           'outside' |'left' | 'right'|'top'|'bottom'
-                        // position:
-
-                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                    }
+                    barBorderWidth: 0
                 },
                 emphasis: {
                     // color: '各异',
-                    barBorderColor: '#fff',            // 柱条边线
-                    barBorderRadius: 0,                // 柱条边线圆角，单位px，默认为0
-                    barBorderWidth: 0,                 // 柱条边线线宽，单位px，默认为1
-                    label: {
-                        show: false
-                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
-                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
-                        //           'inside'|'left'|'right'|'top'|'bottom'
-                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                    }
+                    // 柱条边线
+                    barBorderColor: '#fff',
+                    // 柱条边线圆角，单位px，默认为0
+                    barBorderRadius: 0,
+                    // 柱条边线线宽，单位px，默认为1
+                    barBorderWidth: 0,
                 }
             }
         }

src/chart/bar/BarView.js

@@ -99,7 +99,7 @@ define(function (require) {
         _updateStyle: function (seriesModel, data, isHorizontal) {
             data.eachItemGraphicEl(function (rect, idx) {
                 var itemModel = data.getItemModel(idx);
-                var labelModel = itemModel.getModel('itemStyle.normal.label');
+                var labelModel = itemModel.getModel('label.normal');
                 var color = data.getItemVisual(idx, 'color');
                 var layout = data.getItemLayout(idx);
 

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;
@@ -163,7 +161,6 @@ define(function (require) {
                             el.animateTo(newTarget, 300, 'cubicOut');
                         }
                         else {
-                            newTarget.position = point.slice();
                             // May still have animation. Must stop
                             el.stopAnimation();
                             el.attr(newTarget);
@@ -192,13 +189,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 labelModel = normalItemStyleModel.getModel('label');
+                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,13 +221,23 @@ define(function (require) {
 
                 graphic.setHoverStyle(
                     el,
-                    itemModel.getModel('itemStyle.emphasis').getItemStyle()
+                    itemModel.getModel(emphasisStyleAccessPath).getItemStyle()
                 );
             }, this);
 
             this._data = data;
         },
 
+        updateLayout: function () {
+            var data = this._data;
+            if (data) {
+                // Not use animation
+                data.eachItemGraphicEl(function (el, idx) {
+                    el.attr('position', data.getItemLayout(idx));
+                });
+            }
+        },
+
         remove: function (enableAnimation) {
             if (this._data) {
                 var group = this.group;

src/chart/line/LineSeries.js

@@ -27,36 +27,44 @@ define(function(require) {
             gridIndex: 0,
             // 'nearest', 'min', 'max', 'average'
             dataFilter: 'nearest',
+
+            label: {
+                normal: {
+                    show: false
+                    // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                    // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                    //           'inside'|'left'|'right'|'top'|'bottom'
+                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                },
+                emphasis: {
+                    show: false
+                    // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                    // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                    //           'inside'|'left'|'right'|'top'|'bottom'
+                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                }
+            },
             itemStyle: {
                 normal: {
-                    // color: 各异,
-                    label: {
-                        show: false
-                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
-                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
-                        //           'inside'|'left'|'right'|'top'|'bottom'
-                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                    },
-                    lineStyle: {
-                        width: 2,
-                        type: 'solid',
-                        shadowColor: 'rgba(0,0,0,0)', //默认透明
-                        shadowBlur: 0,
-                        shadowOffsetX: 0,
-                        shadowOffsetY: 0
-                    }
+                    // color: 各异
                 },
                 emphasis: {
                     // color: 各异,
-                    label: {
-                        show: false
-                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
-                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
-                        //           'inside'|'left'|'right'|'top'|'bottom'
-                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                    }
                 }
             },
+            lineStyle: {
+                normal: {
+                    width: 2,
+                    type: 'solid',
+                    shadowColor: 'rgba(0,0,0,0)', //默认透明
+                    shadowBlur: 0,
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 0
+                }
+            },
+            // areaStyle: {
+
+            // },
             // smooth: false,
             // 拐点图形类型
             symbol: 'emptyCircle',

src/chart/line/LineView.js

@@ -92,8 +92,8 @@ define(function(require) {
             var coordSys = seriesModel.coordinateSystem;
             var group = this.group;
             var data = seriesModel.getData();
-            var lineStyleModel = seriesModel.getModel('itemStyle.normal.lineStyle');
-            var areaStyleModel = seriesModel.getModel('itemStyle.normal.areaStyle');
+            var lineStyleModel = seriesModel.getModel('lineStyle.normal');
+            var areaStyleModel = seriesModel.getModel('areaStyle.normal');
 
             var points = data.mapArray(data.getItemLayout, true);
 

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

@@ -86,35 +86,54 @@ define(function (require) {
             clickable: true,
             // 是否开启缩放及漫游模式
             // roam: false,
+
+            // 在 roam 开启的时候使用
+            roamDetail: {
+                x: 0,
+                y: 0,
+                zoom: 1
+            },
+
+            label: {
+                normal: {
+                    show: false,
+                    textStyle: {
+                        color: '#000'
+                    }
+                },
+                emphasis: {
+                    show: false,
+                    textStyle: {
+                        color: '#000'
+                    }
+                }
+            },
             // scaleLimit: null,
             itemStyle: {
                 normal: {
                     // color: 各异,
                     borderWidth: 0.5,
                     borderColor: '#444',
-                    areaStyle: {
-                        color: '#eee'
-                    },
-                    label: {
-                        show: false,
-                        textStyle: {
-                            color: '#000'
-                        }
-                    }
+                    areaColor: '#eee'
                 },
                 // 也是选中样式
                 emphasis: {
-                    areaStyle: {
-                        color: 'rgba(255,215,0,0.8)'
-                    },
-                    label: {
-                        show: false,
-                        textStyle: {
-                            color: '#000'
-                        }
-                    }
+                    areaColor: 'rgba(255,215,0,0.8)'
                 }
             }
+        },
+
+        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/chart/map/MapView.js

@@ -3,18 +3,58 @@ 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;
+            group.removeAll();
 
             mapModel.needsDrawMap &&
                 this._renderArea(mapModel, ecModel, api);
 
             mapModel.get('showLegendSymbol') && ecModel.getComponent('legend')
                 && this._renderSymbols(mapModel, ecModel, api);
+
+            this._updateController(mapModel, ecModel, api);
+        },
+
+        _updateController: function (mapModel, ecModel, api) {
+            var geo = mapModel.coordinateSystem;
+            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.off('zoom')
+                .on('zoom', function (wheelDelta, mouseX, mouseY) {
+                    api.dispatch({
+                        type: 'geoRoam',
+                        // component: 'series',
+                        name: mapModel.name,
+                        zoom: wheelDelta,
+                        originX: mouseX,
+                        originY: mouseY
+                    });
+
+                    // TODO Update lineWidth
+                });
+
+            controller.rect = geo.getViewBox();
         },
 
         _renderArea: function (mapModel, ecModel, api) {
@@ -47,7 +87,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(
                     {
@@ -90,7 +130,7 @@ define(function (require) {
                     return;
                 }
                 var itemModel = data.getItemModel(idx);
-                var labelModel = itemModel.getModel('itemStyle.normal.label');
+                var labelModel = itemModel.getModel('label.normal');
                 var textStyleModel = labelModel.getModel('textStyle');
 
                 var layout = data.getItemLayout(idx);

src/chart/map/mapVisual.js

@@ -4,7 +4,7 @@ define(function (require) {
             var colorList = ecModel.get('color');
             var itemStyleModel = seriesModel.getModel('itemStyle.normal');
 
-            var areaColor = itemStyleModel.get('areaStyle.color');
+            var areaColor = itemStyleModel.get('areaColor');
             var color = itemStyleModel.get('color')
                 || colorList[seriesModel.seriesIndex % colorList.length];
 

src/chart/pie/PieSeries.js

@@ -104,52 +104,41 @@ define(function(require) {
             // selectedMode: false,
             // 南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
             // roseType: null,
+
+            label: {
+                normal: {
+                    show: true,
+                    // 'outer', 'inside', 'center'
+                    position: 'outer'
+                    // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                    // distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
+                },
+                emphasis: {}
+            },
+            // Enabled when label.normal.position is 'outer'
+            labelLine: {
+                show: true,
+                // 引导线两段中的第一段长度
+                length: 20,
+                // 引导线两段中的第二段长度
+                length2: 5,
+                lineStyle: {
+                    // color: 各异,
+                    width: 1,
+                    type: 'solid'
+                }
+            },
             itemStyle: {
                 normal: {
                     // color: 各异,
                     borderColor: 'rgba(0,0,0,0)',
-                    borderWidth: 1,
-                    label: {
-                        show: true,
-                        // 'outer', 'inside', 'center'
-                        position: 'outer'
-                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
-                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                        // distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
-                    },
-                    labelLine: {
-                        show: true,
-                        // 引导线两段中的第一段长度
-                        length: 20,
-                        // 引导线两段中的第二段长度
-                        length2: 5,
-                        lineStyle: {
-                            // color: 各异,
-                            width: 1,
-                            type: 'solid'
-                        }
-                    }
+                    borderWidth: 1
                 },
                 emphasis: {
                     // color: 各异,
                     borderColor: 'rgba(0,0,0,0)',
-                    borderWidth: 1,
-                    label: {
-                        show: false
-                        // position: 'outer'
-                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
-                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                        // distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
-                    },
-                    labelLine: {
-                        show: false,
-                        length: 20,
-                        lineStyle: {
-                            // color: 各异,
-                            width: 1,
-                            type: 'solid'
-                        }
-                    }
+                    borderWidth: 1
                 }
             }
         }

src/chart/pie/labelLayout.js

+// FIXME emphasis label position is not same with normal label position
 define(function (require) {
 
     'use strict';
@@ -6,9 +7,7 @@ define(function (require) {
 
     return function (seriesModel) {
         var data = seriesModel.getData();
-        var itemStyleModel = seriesModel.getModel('itemStyle.normal');
-        var labelLineModel = itemStyleModel.getModel('labelLine');
-        var labelModel = itemStyleModel.getModel('label')
+        var labelLineModel = seriesModel.getModel('labelLine');
 
         var labelLineLen = labelLineModel.get('length');
         var labelLineLen2 = labelLineModel.get('length2');
@@ -18,7 +17,7 @@ define(function (require) {
         data.each(function (idx) {
             var layout = data.getItemLayout(idx);
             var itemModel = data.getItemModel(idx);
-            var labelModel = itemModel.getModel('itemStyle.normal.label');
+            var labelModel = itemModel.getModel('label.normal');
             var font = labelModel.getModel('textStyle').getFont();
             var labelPosition = labelModel.get('position');
 

src/chart/scatter/ScatterSeries.js

@@ -37,27 +37,23 @@ define(function (require) {
             // symbol: null,        // 图形类型
             symbolSize: 4,          // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
             // symbolRotate: null,  // 图形旋转控制
-            itemStyle: {
+
+            label: {
                 normal: {
-                    opacity: 0.8,
-                    // color: 各异,
-                    label: {
-                        show: false
-                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
-                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
-                        //           'inside'|'left'|'right'|'top'|'bottom'
-                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                    }
+                    show: false
+                    // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                    // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                    //           'inside'|'left'|'right'|'top'|'bottom'
+                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                 },
                 emphasis: {
-                    // color: '各异'
-                    label: {
-                        show: false
-                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
-                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
-                        //           'inside'|'left'|'right'|'top'|'bottom'
-                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
-                    }
+                    show: false
+                }
+            },
+            itemStyle: {
+                normal: {
+                    opacity: 0.8,
+                    // color: 各异
                 }
             }
         }

src/chart/scatter/ScatterView.js

@@ -17,6 +17,10 @@ define(function (require) {
             );
         },
 
+        updateLayout: function () {
+            this._dataSymbol.updateLayout();
+        },
+
         remove: function (ecModel) {
             this._dataSymbol.remove(ecModel.get('animation'));
         }

src/component/dataRange/DataRangeModel.js

@@ -61,7 +61,7 @@ define(function(require) {
             inverse: false,
 
             seriesIndex: null,          // 所控制的series indices，默认所有有value的series.
-            splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变 (contimous)
+            splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变 (continous)
             backgroundColor: 'rgba(0,0,0,0)',
             borderColor: '#ccc',       // 值域边框颜色
             contentColor: '#5793f3',

src/component/dataRange/dataRangeAction.js

@@ -13,11 +13,11 @@ define(function(require) {
         update: 'updateView'
     };
 
-    echarts.registerAction(actionInfo, function (event, ecModel) {
+    echarts.registerAction(actionInfo, function (payload, ecModel) {
 
-        var fromDataRangeModel = ecModel.getComponentById(event.dataRangeModelId);
+        var fromDataRangeModel = ecModel.getComponentById(payload.dataRangeModelId);
 
-        fromDataRangeModel && fromDataRangeModel.setSelected(event.selected);
+        fromDataRangeModel && fromDataRangeModel.setSelected(payload.selected);
 
         // Find all dataRangeModel that has the same visualType and controls the same series.
         // var linkedNodesFinder = modelUtil.createLinkedNodesFinder(
@@ -40,7 +40,7 @@ define(function(require) {
         // var effectedModels = linkedNodesFinder(fromDataRangeModel).nodes;
 
         // zrUtil.each(effectedModels, function (dataRangeModel) {
-            // fromDataRangeModel.setSelected(event.selected);
+            // fromDataRangeModel.setSelected(payload.selected);
         // });
     });
 

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,11 +5,31 @@ 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 mapGroup = new graphic.Group();
+            var controller = new RoamController(api.getZr(), mapGroup, null);
+
+            this._controller = controller;
+
+            this._mapGroup = mapGroup;
+        },
+
         render: function (geoModel, ecModel, api) {
+            var group = this.group;
+            var mapGroup = this._mapGroup;
+
+            group.removeAll();
+
+            group.add(mapGroup);
+
+            mapGroup.removeAll();
+
             var geo = geoModel.coordinateSystem;
 
             var itemStyleModel = geoModel.getModel('itemStyle.normal');
@@ -19,15 +39,12 @@ define(function (require) {
             var itemStyle = itemStyleModel.getItemStyle();
             var hoverItemStyle = hoverItemStyleModel.getItemStyle();
 
-            var mapGroup = new graphic.Group();
-            var group = this.group;
-
             var scale = geo.scale;
 
-            group.add(mapGroup);
-
-            mapGroup.position = geo.position.slice();
-            mapGroup.scale = scale.slice();
+            mapGroup.attr({
+                position: geo.position,
+                scale: scale
+            });
 
             itemStyle.lineWidth && (itemStyle.lineWidth /= scale[0]);
             hoverItemStyle.lineWidth && (hoverItemStyle.lineWidth /= scale[0]);
@@ -53,6 +70,39 @@ define(function (require) {
 
                 mapGroup.add(regionGroup);
             });
-        }
+
+            this._updateController(geoModel, ecModel, api);
+        },
+
+        _updateController: function (geoModel, ecModel, api) {
+            var geo = geoModel.coordinateSystem;
+            var controller = this._controller;
+            controller.off('pan')
+                .off('zoom')
+                .on('pan', function (dx, dy) {
+                    api.dispatch({
+                        type: 'geoRoam',
+                        component: 'geo',
+                        name: geoModel.name,
+                        dx: dx,
+                        dy: dy
+                    });
+                })
+                .on('zoom', function (wheelDelta, mouseX, mouseY) {
+                    api.dispatch({
+                        type: 'geoRoam',
+                        component: 'geo',
+                        name: geoModel.name,
+                        zoom: wheelDelta,
+                        originX: mouseX,
+                        originY: mouseY
+                    });
+
+                    // TODO Update lineWidth
+                });
+
+            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;
+                pos[0] += dx;
+                pos[1] += dy;
+                target.dirty();
+            }
+
+            this.trigger('pan', dx, dy);
+        }
+    }
+
+    function mouseup(e) {
+        this._dragging =false;
+    }
+
+    function mousewheel(e) {
+        var mouseX = e.offsetX;
+        var mouseY = e.offsetY;
+        var rect = this.rect;
+        var wheelDelta = e.wheelDelta > 0 ? 1.1 : 1 / 1.1;
+        // console.log(wheelDelta, e.wheelDelta);
+        if (rect && rect.contain(mouseX, mouseY)) {
+
+            var target = this.target;
+
+            if (target) {
+                var pos = target.position;
+                var scale = target.scale;
+
+                var newZoom = this._zoom = this._zoom || 1;
+                newZoom *= wheelDelta;
+                // newZoom = Math.max(
+                //     Math.min(target.maxZoom, newZoom),
+                //     target.minZoom
+                // );
+                var zoomScale = newZoom / this._zoom;
+                this._zoom = newZoom;
+                // Keep the mouse center when scaling
+                pos[0] -= (mouseX - pos[0]) * (zoomScale - 1);
+                pos[1] -= (mouseY - pos[1]) * (zoomScale - 1);
+                scale[0] *= zoomScale;
+                scale[1] *= zoomScale;
+
+                target.dirty();
+            }
+
+            this.trigger('zoom', wheelDelta, mouseX, mouseY);
+        }
+    }
+
+    /**
+     * @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

@@ -2,12 +2,22 @@ define(function (require) {
 
     var parseGeoJson = require('./parseGeoJson');
     var vector = require('zrender/core/vector');
+    var matrix = require('zrender/core/matrix');
 
     var Transformable = require('zrender/mixin/Transformable');
     var zrUtil = require('zrender/core/util');
 
     var BoundingRect = require('zrender/core/BoundingRect');
 
+    var v2Copy = vector.copy;
+
+
+    // Dummy transform node
+    function TransformDummy() {
+        Transformable.call(this);
+    }
+    zrUtil.mixin(TransformDummy, Transformable);
+
     function Geo(name, geoJson) {
 
         this.name = name;
@@ -22,6 +32,21 @@ define(function (require) {
         Transformable.call(this);
 
         this._nameCoordMap = {};
+
+        /**
+         * @param Array.<number>
+         */
+        this.mapPosition = [0, 0];
+
+        /**
+         * @param Array.<number>
+         */
+        this.mapScale = [1, 1];
+
+
+        this._roamTransform = new TransformDummy();
+
+        this._mapTransform = new TransformDummy();
     };
 
     Geo.prototype = {
@@ -80,12 +105,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 +118,79 @@ 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;
+            var mapTransform = this._mapTransform
+
+            scale[1] = -scale[1];
+
+            v2Copy(mapTransform.position, this.position);
+            v2Copy(mapTransform.scale, 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) {
+
+            this._roamTransform.position = [x, y];
+
+            this._updateTransform();
+        },
+
+        /**
+         * @param {number} zoom
+         */
+        setZoom: function (zoom) {
+            this._roamTransform.scale = [zoom, zoom];
+
+            this._updateTransform();
+        },
+
+        /**
+         * Update transform from roam and mapLocation
+         * @private
+         */
+        _updateTransform: function () {
+            var roamTransform = this._roamTransform;
+            var mapTransform = this._mapTransform;
+            var scale = this.scale;
+
+            mapTransform.parent = roamTransform;
+            roamTransform.updateTransform();
+            mapTransform.updateTransform();
+
+            mapTransform.transform && matrix.copy(this.transform, mapTransform.transform);
+
+            this.decomposeTransform();
+
             scale[1] = -scale[1];
 
+            // Update transform position
+
             this.updateTransform();
         },
 
+        /**
+         * @return {module:zrender/core/BoundingRect}
+         */
         getBoundingRect: function () {
             if (this._rect) {
                 return this._rect;
@@ -120,6 +207,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 +228,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/echarts.js

@@ -20,6 +20,8 @@ define(function (require) {
     var zrender = require('zrender');
     var zrUtil = require('zrender/core/util');
 
+    var each = zrUtil.each;
+
     var VISUAL_CODING_STAGES = ['echarts', 'chart', 'component'];
 
     // TODO Transform first or filter first
@@ -110,6 +112,10 @@ define(function (require) {
             // PENDING
             option = zrUtil.clone(option, true);
 
+            each(optionPreprocessorFuncs, function (preProcess) {
+                preProcess(option);
+            })
+
             var ecModel = this._model;
             if (!ecModel || notMerge) {
                 ecModel = new GlobalModel(option, null, this._theme);
@@ -145,6 +151,9 @@ define(function (require) {
             return this._zr.getHeight();
         },
 
+        /**
+         * @param {Object} payload
+         */
         update: function (payload) {
             console.time('update');
 
@@ -162,7 +171,7 @@ define(function (require) {
 
             this._coordinateSystem.update(ecModel, this._extensionAPI);
 
-            this._doLayout(ecModel, payload);
+            this._doLayout(ecModel);
 
             this._doVisualCoding(ecModel);
 
@@ -174,14 +183,40 @@ define(function (require) {
             console.timeEnd('update');
         },
 
+        // PENDING
+        /**
+         * @param {Object} payload
+         */
         updateView: function (payload) {
             var ecModel = this._model;
 
-            this._doLayout(ecModel, payload);
+            this._doLayout(ecModel);
 
             this._doVisualCoding(ecModel);
 
-            this._doRender(ecModel, payload);
+            this._invokeUpdateMethod('updateView', ecModel, payload);
+        },
+
+        /**
+         * @param {Object} payload
+         */
+        updateVisual: function (payload) {
+            var ecModel = this._model;
+
+            this._doVisualCoding(ecModel);
+
+            this._invokeUpdateMethod('updateVisual', ecModel, payload);
+        },
+
+        /**
+         * @param {Object} payload
+         */
+        updateLayout: function (payload) {
+            var ecModel = this._model;
+
+            this._doLayout(ecModel);
+
+            this._invokeUpdateMethod('updateLayout', ecModel, payload);
         },
 
         resize: function () {
@@ -208,10 +243,32 @@ define(function (require) {
             var actionWrap = actions[payload.type];
             if (actionWrap) {
                 actionWrap.action(payload, this._model);
-                this[actionWrap.update || 'update'](payload);
+                this[actionWrap.actionInfo.update || 'update'](payload);
             }
         },
 
+        /**
+         * @param {string} methodName
+         * @private
+         */
+        _invokeUpdateMethod: function (methodName, ecModel, payload) {
+            var api = this._extensionAPI;
+
+            // Render all components
+            // each(this._componentsList, function (component) {
+            //     var componentModel = component.__model;
+            //     component[methodName](componentModel, ecModel, api, payload);
+            // }, this);
+
+            // Upate all charts
+            ecModel.eachSeries(function (seriesModel, idx) {
+                var id = seriesModel.uid;
+                var chart = this._chartsMap[id];
+                chart[methodName](seriesModel, ecModel, api, payload);
+            }, this);
+
+        },
+
         _prepareCharts: function (ecModel) {
 
             var chartsList = this._chartsList;
@@ -318,8 +375,8 @@ define(function (require) {
          * @private
          */
         _processData: function (ecModel) {
-            zrUtil.each(PROCESSOR_STAGES, function (stage) {
-                zrUtil.each(dataProcessorFuncs[stage] || [], function (process) {
+            each(PROCESSOR_STAGES, function (stage) {
+                each(dataProcessorFuncs[stage] || [], function (process) {
                     process(ecModel);
                 });
             });
@@ -351,10 +408,10 @@ define(function (require) {
          */
         _doLayout: function (ecModel, event) {
             var api = this._extensionAPI;
-            zrUtil.each(this._layouts, function (layout) {
+            each(this._layouts, function (layout) {
                 layout.update(ecModel, api, event);
             });
-            zrUtil.each(layoutFuncs, function (layout) {
+            each(layoutFuncs, function (layout) {
                 layout(ecModel, api, event);
             });
         },
@@ -366,8 +423,8 @@ define(function (require) {
          * @private
          */
         _doVisualCoding: function (ecModel) {
-            zrUtil.each(VISUAL_CODING_STAGES, function (stage) {
-                zrUtil.each(visualCodingFuncs[stage] || [], function (visualCoding) {
+            each(VISUAL_CODING_STAGES, function (stage) {
+                each(visualCodingFuncs[stage] || [], function (visualCoding) {
                     visualCoding(ecModel);
                 });
             });
@@ -375,13 +432,14 @@ define(function (require) {
 
         /**
          * Render each chart and component
+         * @private
          */
-        _doRender: function (ecModel, event) {
+        _doRender: function (ecModel, payload) {
             var api = this._extensionAPI;
             // Render all components
-            zrUtil.each(this._componentsList, function (component) {
+            each(this._componentsList, function (component) {
                 var componentModel = component.__model;
-                component.render(componentModel, ecModel, api, event);
+                component.render(componentModel, ecModel, api, payload);
 
                 var z = componentModel.get('z');
                 var zlevel = componentModel.get('zlevel');
@@ -392,7 +450,7 @@ define(function (require) {
                 });
             }, this);
 
-            zrUtil.each(this._chartsList, function (chart) {
+            each(this._chartsList, function (chart) {
                 chart.__keepAlive = false;
             }, this);
 
@@ -401,7 +459,7 @@ define(function (require) {
                 var id = seriesModel.uid;
                 var chart = this._chartsMap[id];
                 chart.__keepAlive = true;
-                chart.render(seriesModel, ecModel, api, event);
+                chart.render(seriesModel, ecModel, api, payload);
 
                 var z = seriesModel.get('z');
                 var zlevel = seriesModel.get('zlevel');
@@ -413,7 +471,7 @@ define(function (require) {
             }, this);
 
             // Remove groups of charts
-            zrUtil.each(this._chartsList, function (chart) {
+            each(this._chartsList, function (chart) {
                 if (!chart.__keepAlive) {
                     chart.remove(ecModel, api);
                 }
@@ -421,10 +479,10 @@ define(function (require) {
         },
 
         dispose: function () {
-            zrUtil.each(this._components, function (component) {
+            each(this._components, function (component) {
                 component.dispose();
             });
-            zrUtil.each(this._charts, function (chart) {
+            each(this._charts, function (chart) {
                 chart.dispose();
             });
 
@@ -458,6 +516,12 @@ define(function (require) {
      */
     var dataProcessorFuncs = {};
 
+    /**
+     * @type {Array.<Function>}
+     * @inner
+     */
+    var optionPreprocessorFuncs = [];
+
     /**
      * Visual coding functions of each stage
      * @type {Array.<Object.<string, Function>>}
@@ -479,6 +543,14 @@ define(function (require) {
             return new ECharts(dom, theme, opts);
         },
 
+        /**
+         * Register option preprocessor
+         * @param {Function} preprocessorFunc
+         */
+        registerPreprocessor: function (preprocessorFunc) {
+            optionPreprocessorFuncs.push(preprocessorFunc);
+        },
+
         /**
          * @param {string} stage
          * @param {Function} processorFunc
@@ -587,5 +659,7 @@ define(function (require) {
 
     echarts.registerVisualCoding('echarts', require('./visual/defaultColor'));
 
+    echarts.registerPreprocessor(require('./preprocessor/backwardCompat'));
+
     return echarts;
 });
\ No newline at end of file

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

src/preprocessor/backwardCompat.js

+// Compatitable with 2.0
+define(function (require) {
+
+    var zrUtil = require('zrender/core/util');
+
+    var POSSIBLE_STYLES = [
+        'areaStyle', 'lineStyle', 'nodeStyle', 'linkStyle',
+        'chordStyle', 'label'
+    ];
+
+    var each = zrUtil.each;
+
+    function compatItemStyle(opt) {
+        var itemStyleOpt = opt.itemStyle;
+        if (itemStyleOpt) {
+            each(POSSIBLE_STYLES, function (styleName) {
+                var normalItemStyleOpt = itemStyleOpt.normal;
+                var emphasisItemStyleOpt = itemStyleOpt.emphasis;
+                opt[styleName] = opt[styleName] || {
+                };
+                if (normalItemStyleOpt && normalItemStyleOpt[styleName]) {
+                    if (!opt[styleName].normal) {
+                        opt[styleName].normal = normalItemStyleOpt[styleName];
+                    }
+                    else {
+                        zrUtil.merge(opt[styleName].normal, normalItemStyleOpt[styleName]);
+                    }
+                    normalItemStyleOpt[styleName] = null;
+                }
+                if (emphasisItemStyleOpt && emphasisItemStyleOpt[styleName]) {
+                    if (!opt[styleName].emphasis) {
+                        opt[styleName].emphasis = emphasisItemStyleOpt[styleName];
+                    }
+                    else {
+                        zrUtil.merge(opt[styleName].emphasis, emphasisItemStyleOpt[styleName]);
+                    }
+                    emphasisItemStyleOpt[styleName] = null;
+                }
+            });
+        }
+    }
+
+    function compatMapSeries(opt) {
+    }
+
+    return function (option) {
+        zrUtil.each(option.series, function (seriesOpt) {
+            compatItemStyle(seriesOpt);
+            var data = seriesOpt.data;
+            if (data) {
+                for (var i = 0; i < data.length; i++) {
+                    compatItemStyle(data[i]);
+                }
+            }
+        });
+    }
+});
\ No newline at end of file

src/view/Chart.js

@@ -24,7 +24,7 @@ define(function (require) {
 
         init: function (ecModel, api) {},
 
-        render: function (seriesModel, ecModel, api) {},
+        render: function (seriesModel, ecModel, api, payload) {},
 
         remove: function (ecModel, api) {
             this.group.removeAll();
@@ -33,6 +33,14 @@ define(function (require) {
         dispose: function () {}
     };
 
+    var chartProto = Chart.prototype;
+    chartProto.updateView
+        = chartProto.updateLayout
+        = chartProto.updateVisual
+        = function (seriesModel, ecModel, api, payload) {
+            this.render(seriesModel, ecModel, api, payload);
+        }
+
     // Enable Chart.extend.
     componentUtil.enableClassExtend(Chart);
 

src/view/Component.js

@@ -23,7 +23,7 @@ define(function (require) {
 
         init: function (ecModel, api) {},
 
-        render: function (componentModel, ecModel, api) {},
+        render: function (componentModel, ecModel, api, payload) {},
 
         dispose: function () {}
     };