support diff group children by name in custom series.

src/chart/custom.js

@@ -6,11 +6,15 @@ define(function (require) {
     var labelHelper = require('./helper/labelHelper');
     var createListFromArray = require('./helper/createListFromArray');
     var barGrid = require('../layout/barGrid');
+    var DataDiffer = require('../data/DataDiffer');
 
     var ITEM_STYLE_NORMAL_PATH = ['itemStyle', 'normal'];
     var ITEM_STYLE_EMPHASIS_PATH = ['itemStyle', 'emphasis'];
     var LABEL_NORMAL = ['label', 'normal'];
     var LABEL_EMPHASIS = ['label', 'emphasis'];
+    // Use prefix to avoid index to be the same as el.name,
+    // which will cause weird udpate animation.
+    var GROUP_DIFF_PREFIX = 'e\0\0';
 
     /**
      * To reduce total package size of each coordinate systems, the modules `prepareCustom`
@@ -159,6 +163,7 @@ define(function (require) {
         }
 
         el.__customGraphicType = graphicType;
+        el.name = elOption.name;
 
         return el;
     }
@@ -443,13 +448,83 @@ define(function (require) {
         !el && (el = createEl(elOption));
         updateEl(el, dataIndex, elOption, animatableModel, data, isInit);
 
-        elOptionType === 'group' && zrUtil.each(elOption.children, function (childOption, index) {
-            doCreateOrUpdate(el.childAt(index), dataIndex, childOption, animatableModel, el, data);
-        });
+        if (elOptionType === 'group') {
+            var oldChildren = el.children() || [];
+            var newChildren = elOption.children || [];
+
+            if (elOption.diffChildrenByName) {
+                // lower performance.
+                diffGroupChildren({
+                    oldChildren: oldChildren,
+                    newChildren: newChildren,
+                    dataIndex: dataIndex,
+                    animatableModel: animatableModel,
+                    group: el,
+                    data: data
+                });
+            }
+            else {
+                // better performance.
+                var index = 0;
+                for (; index < newChildren.length; index++) {
+                    doCreateOrUpdate(
+                        el.childAt(index),
+                        dataIndex,
+                        newChildren[index],
+                        animatableModel,
+                        el,
+                        data
+                    );
+                }
+                for (; index < oldChildren.length; index++) {
+                    oldChildren[index] && el.remove(oldChildren[index]);
+                }
+            }
+        }
 
         group.add(el);
 
         return el;
     }
 
+    function diffGroupChildren(context) {
+        (new DataDiffer(
+            context.oldChildren,
+            context.newChildren,
+            getKey,
+            getKey,
+            context
+        ))
+            .add(processAddUpdate)
+            .update(processAddUpdate)
+            .remove(processRemove)
+            .execute();
+    }
+
+    function getKey(item, idx) {
+        var name = item && item.name;
+        return name != null ? name : GROUP_DIFF_PREFIX + idx;
+    }
+
+    function processAddUpdate(newIndex, oldIndex) {
+        var context = this.context;
+        var childOption = newIndex != null ? context.newChildren[newIndex] : null;
+        var child = oldIndex != null ? context.oldChildren[oldIndex] : null;
+
+        doCreateOrUpdate(
+            child,
+            context.dataIndex,
+            childOption,
+            context.animatableModel,
+            context.group,
+            context.data
+        );
+    }
+
+    function processRemove(oldIndex) {
+        var context = this.context;
+        var child = context.oldChildren[oldIndex];
+        child && context.group.remove(child);
+    }
+
 });

src/data/DataDiffer.js

@@ -5,12 +5,21 @@ define(function(require) {
         return item;
     }
 
-    function DataDiffer(oldArr, newArr, oldKeyGetter, newKeyGetter) {
+    /**
+     * @param {Array} oldArr
+     * @param {Array} newArr
+     * @param {Function} oldKeyGetter
+     * @param {Function} newKeyGetter
+     * @param {Object} [context] Can be visited by this.context in callback.
+     */
+    function DataDiffer(oldArr, newArr, oldKeyGetter, newKeyGetter, context) {
         this._old = oldArr;
         this._new = newArr;
 
         this._oldKeyGetter = oldKeyGetter || defaultKeyGetter;
         this._newKeyGetter = newKeyGetter || defaultKeyGetter;
+
+        this.context = context;
     }
 
     DataDiffer.prototype = {
@@ -44,8 +53,6 @@ define(function(require) {
         execute: function () {
             var oldArr = this._old;
             var newArr = this._new;
-            var oldKeyGetter = this._oldKeyGetter;
-            var newKeyGetter = this._newKeyGetter;
 
             var oldDataIndexMap = {};
             var newDataIndexMap = {};
@@ -53,8 +60,8 @@ define(function(require) {
             var newDataKeyArr = [];
             var i;
 
-            initIndexMap(oldArr, oldDataIndexMap, oldDataKeyArr, oldKeyGetter);
-            initIndexMap(newArr, newDataIndexMap, newDataKeyArr, newKeyGetter);
+            initIndexMap(oldArr, oldDataIndexMap, oldDataKeyArr, '_oldKeyGetter', this);
+            initIndexMap(newArr, newDataIndexMap, newDataKeyArr, '_newKeyGetter', this);
 
             // Travel by inverted order to make sure order consistency
             // when duplicate keys exists (consider newDataIndex.pop() below).
@@ -103,10 +110,10 @@ define(function(require) {
         }
     };
 
-    function initIndexMap(arr, map, keyArr, keyGetter) {
+    function initIndexMap(arr, map, keyArr, keyGetterName, dataDiffer) {
         for (var i = 0; i < arr.length; i++) {
             // Add prefix to avoid conflict with Object.prototype.
-            var key = '_ec_' + keyGetter(arr[i], i);
+            var key = '_ec_' + dataDiffer[keyGetterName](arr[i], i);
             var existence = map[key];
             if (existence == null) {
                 keyArr.push(key);

test/custom.html

@@ -43,6 +43,8 @@
         <div class="chart" id="text-image-update"></div>
         <h1>Polar Block</h1>
         <div class="chart" id="polar-block"></div>
+        <h1>Diff group children by name (animation of number icon should be normal)</h1>
+        <div class="chart" id="diff-children-by-name"></div>
 
 
 
@@ -1281,5 +1283,118 @@
 
 
 
+
+
+
+        <script>
+            require([
+                'echarts',
+                'echarts/chart/custom',
+                'echarts/component/polar',
+                'echarts/component/legend',
+                'echarts/component/tooltip',
+                'echarts/component/visualMap',
+                'echarts/component/dataZoom',
+                'zrender/vml/vml'
+            ], function (echarts) {
+
+                var data = [
+                    {name:'广州', value: 50},
+                    {name:'深圳', value: 72},
+                    {name:'珠海', value: 30},
+                    {name:'佛山', value: 38},
+                    {name:'杭州', value: 42},
+                    {name:'舟山', value: 32},
+                    {name:'宁波', value: 52}
+                ];
+
+                var option = {
+                    tooltip : {
+                        trigger: 'item'
+                    },
+                    legend: {
+                        data:['广州','深圳','珠海','佛山','杭州','舟山','宁波'],
+                        top: 0,
+                        left: 'center'
+                    },
+                    xAxis : [
+                        {
+                            type : 'category',
+                            data : [0],
+                            axisTick: {show: false},
+                            axisLabel: {show: false}
+                        },
+                    ],
+                    yAxis : [
+                        {
+                            type : 'value'
+                        }
+                    ],
+                    series : echarts.util.map(data, function (item) {
+                        return {
+                            name: item.name,
+                            type: 'bar',
+                            label: {
+                                normal: {
+                                    show: true,
+                                    position: 'bottom',
+                                    formatter: function (param) {
+                                        return param.seriesName;
+                                    }
+                                }
+                            },
+                            data: [item.value]
+                        }
+                    }).concat([{
+                        type: 'custom',
+                        renderItem: renderProvinceName,
+                        data: [0]
+                    }])
+                };
+
+                function renderProvinceName(param, api) {
+                    var currentSeriesIndices = api.currentSeriesIndices();
+                    currentSeriesIndices.pop(); // remove custom series;
+
+                    var barLayout = api.barLayout({
+                        barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length
+                    });
+
+                    var nameTexts = echarts.util.map(currentSeriesIndices, function (serIdx, index) {
+                        var point = api.coord([0, 0]);
+                        point[0] += barLayout[index].offsetCenter;
+                        point[1] = api.getHeight() - 20;
+
+                        return {
+                            position: point,
+                            name: serIdx,
+                            type: 'circle',
+                            shape: {
+                                cx: 0, cy: 0, r: 10
+                            },
+                            style: {
+                                text: serIdx,
+                                fill: '#333',
+                                textFill: '#eee',
+                                stroke: null
+                            }
+                        };
+                    });
+
+                    return {
+                        type: 'group',
+                        diffChildrenByName: true,
+                        children: nameTexts
+                    };
+                }
+
+                testHelper.createChart(echarts, 'diff-children-by-name', option);
+            });
+        </script>
+
+
+
+
+
     </body>
 </html>
\ No newline at end of file