Data diff

src/chart/bar/BarView.js

@@ -17,24 +17,37 @@ define(function (require) {
         },
 
         _renderCartesian: function (seriesModel, ecModel, api) {
-            seriesModel.getData().each(function (dataItem) {
-                var layout = dataItem.layout;
-
-                var rect = new api.Rect({
-                    shape: {
-                        x: layout.x,
-                        y: layout.y,
-                        width: layout.width,
-                        height: layout.height
-                    },
-                    style: {
-                        fill: dataItem.getVisual('color'),
-                        stroke: dataItem.get('itemStyle.normal.borderColor')
-                    }
-                });
-
-                this.group.add(rect);
-            }, this);
+            var group = this.group;
+            var data = seriesModel.getData();
+            data.diff(this.data)
+                .add(function (dataItem) {
+                    var rect = new api.Rect({
+                        shape: dataItem.layout,
+                        style: {
+                            fill: dataItem.getVisual('color'),
+                            stroke: dataItem.get('itemStyle.normal.borderColor')
+                        }
+                    });
+
+                    dataItem.__el = rect;
+                    rect.__data = dataItem;
+
+                    group.add(rect);
+                })
+                .update(function (newData, oldData) {
+                    // TODO DONT ANIMATE WHEN PROPERTIES ARE EQUAL
+                    oldData.__el.animateShape()
+                        .when(500, newData.layout)
+                        .start();
+
+                    newData.__el = oldData.__el;
+                })
+                .remove(function (dataItem) {
+                    group.remove(dataItem.__el);
+                })
+                .execute();
+
+            this.data = data;
         }
     });
 

src/data/DataDiffer.js

+define(function(require) {
+    'use strict';
+
+    function DataDiffer(oldArr, newArr) {
+        this._old = oldArr;
+        this._new = newArr;
+    };
+
+    DataDiffer.prototype = {
+
+        constructor: DataDiffer,
+
+        /**
+         * Callback function when add a data
+         */
+        add: function (func) {
+            this._add = func;
+            return this;
+        },
+
+        /**
+         * Callback function when update a data
+         */
+        update: function (func) {
+            this._update = func;
+            return this;
+        },
+
+        /**
+         * Callback function when remove a data
+         */
+        remove: function (func) {
+            this._remove = func;
+            return this;
+        },
+
+        execute: function () {
+            var oldArr = this._old;
+            var newArr = this._new;
+
+            var oldDataMap = {};
+            var newDataMap = {};
+            var i;
+            for (i = 0; i < oldArr.length; i++) {
+                oldDataMap[oldArr[i].name] = oldArr[i];
+            }
+            for (i = 0; i < newArr.length; i++) {
+                newDataMap[newArr[i].name] = newArr[i];
+            }
+
+            for (i = 0; i < oldArr.length; i++) {
+                var oldData = oldArr[i];
+                var newData = newDataMap[oldData.name];
+                if (newData) {
+                    this._update && this._update(newData, oldData);
+                }
+                else {
+                    this._remove && this._remove(oldData);
+                }
+            }
+
+            for (i = 0; i < newArr.length; i++) {
+                var newData = newArr[i];
+                if (! oldDataMap[newData.name]) {
+                    this._add && this._add(newData);
+                }
+            }
+        }
+    };
+
+    return DataDiffer;
+});
\ No newline at end of file

src/data/List.js

@@ -3,6 +3,7 @@ define(function(require) {
 
     var zrUtil = require('zrender/core/util');
     var Model = require('../model/Model');
+    var DataDiffer = require('./DataDiffer');
 
     function createArrayIterWithDepth(maxDepth, properties, cb, context, iterType) {
         // Simple optimization to avoid read the undefined value in properties array
@@ -230,6 +231,10 @@ define(function(require) {
             return el;
         },
 
+        diff: function (oldList) {
+            return new DataDiffer(oldList ? oldList.elements : [], this.elements);
+        },
+
         clone: function () {
             var list = new List();
             var elements = this.elements;

src/echarts.js

@@ -328,8 +328,9 @@ define(function (require) {
             ecModel.eachSeries(function (seriesModel, idx) {
                 var id = getSeriesId(seriesModel.option, idx);
                 var chart = this._chartsMap[id];
-                chart.render(seriesModel, ecModel, api);
+                // PENDING 这里先添加 group，不然不能配置动画
                 this._zr.add(chart.group);
+                chart.render(seriesModel, ecModel, api);
             }, this);
         },
 

test/bar.html

@@ -33,6 +33,7 @@
                 console.profile('setOption');
                 chart.setOption({
                     legend: {
+                        // TODO First bar unclickable
                         data: [{
                             name: 'bar',
                             itemStyle: {
@@ -42,7 +43,7 @@
                             }
                         }, 'bar2', 'bar3'],
                         selected: {
-                            'bar': false
+                            // 'bar': false
                         }
                     },
                     xAxis: {