ExtensionAPI#updateGraphicEl

src/ExtensionAPI.js

@@ -8,18 +8,26 @@ define(function(require) {
         'getDom', 'getZr', 'getWidth', 'getHeight', 'dispatch'
     ];
 
-    function ExtensionAPI(echarts) {
+    function ExtensionAPI(chartInstance) {
         zrUtil.each(echartsAPIList, function (name) {
-            this[name] = zrUtil.bind(echarts[name], echarts);
+            this[name] = zrUtil.bind(chartInstance[name], chartInstance);
         }, this);
-    };
-
-    // Mix graphic api
-    // zrUtil.merge(ExtensionAPI.prototype, require('./util/graphic'));
 
-    // zrUtil.merge(ExtensionAPI.prototype, require('./util/symbol'));
-
-    // ExtensionAPI.prototype.log = require('zrender/core/log');
+        /**
+         * Update element property
+         * @param {module:zrender/Element}
+         */
+        this.updateGraphicEl = function (el, props) {
+            var ecModel = chartInstance.getModel();
+            var duration = ecModel.getShallow('animationDurationUpdate');
+            var enableAnimation = ecModel.getShallow('animation');
+            var animationEasing = ecModel.getShallow('animationEasing');
+
+            enableAnimation
+                ? el.animateTo(props, duration, animationEasing)
+                : el.attr(props);
+        }
+    };
 
     return ExtensionAPI;
 });
\ No newline at end of file

src/chart/bar/BarView.js

