Axis draw

src/api/ExtensionAPI.js → src/ExtensionAPI.js

@@ -15,7 +15,7 @@ define(function(require) {
     };
 
     // Mix graphic api
-    zrUtil.merge(ExtensionAPI.prototype, require('./graphic'));
+    zrUtil.merge(ExtensionAPI.prototype, require('./util/graphic'));
 
     return ExtensionAPI;
 });
\ No newline at end of file

src/component/axis.js

 define(function(require) {
     'use strict';
 
+    var numberUtil = require('../util/number');
+
     require('../coord/cartesian/AxisModel');
 
     var AxisView = require('../echarts').extendComponentView({
@@ -8,15 +10,30 @@ define(function(require) {
         type: 'axis',
 
         render: function (axisModel, ecModel, api) {
+
+            this.group.clear();
+
+            var gridModel = ecModel.getComponent(
+                'grid', axisModel.get('gridIndex')
+            );
             if (axisModel.get('axisLine.show')) {
-                this._renderAxisLine(axisModel, ecModel, api);
+                this._renderAxisLine(axisModel, gridModel, api);
             }
             if (axisModel.get('axisTick.show')) {
-                this._renderAxisTick(axisModel, ecModel, api);
+                this._renderAxisTick(axisModel, gridModel, api);
+            }
+            if (axisModel.get('axisLabel.show')) {
+                this._renderAxisLabel(axisModel, gridModel, api);
             }
         },
 
-        _renderAxisLine: function (axisModel, ecModel, api) {
+        /**
+         * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+         * @param {module:echarts/coord/cartesian/GridModel} gridModel
+         * @param {module:echarts/ExtensionAPI} api
+         * @private
+         */
+        _renderAxisLine: function (axisModel, gridModel, api) {
             var axis = axisModel.axis;
 
             var p1 = [];
@@ -27,9 +44,6 @@ define(function(require) {
             var lineColor = lineStyleModel.get('color');
             var lineType = lineStyleModel.get('type');
 
-            var gridModel = ecModel.getComponent(
-                'grid', axisModel.get('gridIndex')
-            );
             var rect = gridModel.coordinateSystem.getRect();
 
             var otherCoord = axis.otherCoord;
@@ -63,7 +77,13 @@ define(function(require) {
             }));
         },
 
-        _renderAxisTick: function (axisModel, ecModel, api) {
+        /**
+         * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+         * @param {module:echarts/coord/cartesian/GridModel} gridModel
+         * @param {module:echarts/ExtensionAPI} api
+         * @private
+         */
+        _renderAxisTick: function (axisModel, gridModel, api) {
             var axis = axisModel.axis;
             var tickModel = axisModel.getModel('axisTick');
 
@@ -84,6 +104,7 @@ define(function(require) {
             var ticksCoords = isOrdinalAxis && axis.boundaryGap
                 ? axis.getBandsCoords(true) : axis.getTicksCoords();
 
+            var tickLines = [];
             for (var i = 0; i < ticksCoords.length; i++) {
                 // Only ordinal scale support tick interval
                 if (isOrdinalAxis) {
@@ -124,21 +145,173 @@ define(function(require) {
                 var p2 = [x + offX, y + offY];
                 api.subPixelOptimizeLine(p1, p2, tickLineWidth);
                 // Tick line
-                var tickLine = new api.Line({
+                tickLines.push(new api.Line({
                     shape: {
                         x1: p1[0],
                         y1: p1[1],
                         x2: p2[0],
                         y2: p2[1]
-                    },
-                    style: {
-                        stroke: tickColor,
-                        lineWidth: tickLineWidth
                     }
-                });
-                this.group.add(tickLine);
+                }));
             }
-        }
+            var tickEl = api.mergePath(tickLines, {
+                style: {
+                    stroke: tickColor,
+                    lineWidth: tickLineWidth
+                }
+            });
+            this.group.add(tickEl);
+        },
+
+        /**
+         * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+         * @param {module:echarts/coord/cartesian/GridModel} gridModel
+         * @param {module:echarts/ExtensionAPI} api
+         * @private
+         */
+        _renderAxisLabel: function (axisModel, gridModel, api) {
+            var axis = axisModel.axis;
+
+            var labelModel = axisModel.getModel('axisLabel');
+            var textStyleModel = labelModel.getModel('textStyle');
+
+            var labelFormatter = labelModel.get('formatter');
+            if (! labelFormatter) {
+               // Default formatter
+               switch (axisModel.get('type')) {
+                   // TODO
+                   case 'log':
+                       break;
+                   case 'category':
+                       labelFormatter = function (val) {return val;};
+                       break;
+                   default:
+                       labelFormatter = function (val) {
+                           return numberUtil.addCommas(numberUtil.round(val));
+                       }
+                       break;
+               }
+            }
+            else if (typeof labelFormatter === 'string') {
+                labelFormatter = (function (tpl) {
+                   return function (val) {
+                       return tpl.replace('{value}', val);
+                   };
+               })(labelFormatter);
+            }
+
+            var gridRect = gridModel.coordinateSystem.getRect();
+
+            var ticks = axis.scale.getTicks();
+            var labelMargin = labelModel.get('margin');
+            var labelRotate = labelModel.get('rotate');
+            var labelInterval = labelModel.get('interval') || 0;
+            var isLabelIntervalFunction = typeof labelInterval === 'function';
+
+            var labelShowList = [];
+
+            var textSpaceTakenRect;
+            var needsCheckTextSpace;
+
+            for (var i = 0; i < ticks.length; i++) {
+                // Default is false
+                labelShowList[i] = false;
+
+                needsCheckTextSpace = false;
+
+                // Only ordinal scale support label interval
+                if (axis.scale.type === 'ordinal') {
+                    if (labelInterval === 'auto') {
+                        needsCheckTextSpace = true;
+                    }
+                    else if (isLabelIntervalFunction) {
+                        if (! labelInterval(tick, axis.scale.getItem(tick))) {
+                            continue;
+                        }
+                    }
+                    else {
+                        if (tick % (labelInterval + 1)) {
+                            continue;
+                        }
+                    }
+                }
+
+                var x;
+                var y;
+                var tick = ticks[i];
+                var tickCoord = axis.dataToCoord(tick);
+                var labelTextAlign = 'center';
+                var labelTextBaseline = 'middle';
+
+                var label = tick;
+                switch (axis.type) {
+                    case 'category':
+                        label = axis.scale.getItem(tick);
+                        break;
+                    case 'time':
+                        // TODO
+                }
+
+                switch (axis.position) {
+                    case 'top':
+                        y = gridRect.y - labelMargin;
+                        x = tickCoord;
+                        labelTextBaseline = 'bottom';
+                        break;
+                    case 'bottom':
+                        x = tickCoord;
+                        y = gridRect.y + gridRect.height + labelMargin;
+                        labelTextBaseline = 'top';
+                        break;
+                    case 'left':
+                        x = gridRect.x - labelMargin;
+                        y = tickCoord;
+                        labelTextAlign = 'right';
+                        break;
+                    case 'right':
+                        x = gridRect.x + gridRect.width + labelMargin;
+                        y = tickCoord;
+                        labelTextAlign = 'left';
+                }
+                if (axis.isHorizontal()) {
+                    if (labelRotate) {
+                        labelTextAlign = labelRotate > 0 ? 'left' : 'right';
+                    }
+                }
+
+                var textEl = new api.Text({
+                    style: {
+                        x: x,
+                        y: y,
+                        text: labelFormatter(label),
+                        textAlign: labelTextAlign,
+                        textBaseline: labelTextBaseline
+                    },
+                    rotation: labelRotate * Math.PI / 180,
+                    origin: [x, y]
+                });
+
+                if (needsCheckTextSpace && ! labelRotate) {
+                    var rect = textEl.getBoundingRect();
+                    if (! textSpaceTakenRect) {
+                        textSpaceTakenRect = rect;
+                    }
+                    else {
+                        // There is no space for current label;
+                        if (textSpaceTakenRect.intersect(rect)) {
+                            continue;
+                        }
+                        else {
+                            textSpaceTakenRect.union(rect);
+                        }
+                    }
+                }
+
+                labelShowList[i] = true;
+
+                this.group.add(textEl);
+             }
+         }
     });
 
     AxisView.extend({

src/component/grid.js

@@ -17,7 +17,8 @@ define(function(require) {
                         stroke: gridModel.get('borderColor'),
                         lineWidth: gridModel.get('borderWidth'),
                         fill: gridModel.get('backgroundColor')
-                    }
+                    },
+                    hoverable: false
                 }));
             }
         }

src/echarts.js

@@ -7,7 +7,7 @@
 define(function (require) {
 
     var GlobalModel = require('./model/Global');
-    var ExtensionAPI = require('./api/ExtensionAPI');
+    var ExtensionAPI = require('./ExtensionAPI');
     var CoordinateSystemManager = require('./CoordinateSystem');
 
     var ComponentModel = require('./model/Component');
@@ -70,7 +70,7 @@ define(function (require) {
         this._componentsMap = {};
 
         /**
-         * @type {module:echarts/api/ExtensionAPI}
+         * @type {module:echarts/ExtensionAPI}
          * @private
          */
         this._extensionAPI = new ExtensionAPI(this);

src/model/Model.js

@@ -76,6 +76,11 @@ define(function (require) {
             return obj;
         },
 
+        /**
+         * @param {string} path
+         * @param {module:echarts/model/Model} parentModel
+         * @return {module:echarts/model/Model}
+         */
         getModel: function (path, parentModel) {
             var obj = this.get(path);
             return new Model(obj, parentModel);

src/api/graphic.js → src/util/graphic.js

@@ -37,6 +37,8 @@ define(function(require) {
             return path;
         },
 
+        mergePath: pathTool.mergePath,
+
         /**
          * Resize a path to fit the rect
          */

src/util/number.js

@@ -88,12 +88,37 @@ define(function (require) {
         return val;
     }
 
+    /**
+     * 每三位默认加,格式化
+     * @type {string|number} x
+     */
+    function addCommas(x) {
+        if (isNaN(x)) {
+            return '-';
+        }
+        x = (x + '').split('.');
+        return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,')
+               + (x.length > 1 ? ('.' + x[1]) : '');
+    }
+
+    /**
+     * Fix rounding error of float numbers
+     */
+    function round(x) {
+        // PENDING
+        return +(+x).toFixed(10);
+    }
+
     return {
 
         linearMap: linearMap,
 
         parsePercent: parsePercent,
 
-        normalizeCssArray: normalizeCssArray
+        normalizeCssArray: normalizeCssArray,
+
+        addCommas: addCommas,
+
+        round: round
     };
 });
\ No newline at end of file

test/bar.html

@@ -32,8 +32,8 @@
                 var data3 = [];
 
                 for (var i = 0; i < 20; i++) {
-                    xAxisData.push(Math.random());
-                    data1.push(Math.random());
+                    xAxisData.push('类目' + i);
+                    data1.push(Math.random() * 5);
                     data2.push(Math.random());
                     data3.push(Math.random());
                 }