diff --git a/src/component/axis/SingleAxisView.js b/src/component/axis/SingleAxisView.js
index 6ae9043296..fac26620e2 100644
--- a/src/component/axis/SingleAxisView.js
+++ b/src/component/axis/SingleAxisView.js
@@ -28,7 +28,7 @@ var axisBuilderAttrs = [
     'axisLine', 'axisTickLabel', 'axisName'
 ];
 
-var selfBuilderAttr = 'splitLine';
+var selfBuilderAttrs = ['splitArea', 'splitLine'];
 
 var SingleAxisView = AxisView.extend({
 
@@ -42,17 +42,26 @@ var SingleAxisView = AxisView.extend({
 
         group.removeAll();
 
+        var oldAxisGroup = this._axisGroup;
+        this._axisGroup = new graphic.Group();
+
         var layout = singleAxisHelper.layout(axisModel);
 
         var axisBuilder = new AxisBuilder(axisModel, layout);
 
         zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
 
+        group.add(this._axisGroup);
         group.add(axisBuilder.getGroup());
 
-        if (axisModel.get(selfBuilderAttr + '.show')) {
-            this['_' + selfBuilderAttr](axisModel);
-        }
+        var gridModel = axisModel.getCoordSysModel();
+        zrUtil.each(selfBuilderAttrs, function (name) {
+            if (axisModel.get(name + '.show')) {
+                this['_' + name](axisModel, gridModel);
+            }
+        }, this);
+
+        graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
 
         SingleAxisView.superCall(this, 'render', axisModel, ecModel, api, payload);
     },
@@ -125,6 +134,99 @@ var SingleAxisView = AxisView.extend({
                 silent: true
             }));
         }
+    },
+
+    /**
+     * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+     * @param {module:echarts/coord/cartesian/GridModel} gridModel
+     * @private
+     */
+    _splitArea: function (axisModel, gridModel) {
+        var axis = axisModel.axis;
+
+        if (axis.scale.isBlank()) {
+            return;
+        }
+
+        var splitAreaModel = axisModel.getModel('splitArea');
+        var areaStyleModel = splitAreaModel.getModel('areaStyle');
+        var areaColors = areaStyleModel.get('color');
+
+        var gridRect = gridModel.coordinateSystem.getRect();
+
+        var ticksCoords = axis.getTicksCoords({
+            tickModel: splitAreaModel,
+            clamp: true
+        });
+
+        if (!ticksCoords.length) {
+            return;
+        }
+
+        // For Making appropriate splitArea animation, the color and anid
+        // should be corresponding to previous one if possible.
+        var areaColorsLen = areaColors.length;
+        var lastSplitAreaColors = this._splitAreaColors;
+        var newSplitAreaColors = zrUtil.createHashMap();
+        var colorIndex = 0;
+        if (lastSplitAreaColors) {
+            for (var i = 0; i < ticksCoords.length; i++) {
+                var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
+                if (cIndex != null) {
+                    colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
+                    break;
+                }
+            }
+        }
+
+        var prev = axis.toGlobalCoord(ticksCoords[0].coord);
+
+        var areaStyle = areaStyleModel.getAreaStyle();
+        areaColors = zrUtil.isArray(areaColors) ? areaColors : [areaColors];
+
+        for (var i = 1; i < ticksCoords.length; i++) {
+            var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+
+            var x;
+            var y;
+            var width;
+            var height;
+            if (axis.isHorizontal()) {
+                x = prev;
+                y = gridRect.y;
+                width = tickCoord - x;
+                height = gridRect.height;
+                prev = x + width;
+            }
+            else {
+                x = gridRect.x;
+                y = prev;
+                width = gridRect.width;
+                height = tickCoord - y;
+                prev = y + height;
+            }
+
+            var tickValue = ticksCoords[i - 1].tickValue;
+            tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
+
+            this._axisGroup.add(new graphic.Rect({
+                anid: tickValue != null ? 'area_' + tickValue : null,
+                shape: {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height
+                },
+                style: zrUtil.defaults({
+                    fill: areaColors[colorIndex]
+                }, areaStyle),
+                silent: true
+            }));
+
+            colorIndex = (colorIndex + 1) % areaColorsLen;
+        }
+
+        this._splitAreaColors = newSplitAreaColors;
     }
 });