diff --git a/src/component/axis/AngleAxisView.js b/src/component/axis/AngleAxisView.js
index e62820bde8..396451d038 100644
--- a/src/component/axis/AngleAxisView.js
+++ b/src/component/axis/AngleAxisView.js
@@ -107,16 +107,19 @@ export default AxisView.extend({
     _axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
         var axis = angleAxisModel.axis;
 
-        var categoryData = angleAxisModel.getCategories();
+        var rawCategoryData = angleAxisModel.getCategories(true);
 
-        var labelModel = angleAxisModel.getModel('axisLabel');
+        var commonLabelModel = angleAxisModel.getModel('axisLabel');
         var labels = angleAxisModel.getFormattedLabels();
 
-        var labelMargin = labelModel.get('margin');
+        var labelMargin = commonLabelModel.get('margin');
         var labelsAngles = axis.getLabelsCoords();
+        var ticks = axis.scale.getTicks();
 
         // Use length of ticksAngles because it may remove the last tick to avoid overlapping
-        for (var i = 0; i < ticksAngles.length; i++) {
+        for (var i = 0; i < ticks.length; i++) {
+            var labelModel = commonLabelModel;
+            var tickVal = ticks[i];
             var r = radiusExtent[getRadiusIdx(polar)];
             var p = polar.coordToPoint([r + labelMargin, labelsAngles[i]]);
             var cx = polar.cx;
@@ -127,8 +130,8 @@ export default AxisView.extend({
             var labelTextVerticalAlign = Math.abs(p[1] - cy) / r < 0.3
                 ? 'middle' : (p[1] > cy ? 'top' : 'bottom');
 
-            if (categoryData && categoryData[i] && categoryData[i].textStyle) {
-                labelModel = new Model(categoryData[i].textStyle, labelModel, labelModel.ecModel);
+            if (rawCategoryData && rawCategoryData[tickVal] && rawCategoryData[tickVal].textStyle) {
+                labelModel = new Model(rawCategoryData[tickVal].textStyle, commonLabelModel, commonLabelModel.ecModel);
             }
 
             var textEl = new graphic.Text({silent: true});
diff --git a/src/component/axis/AxisBuilder.js b/src/component/axis/AxisBuilder.js
index 7ba76fa727..0d2f0dc78c 100644
--- a/src/component/axis/AxisBuilder.js
+++ b/src/component/axis/AxisBuilder.js
@@ -678,7 +678,7 @@ function buildAxisLabel(axisBuilder, axisModel, opt) {
     ) * PI / 180;
 
     var labelLayout = innerTextLayout(opt.rotation, labelRotation, opt.labelDirection);
-    var categoryData = axisModel.getCategories();
+    var rawCategoryData = axisModel.getCategories(true);
 
     var labelEls = [];
     var silent = isSilent(axisModel);
@@ -692,13 +692,13 @@ function buildAxisLabel(axisBuilder, axisModel, opt) {
             axis, index, opt.labelInterval, ticks.length,
             showMinLabel, showMaxLabel
         )) {
-                return;
+            return;
         }
 
         var itemLabelModel = labelModel;
-        if (categoryData && categoryData[tickVal] && categoryData[tickVal].textStyle) {
+        if (rawCategoryData && rawCategoryData[tickVal] && rawCategoryData[tickVal].textStyle) {
             itemLabelModel = new Model(
-                categoryData[tickVal].textStyle, labelModel, axisModel.ecModel
+                rawCategoryData[tickVal].textStyle, labelModel, axisModel.ecModel
             );
         }
 
diff --git a/src/coord/axisModelCreator.js b/src/coord/axisModelCreator.js
index d0987eef41..5791e1c96c 100644
--- a/src/coord/axisModelCreator.js
+++ b/src/coord/axisModelCreator.js
@@ -59,10 +59,14 @@ export default function (axisName, BaseAxisModelClass, axisTypeDefaulter, extraD
              * Should not be called before all of 'getInitailData' finished.
              * Because categories are collected during initializing data.
              */
-            getCategories: function () {
+            getCategories: function (rawData) {
+                var option = this.option;
                 // FIXME
                 // warning if called before all of 'getInitailData' finished.
-                if (this.option.type === 'category') {
+                if (option.type === 'category') {
+                    if (rawData) {
+                        return option.data;
+                    }
                     return this.__ordinalMeta.categories;
                 }
             },
diff --git a/test/axis-style.html b/test/axis-style.html
new file mode 100644
index 0000000000..d104c1b843
--- /dev/null
+++ b/test/axis-style.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+            .test-title {
+                background: #146402;
+                color: #fff;
+            }
+        </style>
+
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+
+
+        <script>
+
+            var chart;
+            var myChart;
+            var option;
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                option = {
+                    dataZoom: {
+                    },
+                    grid: {
+                        bottom: 80
+                    },
+                    xAxis: {
+                        type: 'category',
+                        // boundaryGap: false,
+                        data: [
+                            'A',
+                            {
+                                value: 'Red label',
+                                textStyle: {
+                                    color: 'red', fontSize: 20
+                                }
+                            },
+                            'Mon',
+                            'Tue',
+                            {
+                                value: 'Blue label',
+                                textStyle: {
+                                    color: 'blue', fontSize: 20
+                                }
+                            },
+                            'Wed',
+                            'Thu'
+                        ]
+                    },
+                    yAxis: {},
+                    series: {
+                        type: 'line',
+                        data: [12, 32,42]
+                    }
+                };
+
+                chart = myChart = testHelper.create(echarts, 'main0', {
+                    title: 'Check label color and correct when dataZoomed',
+                    option: option
+                });
+            });
+
+        </script>
+
+
+
+
+
+
+        <script>
+
+            var chart;
+            var myChart;
+            var option;
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                option = {
+                    dataZoom: {
+                    },
+                    polar: {
+                    },
+                    radiusAxis: {
+                    },
+                    angleAxis: {
+                        type: 'category',
+                        // boundaryGap: false,
+                        data: [
+                            'A',
+                            {
+                                value: 'Red label',
+                                textStyle: {
+                                    color: 'red', fontSize: 20
+                                }
+                            },
+                            'Mon',
+                            'Tue',
+                            {
+                                value: 'Blue label',
+                                textStyle: {
+                                    color: 'blue', fontSize: 20
+                                }
+                            },
+                            'Wed',
+                            'Thu',
+                            'Fri',
+                            'Sat',
+                            'Sun'
+                        ]
+                    },
+                    series: {
+                        type: 'line',
+                        coordinateSystem: 'polar',
+                        data: [12, 32,42]
+                    }
+                };
+
+                chart = myChart = testHelper.create(echarts, 'main1', {
+                    title: 'Check label color and correct when dataZoomed',
+                    option: option
+                });
+            });
+
+        </script>
+
+
+
+
+    </body>
+</html>
\ No newline at end of file