Model.getModel, axisTick draw

src/component/axis.js

@@ -9,29 +9,38 @@ define(function(require) {
 
         render: function (axisModel, ecModel, api) {
             if (axisModel.get('axisLine.show')) {
-                this._renderAxisLine(axisModel, api);
+                this._renderAxisLine(axisModel, ecModel, api);
+            }
+            if (axisModel.get('axisTick.show')) {
+                this._renderAxisTick(axisModel, ecModel, api);
             }
         },
 
-        _renderAxisLine: function (axisModel, api) {
+        _renderAxisLine: function (axisModel, ecModel, api) {
             var axis = axisModel.axis;
 
             var p1 = [];
             var p2 = [];
 
-            var lineWidth = axisModel.get('axisLine.lineStyle.width');
-            var lineColor = axisModel.get('axisLine.lineStyle.color');
+            var lineStyleModel = axisModel.getModel('axisLine.lineStyle');
+            var lineWidth = lineStyleModel.get('width');
+            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;
-            var coordExtent = axis.getCoordExtent();
             if (axis.isHorizontal()) {
-                p1[0] = coordExtent[0];
-                p2[0] = coordExtent[1];
+                p1[0] = rect.x;
+                p2[0] = rect.x + rect.width;
                 p1[1] = p2[1] = otherCoord;
             }
             else {
-                p1[1] = coordExtent[0];
-                p2[1] = coordExtent[1];
+                p1[1] = rect.y;
+                p2[1] = rect.y + rect.height;
                 p1[0] = p2[0] = otherCoord;
             }
 
@@ -46,10 +55,89 @@ define(function(require) {
                 },
                 style: {
                     stroke: lineColor,
-                    lineWidth: lineWidth
+                    lineWidth: lineWidth,
+                    lineCap: 'round',
+                    lineType: lineType
                 },
                 z: axisModel.get('z')
             }));
+        },
+
+        _renderAxisTick: function (axisModel, ecModel, api) {
+            var axis = axisModel.axis;
+            var tickModel = axisModel.getModel('axisTick');
+
+            var lineStyleModel = tickModel.getModel('lineStyle');
+            var tickLen = tickModel.get('length');
+            var tickColor = lineStyleModel.get('color');
+            var tickLineWidth = lineStyleModel.get('width');
+            var tickInterval = tickModel.get('interval') || 0;
+            var isTickIntervalFunction = typeof tickInterval === 'function';
+            // PENDING Axis tick don't have the situation that don't have enough space to place
+            if (tickInterval === 'auto') {
+                tickInterval = 0;
+            }
+
+            var isOrdinalAxis = axis.scale.type === 'ordinal';
+
+            var axisPosition = axis.position;
+            var ticksCoords = isOrdinalAxis && axis.boundaryGap
+                ? axis.getBandsCoords(true) : axis.getTicksCoords();
+
+            for (var i = 0; i < ticksCoords.length; i++) {
+                // Only ordinal scale support tick interval
+                if (isOrdinalAxis) {
+                    if (isTickIntervalFunction) {
+                        if (! tickInterval(i, axis.scale.getItem(i))) {
+                            continue;
+                        }
+                    }
+                    else {
+                        if (i % (tickInterval + 1)) {
+                            continue;
+                        }
+                    }
+                }
+
+                var tickCoord = ticksCoords[i];
+
+                var x;
+                var y;
+                var offX = 0;
+                var offY = 0;
+
+                if (axis.isHorizontal()) {
+                    x = tickCoord;
+                    y = axis.otherCoord;
+                    offY = axisPosition === 'top' ? -tickLen : tickLen;
+                }
+                else {
+                    x = axis.otherCoord;
+                    y = tickCoord;
+                    offX = axisPosition === 'left' ? -tickLen : tickLen;
+                }
+                if (tickModel.get('inside')) {
+                    offX = -offX;
+                    offY = -offY;
+                }
+                var p1 = [x, y];
+                var p2 = [x + offX, y + offY];
+                api.subPixelOptimizeLine(p1, p2, tickLineWidth);
+                // Tick line
+                var tickLine = 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);
+            }
         }
     });
 

src/coord/cartesian/AxisModel.js

@@ -7,7 +7,7 @@ define(function(require) {
         valueAxis: {
             show: true,
             zlevel: 0,                  // 一级层叠
-            z: 0,                       // 二级层叠
+            z: 10,                       // 二级层叠
             gridIndex: 0,
             position: 'left',      // 位置
             name: '',              // 坐标轴名字，默认为空
@@ -65,7 +65,7 @@ define(function(require) {
         categoryAxis: {
             show: true,
             zlevel: 0,                  // 一级层叠
-            z: 0,                       // 二级层叠
+            z: 10,                       // 二级层叠
             gridIndex: 0,
             position: 'bottom',    // 位置
             name: '',              // 坐标轴名字，默认为空

src/model/Model.js

@@ -30,8 +30,6 @@ define(function (require) {
 
         constructor: Model,
 
-        _prefix: '',
-
         /**
          * visual properties after visual coding
          * @type {Object}
@@ -52,24 +50,19 @@ define(function (require) {
             zrUtil.merge(this.option, option);
         },
 
-        /**
-         * Set getter path prefix
-         * @param {string} prefix
-         */
-        withPrefix: function (prefix) {
-            this._prefix = prefix || '';
-            return this;
-        },
-
         /**
          * @param {string} path
          * @return {*}
          */
-        get: function (path) {
+        get: function (path, parentModel) {
             if (typeof path == 'string') {
-                path = this._prefix + path;
+                // path = this._prefix + path;
                 path = path.split('.');
             }
+            if (this.option == null) {
+                return;
+            }
+
             var obj = this.option;
             for (var i = 0; i < path.length; i++) {
                 obj = obj[path[i]];
@@ -83,6 +76,11 @@ define(function (require) {
             return obj;
         },
 
+        getModel: function (path, parentModel) {
+            var obj = this.get(path);
+            return new Model(obj, parentModel);
+        },
+
         /**
          * Get visual property.
          */

test/bar.html

@@ -38,7 +38,7 @@
                     data3.push(Math.random());
                 }
 
-                console.profile('setOption');
+                console.time('setOption');
                 chart.setOption({
                     legend: {
                         // TODO First bar unclickable
@@ -77,7 +77,7 @@
                         data: data3
                     }]
                 });
-                console.profileEnd('setOption');
+                console.timeEnd('setOption');
             })
 
         </script>