Axis name

src/component/axis.js

-// TODO Split line interval
-//      Axis tick interval
-//      Axis name
-//      boundaryGap
-//      Custom label itemStyle
+// TODO boundaryGap
 define(function(require) {
     'use strict';
 

src/component/axis/AxisView.js

@@ -95,6 +95,88 @@ define(function (require) {
                     this['_' + name](axisModel, gridModel, labelInterval);
                 }
             }, this);
+
+            this._renderName(axisModel, gridModel);
+        },
+
+        /**
+         * @param {module:echarts/coord/cartesian/AxisModel}
+         * @private
+         */
+        _renderName: function (axisModel, gridModel) {
+            var axis = axisModel.axis;
+
+            var name = axisModel.get('name');
+
+            if (name) {
+                var nameLocation = axisModel.get('nameLocation');
+                var textStyleModel = axisModel.getModel('textStyle');
+
+                var isHorizontal = axis.isHorizontal();
+                var axisPosition = this._axisLinePosition;
+
+                var axisExtent = axis.getExtent();
+
+                var sign = axisExtent[1] - axisExtent[0] > 0 ? -1 : 1;
+
+                var textAlign;
+                var textBaseline;
+                var textX;
+                var textY;
+
+                var gap = axisModel.get('nameGap') || 0;
+
+                var axisInverse = axis.inverse;
+
+                switch (nameLocation) {
+                    case 'start':
+                        if (isHorizontal) {
+                            textX = axisExtent[0] + sign * gap;
+                            textY = axisPosition;
+                            textAlign = axisInverse ? 'left' : 'right';
+                            textBaseline = 'middle';
+                        }
+                        else {
+                            textX = axisPosition;
+                            textY = axisExtent[0] + sign * gap;
+                            textAlign = 'center';
+                            textBaseline = axisInverse ? 'bottom' : 'top';
+                        }
+                        break;
+                    case 'middle':
+                        // TODO
+                        break;
+                    case 'end':
+                        if (isHorizontal) {
+                            textX = axisExtent[1] - sign * gap;
+                            textY = axisPosition;
+                            textAlign = axisInverse ? 'right' : 'left';
+                            textBaseline = 'middle';
+                        }
+                        else {
+                            textX = axisPosition;
+                            textY = axisExtent[1] - sign * gap;
+                            textAlign = 'center';
+                            textBaseline = axisInverse ? 'top' : 'bottom';
+                        }
+                        break;
+                }
+
+                var text = new graphic.Text({
+                    style: {
+                        text: name,
+                        textFont: textStyleModel.getFont(),
+                        fill: textStyleModel.get('color')
+                            || axisModel.get('axisLine.lineStyle.color'),
+                        textAlign: textAlign,
+                        textBaseline: textBaseline
+                    },
+                    position: [textX, textY],
+                    z2: 1
+                });
+
+                this.group.add(text);
+            }
         },
 
         /**

src/coord/axisDefault.js

@@ -7,10 +7,12 @@ define({
         inverse: false,
         // 坐标轴名字，默认为空
         name: '',
-        // 坐标轴名字位置，支持'start' | 'end'
+        // 坐标轴名字位置，支持'start' | 'middle' | 'end'
         nameLocation: 'end',
         // 坐标轴文字样式，默认取全局样式
         nameTextStyle: {},
+        // 文字与轴线距离
+        nameGap: 5,
         // 数值起始和结束两端空白策略
         boundaryGap: [0, 0],
         // 最小值, 设置成 'dataMin' 则从数据中计算最小值
@@ -93,6 +95,8 @@ define({
         name: '',
         // 坐标轴名字位置，支持'start' | 'end'
         nameLocation: 'end',
+        // 文字与轴线距离
+        nameGap: 5,
         // 坐标轴文字样式，默认取全局样式
         nameTextStyle: {},
         // 类目起始和结束两端空白策略

src/coord/cartesian/Grid.js

@@ -178,24 +178,12 @@ define(function(require, factory) {
             this._height = gridHeight;
 
             each(this._axesList, function (axis) {
-                var extent;
-                switch (axis.position) {
-                    case 'top':
-                        extent = [gridX, gridX + gridWidth];
-                        break;
-                    case 'left':
-                        extent = [gridY, gridY + gridHeight];
-                        break;
-                    case 'right':
-                        extent = [gridY, gridY + gridHeight];
-                        break;
-                    default: // Bottom
-                        extent = [gridX, gridX + gridWidth];
-                        break;
-                }
+                var isHorizontal = axis.isHorizontal();
+                var extent = isHorizontal
+                    ? [gridX, gridX + gridWidth]
+                    : [gridY + gridHeight, gridY];
 
-                var start = axis.isHorizontal() ? 0 : 1;
-                axis.setExtent(extent[start], extent[1 - start]);
+                axis.setExtent(extent[0], extent[1]);
             });
         },