@@ -11,17 +11,17 @@ define(function (require) {
 
         type: 'bar',
 
-        render: function (seriesModel, ecModel) {
+        render: function (seriesModel, ecModel, api) {
             var coordinateSystemType = seriesModel.get('coordinateSystem');
 
             if (coordinateSystemType === 'cartesian2d') {
-                this._renderCartesian(seriesModel, ecModel);
+                this._renderCartesian(seriesModel, ecModel, api);
             }
 
             return this.group;
         },
 
-        _renderCartesian: function (seriesModel, ecModel) {
+        _renderCartesian: function (seriesModel, ecModel, api) {
             var group = this.group;
             var data = seriesModel.getData();
             var oldData = this._data;
@@ -68,9 +68,9 @@ define(function (require) {
                         return;
                     }
 
-                    rect.animateTo({
+                    api.updateGraphicEl(rect, {
                         shape: data.getItemLayout(newIndex)
-                    }, 500, 'cubicOut');
+                    });
 
                     data.setItemGraphicEl(newIndex, rect);
 

src/chart/helper/DataSymbol.js

@@ -74,11 +74,12 @@ define(function (require) {
         /**
          * @param {module:echarts/data/List} data
          * @param {module:echarts/model/Series} seriesModel
+         * @param {module:echarts/ExtensionAPI} api
          * @param {boolean} enableAnimation
          * @param {Array.<boolean>} [ignoreMap]
          */
         updateData: function (
-            data, seriesModel, enableAnimation, ignoreMap
+            data, seriesModel, api, enableAnimation, ignoreMap
         ) {
 
             var group = this.group;
@@ -158,7 +159,7 @@ define(function (require) {
                             newTarget.scale = [1, 1];
                         }
                         if (enableAnimation) {
-                            el.animateTo(newTarget, 300, 'cubicOut');
+                            api.updateGraphicEl(el, newTarget);
                         }
                         else {
                             // May still have animation. Must stop

src/chart/line/LineView.js

@@ -88,7 +88,7 @@ define(function(require) {
             this._dataSymbol = dataSymbol;
         },
 
-        render: function (seriesModel, ecModel) {
+        render: function (seriesModel, ecModel, api) {
             var coordSys = seriesModel.coordinateSystem;
             var group = this.group;
             var data = seriesModel.getData();
@@ -120,7 +120,7 @@ define(function(require) {
                 && hasAnimation)
             ) {
                 dataSymbol.updateData(
-                    data, seriesModel, hasAnimation, symbolIgnoreMap
+                    data, seriesModel, api, hasAnimation, symbolIgnoreMap
                 );
 
                 polyline = this._newPolyline(group, points, coordSys, hasAnimation);
@@ -135,7 +135,7 @@ define(function(require) {
             else {
 
                 dataSymbol.updateData(
-                    data, seriesModel, false, symbolIgnoreMap
+                    data, seriesModel, api, false, symbolIgnoreMap
                 );
 
                 // Update clipPath
@@ -152,9 +152,20 @@ define(function(require) {
                 if (!isPointsSame(this._stackedOnPoints, stackedOnPoints)
                     || !isPointsSame(this._points, points)
                 ) {
-                    this._updateAnimation(
-                        data, stackedOnPoints, coordSys
-                    );
+                    if (hasAnimation) {
+                        this._updateAnimation(
+                            data, stackedOnPoints, coordSys, api
+                        );
+                    }
+                    else {
+                        polyline.setShape({
+                            points: points
+                        });
+                        polygon && polygon.setShape({
+                            points: points,
+                            stackedOnPoints: stackedOnPoints
+                        });
+                    }
                 }
                 // Add back
                 group.add(polyline);
@@ -289,7 +300,7 @@ define(function(require) {
         /**
          * @private
          */
-        _updateAnimation: function (data, stackedOnPoints, coordSys) {
+        _updateAnimation: function (data, stackedOnPoints, coordSys, api) {
             var polyline = this._polyline;
             var polygon = this._polygon;
 
@@ -299,23 +310,24 @@ define(function(require) {
                 this._coordSys, coordSys
             );
             polyline.shape.points = diff.current;
-            polyline.animateTo({
+
+            api.updateGraphicEl(polyline, {
                 shape: {
                     points: diff.next
                 }
-            }, 300, 'cubicOut');
+            });
 
             if (polygon) {
-                var polygonShape = polygon.shape;
-                polygonShape.points = diff.current;
-                polygonShape.stackedOnPoints = diff.stackedOnCurrent;
-
-                polygon.animateTo({
+                polygon.setShape({
+                    points: diff.current,
+                    stackedOnPoints: diff.stackedOnCurrent
+                });
+                api.updateGraphicEl(polygon, {
                     shape: {
                         points: diff.next,
                         stackedOnPoints: diff.stackedOnNext
                     }
-                }, 300, 'cubicOut');
+                });
             }
 
             var updatedDataInfo = [];

src/chart/pie/PieView.js

@@ -132,34 +132,30 @@ define(function (require) {
                     var labelLine = sector.__labelLine;
                     var labelText = sector.__labelText;
 
-                    sector.animateTo({
-                        shape: layout
-                    }, 300, 'cubicOut');
-
                     selectedMode
                         ? sector.on('click', onSectorClick)
                         : sector.off('click');
 
-                    if (labelLine) {
-                        labelLine.animateTo({
-                            shape: {
-                                points: labelLayout.linePoints
-                            }
-                        }, 300, 'cubicOut');
-                    }
+                    api.updateGraphicEl(sector, {
+                        shape: layout
+                    });
+                    labelLine && api.updateGraphicEl(labelLine, {
+                        shape: {
+                            points: labelLayout.linePoints
+                        }
+                    });
                     if (labelText) {
-                        labelText.animateTo({
+                        api.updateGraphicEl(labelText, {
                             position: [labelLayout.x, labelLayout.y],
                             rotation: labelLayout.rotation
-                        }, 300, 'cubicOut');
+                        });
+                        labelText.setStyle({
+                            textAlign: labelLayout.textAlign,
+                            textBaseline: labelLayout.textBaseline,
+                            font: labelLayout.font
+                        });
                     }
 
-                    labelText.setStyle({
-                        textAlign: labelLayout.textAlign,
-                        textBaseline: labelLayout.textBaseline,
-                        font: labelLayout.font
-                    });
-
                     sectorGroup.add(sector);
                     data.setItemGraphicEl(newIdx, sector);
 

src/chart/scatter/ScatterView.js

@@ -11,9 +11,9 @@ define(function (require) {
             this.group.add(this._dataSymbol.group);
         },
 
-        render: function (seriesModel, ecModel) {
+        render: function (seriesModel, ecModel, api) {
             this._dataSymbol.updateData(
-                seriesModel.getData(), seriesModel, ecModel.get('animation')
+                seriesModel.getData(), seriesModel, api, ecModel.get('animation')
             );
         },
 

src/model/globalDefault.js

@@ -19,8 +19,8 @@ define({
     // 主题，主题
     textStyle: {
         decoration: 'none',
-        fontFamily: 'Arial, Verdana, sans-serif',
-        fontFamily2: '微软雅黑',    // IE8- 字体模糊并且，不支持不同字体混排，额外指定一份
+        // fontFamily: 'Arial, Verdana, sans-serif',
+        // fontFamily2: '微软雅黑',    // IE8- 字体模糊并且，不支持不同字体混排，额外指定一份
         fontSize: 14,
         fontStyle: 'normal',
         fontWeight: 'normal'
@@ -63,7 +63,7 @@ define({
     ],
     animation: true,                // 过渡动画是否开启
     animationThreshold: 2000,       // 动画元素阀值，产生的图形原素超过2000不出动画
-    animationDuration: 2000,        // 过渡动画参数：进入
-    animationDurationUpdate: 500,   // 过渡动画参数：更新
-    animationEasing: 'ExponentialOut'    //BounceOut
+    animationDuration: 1000,        // 过渡动画参数：进入
+    animationDurationUpdate: 300,   // 过渡动画参数：更新
+    animationEasing: 'cubicOut'    //BounceOut
 });
\ No newline at end of file

src/model/mixin/makeStyleMapper.js

@@ -6,7 +6,7 @@ define(function (require) {
     return function (properties) {
         // Normalize
         for (var i = 0; i < properties.length; i++) {
-            if (! properties[i][1]) {
+            if (!properties[i][1]) {
                properties[i][1] = properties[i][0];
             }
         }