Axis line

src/api/graphic.js

@@ -24,6 +24,8 @@ define(function(require) {
 
         Rect: require('zrender/graphic/shape/Rectangle'),
 
+        Line: require('zrender/graphic/shape/Line'),
+
         /**
          * Create a path element from path data string
          */
@@ -53,6 +55,26 @@ define(function(require) {
             matrix.scale(m, m, [sx, sy]);
             matrix.translate(m, m, [-pathRect.x, -pathRect.y]);
             path.applyTransform(m);
+        },
+
+        subPixelOptimizeLine: function (p0, p1, lineWidth) {
+            var round = Math.round;
+            // Sub pixel optimize
+            var offset = lineWidth % 2 / 2;
+            var x1 = round(p0[0]);
+            var y1 = round(p0[1]);
+            var x2 = round(p1[0]);
+            var y2 = round(p1[1]);
+
+            if (x1 === x2) {
+                x1 += offset;
+                x2 += offset;
+            }
+            if (y1 === y2) {
+                y1 += offset;
+                y2 += offset;
+            }
         }
+
     }
 });
\ No newline at end of file

src/component/axis.js

+define(function(require) {
+    'use strict';
+
+    require('../coord/cartesian/AxisModel');
+
+    var AxisView = require('../echarts').extendComponentView({
+
+        type: 'axis',
+
+        render: function (axisModel, ecModel, api) {
+            if (axisModel.get('axisLine.show')) {
+                this._renderAxisLine(axisModel, api);
+            }
+        },
+
+        _renderAxisLine: function (axisModel, api) {
+            var axis = axisModel.axis;
+
+            var p1 = [];
+            var p2 = [];
+
+            var lineWidth = axisModel.get('axisLine.lineStyle.width');
+            var lineColor = axisModel.get('axisLine.lineStyle.color');
+
+            var otherCoord = axis.otherCoord;
+            var coordExtent = axis.getCoordExtent();
+            if (axis.isHorizontal()) {
+                p1[0] = coordExtent[0];
+                p2[0] = coordExtent[1];
+                p1[1] = p2[1] = otherCoord;
+            }
+            else {
+                p1[1] = coordExtent[0];
+                p2[1] = coordExtent[1];
+                p1[0] = p2[0] = otherCoord;
+            }
+
+            api.subPixelOptimizeLine(p1, p2, lineWidth);
+
+            this.group.add(new api.Line({
+                shape: {
+                    x1: p1[0],
+                    y1: p1[1],
+                    x2: p2[0],
+                    y2: p2[1]
+                },
+                style: {
+                    stroke: lineColor,
+                    lineWidth: lineWidth
+                },
+                z: axisModel.get('z')
+            }));
+        }
+    });
+
+    AxisView.extend({
+        type: 'xAxis'
+    });
+    AxisView.extend({
+        type: 'yAxis'
+    });
+});
\ No newline at end of file

src/component/legend/LegendView.js

@@ -25,8 +25,8 @@ define(function (require) {
                 )
             ];
 
-            var x = 0;
-            var y = 0;
+            var x = padding[3];
+            var y = padding[0];
 
             legendModel.getData().each(function (dataItem) {
                 var seriesName = dataItem.name;

src/coord/cartesian/AxisModel.js

@@ -133,7 +133,11 @@ define(function(require) {
     }
 
     var AxisModel = require('../../model/Component').extend({
-        type: 'axis'
+        type: 'axis',
+        /**
+         * @type {module:echarts/coord/cartesian/Axis2D}
+         */
+        axis: null
     });
 
     AxisModel.AxisX = AxisModel.extend({

src/coord/cartesian/Grid.js

@@ -204,6 +204,10 @@ define(function(require, factory) {
 
                     axesList.push(axisX);
                     axesList.push(axisY);
+
+                    // Inject axis into axisModel
+                    xAxisModel.axis = axisX;
+                    yAxisModel.axis = axisY;
                 }, this);
             }, this);
 

src/coord/cartesian/GridModel.js

@@ -8,6 +8,11 @@ define(function(require) {
 
         type: 'grid',
 
+        /**
+         * @type {module:echarts/coord/cartesian/Grid}
+         */
+        coordinateSystem: null,
+
         defaultOption: {
             show: true,
             zlevel: 0,                  // 一级层叠

src/util/number.js

@@ -95,5 +95,5 @@ define(function (require) {
         parsePercent: parsePercent,
 
         normalizeCssArray: normalizeCssArray
-    }
+    };
 });
\ No newline at end of file

src/view/Component.js

@@ -4,7 +4,6 @@ define(function (require) {
     var Group = require('zrender/container/Group');
 
     var Component = function () {
-
         /**
          * @type {module:zrender/container/Group}
          * @readOnly

test/bar.html

@@ -18,7 +18,8 @@
                 'echarts',
                 'echarts/chart/bar',
                 'echarts/component/legend',
-                'echarts/component/grid'
+                'echarts/component/grid',
+                'echarts/component/axis'
             ], function (echarts) {
 
                 var chart = echarts.init(document.getElementById('main'), null, {