Grid view

src/CoordinateSystem.js

@@ -25,7 +25,7 @@ define(function(require) {
         get: function (type, idx) {
             var list = this._coordinateSystems[type];
             if (list) {
-                return list[idx];
+                return list[idx || 0];
             }
         },
 

src/chart/bar/BarView.js

@@ -18,9 +18,14 @@ define(function (require) {
             var group = this.group;
             var data = seriesModel.getData();
             data.diff(this.data)
-                .add(function (dataItem) {
+                .add(function (dataItem, idx) {
+                    var layout = dataItem.layout;
                     var rect = new api.Rect({
-                        shape: dataItem.layout,
+                        shape: {
+                            x: layout.x,
+                            y: layout.y + layout.height,
+                            width: layout.width
+                        },
                         style: {
                             fill: dataItem.getVisual('color'),
                             stroke: dataItem.get('itemStyle.normal.borderColor')
@@ -31,16 +36,22 @@ define(function (require) {
                     rect.__data = dataItem;
 
                     group.add(rect);
+
+                    // Animation
+                    rect.animateShape()
+                        .when(500, layout)
+                        .delay(300 * dataItem.dataIndex / data.elements.length)
+                        .start('cubicOut');
                 })
                 .update(function (newData, oldData) {
                     // TODO DONT ANIMATE WHEN PROPERTIES ARE EQUAL
                     oldData.__el.animateShape()
-                        .when(200, newData.layout)
-                        .start();
+                        .when(500, newData.layout)
+                        .start('cubicOut');
 
                     newData.__el = oldData.__el;
                 })
-                .remove(function (dataItem) {
+                .remove(function (dataItem, idx) {
                     group.remove(dataItem.__el);
                 })
                 .execute();

src/component/grid.js

 define(function(require) {
     'use strict';
 
+    require('../coord/cartesian/Grid');
+
     // Grid view
     require('../echarts').extendComponentView({
 
-        render: function (gridModel, ecModel, api) {
-            this.group.add(new api.Rectangle({
+        type: 'grid',
 
-            }));
+        render: function (gridModel, ecModel, api) {
+            this.group.clear();
+            if (gridModel.get('show')) {
+                this.group.add(new api.Rect({
+                    shape:gridModel.coordinateSystem.getRect(),
+                    style: {
+                        stroke: gridModel.get('borderColor'),
+                        lineWidth: gridModel.get('borderWidth'),
+                        fill: gridModel.get('backgroundColor')
+                    }
+                }));
+            }
         }
     });
 });
\ No newline at end of file

src/coord/cartesian/AxisModel.js

@@ -5,9 +5,10 @@ define(function(require) {
     var defaultOption = {
 
         valueAxis: {
+            show: true,
             zlevel: 0,                  // 一级层叠
             z: 0,                       // 二级层叠
-            show: true,
+            gridIndex: 0,
             position: 'left',      // 位置
             name: '',              // 坐标轴名字，默认为空
             nameLocation: 'end',   // 坐标轴名字位置，支持'start' | 'end'
@@ -62,9 +63,10 @@ define(function(require) {
         },
 
         categoryAxis: {
+            show: true,
             zlevel: 0,                  // 一级层叠
             z: 0,                       // 二级层叠
-            show: true,
+            gridIndex: 0,
             position: 'bottom',    // 位置
             name: '',              // 坐标轴名字，默认为空
             nameLocation: 'end',   // 坐标轴名字位置，支持'start' | 'end'

src/coord/cartesian/Grid.js

@@ -18,28 +18,26 @@ define(function(require, factory) {
     require('./GridModel');
     require('./AxisModel');
 
-    function Grid() {
+    function Grid(gridModel, ecModel) {
 
         this._x = 0;
         this._y = 0;
 
         this._width = 0;
         this._height = 0;
-    }
 
-    Grid.prototype = {
+        this._coordsMap = {};
 
-        type: 'grid',
+        this._coordsList = [];
 
-        init: function (option) {
-            this._coordsMap = {};
+        this._axesList = [];
 
-            this._coordsList = [];
+        this._initCartesian(gridModel, ecModel);
+    }
 
-            this._axesList = [];
+    Grid.prototype = {
 
-            this._initCartesian(option);
-        },
+        type: 'grid',
 
         getRect: function () {
             return {
@@ -53,19 +51,17 @@ define(function(require, factory) {
         /**
          * Resize the grid
          */
-        resize: function (ecModel, api) {
+        resize: function (gridModel, api) {
             var viewportWidth = api.getWidth();
             var viewportHeight = api.getHeight();
 
-            var grid = ecModel.getComponent('grid');
-
             var parsePercent = numberUtil.parsePercent;
-            var gridX = parsePercent(grid.get('x'), viewportWidth);
-            var gridY = parsePercent(grid.get('y'), viewportHeight);
-            var gridX2 = parsePercent(grid.get('x2'), viewportWidth);
-            var gridY2 = parsePercent(grid.get('y2'), viewportHeight);
-            var gridWidth = parsePercent(grid.get('width'), viewportWidth);
-            var gridHeight = parsePercent(grid.get('height'), viewportHeight);
+            var gridX = parsePercent(gridModel.get('x'), viewportWidth);
+            var gridY = parsePercent(gridModel.get('y'), viewportHeight);
+            var gridX2 = parsePercent(gridModel.get('x2'), viewportWidth);
+            var gridY2 = parsePercent(gridModel.get('y2'), viewportHeight);
+            var gridWidth = parsePercent(gridModel.get('width'), viewportWidth);
+            var gridHeight = parsePercent(gridModel.get('height'), viewportHeight);
             if (isNaN(gridWidth)) {
                 gridWidth = viewportWidth - gridX2 - gridX;
             }
@@ -141,7 +137,7 @@ define(function(require, factory) {
          * Initialize cartesian coordinate systems
          * @private
          */
-        _initCartesian: function (ecModel) {
+        _initCartesian: function (gridModel, ecModel) {
             /**
              * @inner
              */
@@ -159,8 +155,17 @@ define(function(require, factory) {
             var axesList = this._axesList;
 
             ecModel.eachComponent('xAxis', function (xAxisModel, i) {
+                if (ecModel.getComponent(
+                        'grid', xAxisModel.get('gridIndex')
+                    ) !== gridModel) {
+                    return;
+                }
                 ecModel.eachComponent('yAxis', function (yAxisModel, j) {
-
+                    if (ecModel.getComponent(
+                            'grid', yAxisModel.get('gridIndex')
+                        ) !== gridModel) {
+                        return;
+                    }
                     var key = 'x' + i + 'y' + j;
                     var cartesian = new Cartesian2D(key);
                     this._coordsMap[key] = cartesian;
@@ -270,10 +275,10 @@ define(function(require, factory) {
     };
 
     Grid.create = function (ecModel, api) {
-        if (ecModel.getComponent('grid')) {
-            var grid = new Grid();
-            grid.init(ecModel);
-            grid.resize(ecModel, api);
+        var grids = [];
+        ecModel.eachComponent('grid', function (gridModel) {
+            var grid = new Grid(gridModel, ecModel);
+            grid.resize(gridModel, api);
 
             // Inject the coordinateSystems into seriesModel
             ecModel.eachSeries(function (seriesModel) {
@@ -281,7 +286,13 @@ define(function(require, factory) {
                     seriesModel.get('xAxisIndex'), seriesModel.get('yAxisIndex')
                 );
             });
-        }
+
+            gridModel.coordinateSystem = grid;
+
+            grids.push(grid);
+        });
+
+        return grids;
     }
 
     require('../../CoordinateSystem').register('grid', Grid);

src/coord/cartesian/GridModel.js

@@ -9,6 +9,7 @@ define(function(require) {
         type: 'grid',
 
         defaultOption: {
+            show: true,
             zlevel: 0,                  // 一级层叠
             z: 0,                       // 二级层叠
             x: 80,

src/processor/seriesStack.js

@@ -8,7 +8,6 @@ define(function() {
             var stack = series.get('stack');
 
             if (stack && data.type === 'list') {
-
                 data.eachY(function (y, idx) {
                     stackedMap[idx] = stackedMap[idx] || 0;
                     stackedMap[idx] += y;

test/bar.html

@@ -14,9 +14,16 @@
         <div id="main"></div>
         <script>
 
-            require(['echarts', 'echarts/chart/bar', 'echarts/component/legend'], function (echarts) {
+            require([
+                'echarts',
+                'echarts/chart/bar',
+                'echarts/component/legend',
+                'echarts/component/grid'
+            ], function (echarts) {
 
-                var chart = echarts.init(document.getElementById('main'));
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
 
                 var xAxisData = [];
                 var data1 = [];