diff --git a/src/component/dataRange/DataRangeModel.js b/src/component/dataRange/DataRangeModel.js
index adcca8a53803eeb9781db326b81423004738b0b3..63fe6028e31de0131c11c3319c5b9e9b9d4ab3d2 100644
--- a/src/component/dataRange/DataRangeModel.js
+++ b/src/component/dataRange/DataRangeModel.js
@@ -50,10 +50,10 @@ define(function(require) {
             categories: null,          // 描述 category 数据。如：['some1', 'some2', 'some3']，设置后，min max失效。
             dimension: null,
 
-            inRange: null,             // 'color', 'colorH', 'colorSaturation', 'colorLightness', 'colorAlpha',
+            inRange: null,             // 'color', 'colorHue', 'colorSaturation', 'colorLightness', 'colorAlpha',
                                        // 'symbol', 'symbolSize'
 
-            outOfRange: null,          // 'color', 'colorH', 'colorSaturation', 'colorLightness', 'colorAlpha',
+            outOfRange: null,          // 'color', 'colorHue', 'colorSaturation', 'colorLightness', 'colorAlpha',
                                        // 'symbol', 'symbolSize'
 
             orient: 'vertical',        // 布局方式，默认为垂直布局，可选为：
diff --git a/src/visual/VisualMapping.js b/src/visual/VisualMapping.js
index 76d27213913a2f5cdfce4c1c5c9f58bf8dd638c8..7c044cb287c93fd6467e107bfc4b1f0c36b37bcc 100644
--- a/src/visual/VisualMapping.js
+++ b/src/visual/VisualMapping.js
@@ -131,6 +131,10 @@ define(function (require) {
             }
         },
 
+        colorHue: makePartialColorVisualHandler(function (color, value) {
+            return zrColor.modifyHSL(color, value);
+        }),
+
         colorSaturation: makePartialColorVisualHandler(function (color, value) {
             return zrColor.modifyHSL(color, null, value);
         }),
diff --git a/src/visual/visualDefault.js b/src/visual/visualDefault.js
index fffb845b5e3ecd35a10c60f0b2df1496fd549d36..ba07314c84061d3ff15d0051cdb470026b1e94f7 100644
--- a/src/visual/visualDefault.js
+++ b/src/visual/visualDefault.js
@@ -30,6 +30,11 @@ define(function (require) {
             inactive: ['rgba(0,0,0,0)']
         },
 
+        colorHue: {
+            active: [0, 360],
+            inactive: [0, 0]
+        },
+
         colorSaturation: {
             active: [0.3, 1],
             inactive: [0, 0]