Fix, Fix, Fix

src/ExtensionAPI.js

@@ -5,7 +5,7 @@ define(function(require) {
     var zrUtil = require('zrender/core/util');
 
     var echartsAPIList = [
-        'getZr', 'getCoordinateSystem', 'getWidth', 'getHeight', 'dispatch'
+        'getDom', 'getZr', 'getCoordinateSystem', 'getWidth', 'getHeight', 'dispatch'
     ];
 
     function ExtensionAPI(echarts) {

src/chart/bar/BarView.js

@@ -47,6 +47,9 @@ define(function (require) {
                     dataItem.__el = rect;
                     rect.__data = dataItem;
 
+                    // Attach data on the el
+                    rect.data = dataItem;
+
                     group.add(rect);
 
                     // Animation
@@ -55,20 +58,20 @@ define(function (require) {
                     }, 1000, 300 * dataIndex / data.count(), 'cubicOut');
                 })
                 .update(function (newData, oldData) {
-                    var el = oldData.__el;
+                    var rect = oldData.__el;
                     // 空数据
                     if (newData.getValue() == null) {
-                        group.remove(el);
+                        group.remove(rect);
                         return;
                     }
-                    el.animateTo({
+                    rect.animateTo({
                         shape: newData.layout
                     }, 500, 'cubicOut');
 
-                    newData.__el = el;
+                    newData.__el = rect;
 
                     // Add back
-                    group.add(el);
+                    group.add(rect);
                 })
                 .remove(function (dataItem, idx) {
                     var el = dataItem.__el;

src/chart/helper/DataSymbol.js

@@ -4,6 +4,47 @@ define(function (require) {
     var Group = require('zrender/container/Group');
     var symbolCreators = require('../../util/symbol');
 
+    function getSymbolElement(dataItem) {
+        return dataItem.__symbolEl;
+    }
+
+    function createSymbol(dataItem, enableAnimation) {
+        var layout = dataItem.layout;
+        var color = dataItem.getVisual('color');
+
+        var symbolSize = dataItem.getVisual('symbolSize');
+        var symbolType = dataItem.getVisual('symbol') || 'circle';
+        var symbolEl = symbolCreators.createSymbol(symbolType, -0.5, -0.5, 1, 1, color);
+
+        symbolEl.position = [layout.x, layout.y];
+
+        if (enableAnimation) {
+
+            symbolEl.scale = [0.1, 0.1];
+
+            symbolEl.animateTo({
+                scale: [symbolSize, symbolSize]
+            }, 500);
+
+            // symbolEl
+            //     .on('mouseover', function () {
+            //         this.animateTo({
+            //             scale: [symbolSize * 1.4, symbolSize * 1.4]
+            //         }, 400, 'elasticOut');
+            //     })
+            //     .on('mouseout', function () {
+            //         this.animateTo({
+            //             scale: [symbolSize, symbolSize]
+            //         }, 400, 'elasticOut');
+            //     });
+        }
+        else {
+            symbolEl.scale = [symbolSize, symbolSize];
+        }
+
+        return symbolEl;
+    }
+
     function DataSymbol() {
 
         this.group = new Group();
@@ -11,11 +52,6 @@ define(function (require) {
         this.z = 0;
 
         this.zlevel = 0;
-
-        this.animation = {
-            easing: 'cubicOut',
-            duration: 300
-        }
     }
 
     DataSymbol.prototype = {
@@ -24,10 +60,13 @@ define(function (require) {
             return this._data;
         },
 
-        updateData: function (data) {
+        getSymbolElements: function () {
+            return this._data.map(getSymbolElement);
+        },
+
+        updateData: function (data, enableAnimation) {
 
             var group = this.group;
-            var animationConfig = this.animation;
 
             data.diff(this._data)
                 .add(function (dataItem) {
@@ -37,28 +76,19 @@ define(function (require) {
                         return;
                     }
 
-                    var layout = dataItem.layout;
-                    var color = dataItem.getVisual('color');
-
-                    var symbolSize = dataItem.getVisual('symbolSize');
-                    var symbolType = dataItem.getVisual('symbol') || 'circle';
-                    var symbolShape = symbolCreators.createSymbol(symbolType, -0.5, -0.5, 1, 1, color);
+                    var symbolShape = createSymbol(dataItem, enableAnimation);
 
-                    symbolShape.scale = [0.1, 0.1];
-                    symbolShape.position = [layout.x, layout.y];
+                    dataItem.__symbolEl = symbolShape;
 
-                    symbolShape.animateTo({
-                        scale: [symbolSize, symbolSize]
-                    }, 500);
-
-                    dataItem.__el = symbolShape;
+                    // Attach data on the el
+                    symbolShape.data = dataItem;
 
                     group.add(symbolShape);
                 })
                 .update(function (newData, oldData) {
                     var symbolSize = newData.getVisual('symbolSize');
                     var layout = newData.layout;
-                    var el = oldData.__el;
+                    var el = oldData.__symbolEl;
 
                     // 空数据
                     // TODO
@@ -66,52 +96,67 @@ define(function (require) {
                         group.remove(el);
                         return;
                     }
-                    el.animateTo({
-                        scale: [symbolSize, symbolSize],
-                        position: [layout.x, layout.y]
-                    }, animationConfig.duration, animationConfig.easing);
 
-                    newData.__el = el;
+                    // TODO Merge animateTo and attr methods into one
+                    if (enableAnimation) {
+                        el.animateTo({
+                            scale: [symbolSize, symbolSize],
+                            position: [layout.x, layout.y]
+                        }, 300, 'cubicOut');
+                    }
+                    else {
+                        el.attr({
+                            scale: [symbolSize, symbolSize],
+                            position: [layout.x, layout.y]
+                        });
+                    }
+
+                    newData.__symbolEl = el;
 
                     // Add back
                     group.add(el);
                 })
                 .remove(function (dataItem) {
-                    var el = dataItem.__el;
+                    var el = dataItem.__symbolEl;
                     if (el) {
-                        el.animateTo({
-                            scale: [0, 0]
-                        }, 200, 'cubicOut', function () {
+                        if (enableAnimation) {
+                            el.animateTo({
+                                scale: [0, 0]
+                            }, 200, 'cubicOut', function () {
+                                group.remove(el);
+                            });
+                        }
+                        else {
                             group.remove(el);
-                        });
+                        }
                     }
                 })
                 .execute();
 
             // Update common properties
             data.each(function (dataItem) {
-                var el = dataItem.__el;
+                var el = dataItem.__symbolEl;
                 el.z = this.z;
 
                 zrUtil.extend(
                     el.style,
-                    dataItem.getModel('itemStyle.normal').getItemStyle(['fill', 'stroke'])
+                    dataItem.getModel('itemStyle.normal').getItemStyle()
                 );
 
                 var symbolSize = dataItem.getVisual('symbolSize');
                 // Adjust the line width
                 el.__lineWidth = el.__lineWidth || el.style.lineWidth;
                 el.style.lineWidth = el.__lineWidth / symbolSize;
-            }, this)
+            }, this);
 
             this._data = data;
         },
 
-        remove: function () {
+        remove: function (enableAnimation) {
             if (this._data) {
                 var group = this.group;
                 this._data.each(function (dataItem) {
-                    var el = dataItem.__el;
+                    var el = dataItem.__symbolEl;
                     el.animateTo({
                         scale: [0, 0]
                     }, 200, 'cubicOut', function () {

src/chart/line/LineView.js

@@ -53,6 +53,7 @@ define(function(require) {
             var coordinateSystem = seriesModel.coordinateSystem;
             var isCoordinateSystemPolar = coordinateSystem.type === 'polar';
 
+            // TODO Update after animation
             if (
                 isCoordinateSystemPolar
                 && points.length > 2
@@ -100,9 +101,9 @@ define(function(require) {
 
                 if (! isPointsSame(this._pointsWithName, pointsWithName)) {
                     this._updateAnimation(data, pointsWithName);
-                    // Add back
-                    this.group.add(this._polyline);
                 }
+                // Add back
+                group.add(this._polyline);
             }
 
             this._data = data;

src/component/angleAxis.js

@@ -2,7 +2,6 @@ define(function(require) {
     'use strict';
 
     var zrUtil = require('zrender/core/util');
-    var vector = require('zrender/core/vector');
 
     var elementList = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
 

src/component/dataZoom/DataZoomView.js

@@ -13,7 +13,7 @@ define(function (require) {
 
         type: 'dataZoom',
 
-        init: function (echarts) {
+        init: function () {
             /**
              * @private
              * @type {Object}

src/component/legend.js

@@ -9,27 +9,5 @@ define(function (require) {
 
     var echarts = require('../echarts');
     // Series Filter
-    echarts.registerProcessor(function (ecModel) {
-        var legendModel = ecModel.getComponent('legend');
-        if (legendModel) {
-            ecModel.filterSeries(function (series) {
-                return legendModel.isSelected(series.name);
-            });
-        }
-    });
-
-    // Series color
-    echarts.registerVisualCoding(function (ecModel) {
-        var legendModel = ecModel.getComponent('legend');
-        if (legendModel) {
-            var legendData = legendModel.getData();
-            ecModel.eachSeries(function (series) {
-                var data = legendData.getByName(series.name);
-                var color = data && data.get('itemStyle.normal.color');
-                if (color) {
-                    series.setVisual('color', color);
-                }
-            });
-        }
-    });
+    echarts.registerProcessor(require('./legend/legendFilter'));
 });
\ No newline at end of file

src/component/legend/LegendView.js

@@ -2,6 +2,7 @@ define(function (require) {
 
     var zrUtil = require('zrender/core/util');
     var numberUtil = require('../../util/number');
+    var formatUtil = require('../../util/format');
     var symbolCreator = require('../../util/symbol');
 
     function createSelectActionDispatcher(uid, seriesName, api) {
@@ -18,7 +19,7 @@ define(function (require) {
 
         render: function (legendModel, ecModel, api) {
             var itemGap = legendModel.get('itemGap');
-            var padding = numberUtil.normalizeCssArray(
+            var padding = formatUtil.normalizeCssArray(
                 legendModel.get('padding')
             );
             var orient = legendModel.get('orient');

src/component/legend/legendFilter.js

+define(function () {
+   return function (ecModel) {
+        var legendModel = ecModel.getComponent('legend');
+        if (legendModel) {
+            ecModel.filterSeries(function (series) {
+                return legendModel.isSelected(series.name);
+            });
+        }
+    }
+});
\ No newline at end of file

src/coord/axisModelCommonMixin.js

 define(function (require) {
 
     var numberUtil = require('../util/number');
+    var formatUtil = require('../util/format');
     var zrUtil = require('zrender/core/util');
 
     function categoryDefaultFormatter(val) {
@@ -27,7 +28,7 @@ define(function (require) {
                     break;
                 default:
                     labelFormatter = function (val) {
-                        return numberUtil.addCommas(numberUtil.round(val));
+                        return formatUtil.addCommas(numberUtil.round(val));
                     };
             }
         }

src/data/List.js

@@ -82,6 +82,19 @@ define(function(require) {
 
         init: function (option, parentModel, rawDataIndex, independentVar, dependentVar) {
 
+            // Normalize option to { value: [] }
+            var value = option.value;
+            // Pending
+            if (value == null
+                && (zrUtil.isArray(option)
+                || typeof (option) === 'number')
+            ) {
+                value = option;
+                option = {
+                    value: option
+                }
+            }
+
             /**
              * @type {string}
              * @memeberOf module:echarts/data/List~Entry
@@ -98,8 +111,6 @@ define(function(require) {
              */
             this.option = option;
 
-            var value = option.value == null ? option : option.value;
-
             if (value === '-' || value == null) {
                 value = [rawDataIndex, null];
             }
@@ -143,6 +154,13 @@ define(function(require) {
             this.rawDataIndex = rawDataIndex;
         },
 
+        /**
+         * Get raw value which is given by option
+         */
+        getRawValue: function () {
+            return this.get('value') || this.get();
+        },
+
         setDataIndex: function (index) {
             if (this.dataIndexIndex != null) {
                 this._value[this.dataIndexIndex] = index;
@@ -162,6 +180,7 @@ define(function(require) {
         var capitalized = dim[0].toUpperCase() + dim.substr(1);
         var indexKey = dim + 'Index';
         var getterName = 'get' + capitalized;
+
         Entry.prototype[getterName] = function (stack) {
             var index = this[indexKey];
             if (index >= 0) {

src/echarts.js

@@ -3,6 +3,8 @@
  *      setTheme
  *      axis position 统一处理
  *      规范 Symbol 配置和绘制, customPath
+ *
+ *      每次 update 只刷新 model 变化的那些 component（需要做依赖收集）
  */
 define(function (require) {
 
@@ -31,6 +33,11 @@ define(function (require) {
     var ECharts = function (dom, theme, opts) {
         opts = opts || {};
 
+        /**
+         * @type {HTMLDomElement}
+         * @private
+         */
+        this._dom = dom;
         /**
          * @type {module:zrender/ZRender}
          * @private
@@ -105,6 +112,10 @@ define(function (require) {
 
     ECharts.prototype = {
 
+        getDom: function () {
+            return this._dom;
+        },
+
         getZr: function () {
             return this._zr;
         },
@@ -155,7 +166,7 @@ define(function (require) {
         },
 
         updateImmediately: function (event) {
-            // console.time('update');
+            console.time('update');
 
             var ecModel = this._model;
 
@@ -179,7 +190,7 @@ define(function (require) {
 
             this._needsUpdate = false;
 
-            // console.timeEnd('update');
+            console.timeEnd('update');
         },
 
         resize: function () {
@@ -229,7 +240,7 @@ define(function (require) {
                         ComponentModel.parseComponentType(seriesModel.type).sub
                     );
                     if (chart) {
-                        chart.init(this._extensionAPI);
+                        chart.init(ecModel, this._extensionAPI);
                         chartsMap[id] = chart;
                         chartsList.push(chart);
                         zr.add(chart.group);
@@ -247,7 +258,7 @@ define(function (require) {
                 var chart = chartsList[i];
                 if (! chart.__keepAlive) {
                     zr.remove(chart.group);
-                    chart.dispose();
+                    chart.dispose(this._extensionAPI);
                     chartsList.splice(i, 1);
                     delete chartsMap[chart.__id];
                 }
@@ -274,7 +285,7 @@ define(function (require) {
                     if (! component) {
                         // Create and add component
                         component = ComponentView.create(componentType, componentModel);
-                        component.init(this._extensionAPI);
+                        component.init(ecModel, this._extensionAPI);
                         componentsMap[id] = component;
                         componentsList.push(component);
 
@@ -291,7 +302,7 @@ define(function (require) {
                 var component = componentsList[i];
                 if (! component.__keepAlive) {
                     this._zr.remove(component.group);
-                    component.dispose();
+                    component.dispose(this._extensionAPI);
                     componentsList.splice(i, 1);
                     delete componentsMap[component.__id];
                 }

src/layout/barGrid.js

@@ -116,6 +116,11 @@ define(function(require) {
         return result;
     }
 
+    /**
+     * @param {string} seriesType
+     * @param {module:echarts/model/Global} ecModel
+     * @param {module:echarts/ExtensionAPI} api
+     */
     function barLayoutGrid(seriesType, ecModel, api) {
 
         var barWidthAndOffset = calBarWidthAndOffset(

src/model/Series.js

@@ -3,8 +3,12 @@ define(function(require) {
     'use strict';
 
     var zrUtil = require('zrender/core/util');
+    var formatUtil = require('../util/format');
     var ComponentModel = require('./Component');
 
+    var encodeHTML = formatUtil.encodeHTML;
+    var addCommas = formatUtil.addCommas;
+
     var SeriesModel = ComponentModel.extend({
 
         type: '',
@@ -77,8 +81,22 @@ define(function(require) {
             return this._data;
         },
 
-        restoreData: function () {
+        /**
+         * Default tooltip formatter
+         *
+         * @param {module:echarts/model/Model} dataItem
+         */
+        formatTooltipHTML: function (dataItem) {
+            var value = dataItem.get('value');
+            var formattedValue = zrUtil.isArray(value)
+                ? zrUtil.map(value, addCommas) : addCommas(value);
+
+            return encodeHTML(this.name) + '<br />'
+                + encodeHTML(dataItem.name) + ' : '
+                + formattedValue;
+        },
 
+        restoreData: function () {
             // PENDING
             // Legend may have wrong symbol if visual is cleared
             // this.clearVisual();

src/model/mixin/makeStyleMapper.js

+// TODO Parse shadow style
 define(function (require) {
     var zrUtil = require('zrender/core/util');
 

src/util/format.js

+define(function (require) {
+
+    /**
+     * 每三位默认加,格式化
+     * @type {string|number} x
+     */
+    function addCommas(x) {
+        if (isNaN(x)) {
+            return '-';
+        }
+        x = (x + '').split('.');
+        return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,')
+               + (x.length > 1 ? ('.' + x[1]) : '');
+    }
+
+    /**
+     * @param {string} str
+     * @return {string} str
+     */
+    function toCamelCase(str) {
+        return str.toLowerCase().replace(/-(.)/g, function(match, group1) {
+            return group1.toUpperCase();
+        });
+    }
+
+    /**
+     * Normalize css liked array configuration
+     * e.g.
+     *  3 => [3, 3, 3, 3]
+     *  [4, 2] => [4, 2, 4, 2]
+     *  [4, 3, 2] => [4, 3, 2, 3]
+     * @param {number|Array.<number>} val
+     */
+    function normalizeCssArray(val) {
+        var len = val.length;
+        if (typeof (val) === 'number') {
+            return [val, val, val, val];
+        }
+        else if (len === 2) {
+            // vertical | horizontal
+            return [val[0], val[1], val[0], val[1]];
+        }
+        else if (len === 3) {
+            // top | horizontal | bottom
+            return [val[0], val[1], val[2], val[1]];
+        }
+        return val;
+    }
+
+    function encodeHTML(source) {
+        return String(source)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+
+    return {
+
+        normalizeCssArray: normalizeCssArray,
+
+        addCommas: addCommas,
+
+        toCamelCase: toCamelCase,
+
+        encodeHTML: encodeHTML
+    };
+});
\ No newline at end of file

src/util/number.js

@@ -64,43 +64,6 @@ define(function (require) {
         return +percent;
     }
 
-    /**
-     * Normalize css liked array configuration
-     * e.g.
-     *  3 => [3, 3, 3, 3]
-     *  [4, 2] => [4, 2, 4, 2]
-     *  [4, 3, 2] => [4, 3, 2, 3]
-     * @param {number|Array.<number>} val
-     */
-    function normalizeCssArray(val) {
-        var len = val.length;
-        if (typeof (val) === 'number') {
-            return [val, val, val, val];
-        }
-        else if (len === 2) {
-            // vertical | horizontal
-            return [val[0], val[1], val[0], val[1]];
-        }
-        else if (len === 3) {
-            // top | horizontal | bottom
-            return [val[0], val[1], val[2], val[1]];
-        }
-        return val;
-    }
-
-    /**
-     * 每三位默认加,格式化
-     * @type {string|number} x
-     */
-    function addCommas(x) {
-        if (isNaN(x)) {
-            return '-';
-        }
-        x = (x + '').split('.');
-        return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,')
-               + (x.length > 1 ? ('.' + x[1]) : '');
-    }
-
     /**
      * Fix rounding error of float numbers
      */
@@ -115,10 +78,6 @@ define(function (require) {
 
         parsePercent: parsePercent,
 
-        normalizeCssArray: normalizeCssArray,
-
-        addCommas: addCommas,
-
         round: round
     };
 });
\ No newline at end of file

src/view/Chart.js

@@ -23,9 +23,9 @@ define(function (require) {
 
         type: '',
 
-        init: function () {},
+        init: function (ecModel, api) {},
 
-        render: function () {},
+        render: function (seriesModel, ecModel, api) {},
 
         remove: function () {
             this.group.clear();

src/view/Component.js

@@ -22,7 +22,7 @@ define(function (require) {
 
         constructor: Component,
 
-        init: function () {},
+        init: function (ecModel, api) {},
 
         render: function (componentModel, ecModel, api) {},
 

src/visual/symbol.js

@@ -15,7 +15,7 @@ define(function (require) {
                 var symbolType = dataItem.get('symbol');
                 var symbolSize = dataItem.get('symbolSize');
                 if (typeof symbolSize === 'function') {
-                    var rawValue = dataItem.get('value') || dataItem.get();
+                    var rawValue = dataItem.get('value');
                     dataItem.setVisual({
                         symbol: symbolType,
                         symbolSize: symbolSize(rawValue)