use addHover

src/chart/pie/PieView.js

@@ -176,7 +176,7 @@ define(function (require) {
             }, 300, 'elasticOut');
         }
         sector.off('mouseover').off('mouseout').off('emphasis').off('normal');
-        if (itemModel.get('hoverAnimation')) {
+        if (itemModel.get('hoverAnimation') && seriesModel.ifEnableAnimation()) {
             sector
                 .on('mouseover', onEmphasis)
                 .on('mouseout', onNormal)

src/model/globalDefault.js

@@ -30,14 +30,17 @@ define(function () {
             fontWeight: 'normal'
         },
         animation: true,
-        animationThreshold: 2000,
         animationDuration: 1000,
         animationDurationUpdate: 300,
         animationEasing: 'exponentialOut',
         animationEasingUpdate: 'cubicOut',
 
+        animationThreshold: 2000,
         // Progressive configuration
         progressiveThreshold: 2000,
-        progressive: 400
+        progressive: 400,
+
+        // Threshold of if use single hover layer to optimize.
+        hoverLayerThreshold: 2000
     };
 });
\ No newline at end of file

src/util/graphic.js

@@ -241,8 +241,13 @@ define(function(require) {
 
         cacheElementStl(el);
 
-        el.setStyle(el.__hoverStl);
-        el.z2 += 1;
+        if (el.useHoverLayer) {
+            el.__zr && el.__zr.addHover(el, el.__hoverStl);
+        }
+        else {
+            el.setStyle(el.__hoverStl);
+            el.z2 += 1;
+        }
 
         el.__isHover = true;
     }
@@ -256,8 +261,13 @@ define(function(require) {
         }
 
         var normalStl = el.__normalStl;
-        normalStl && el.setStyle(normalStl);
-        el.z2 -= 1;
+        if (el.useHoverLayer) {
+            el.__zr && el.__zr.removeHover(el);
+        }
+        else {
+            normalStl && el.setStyle(normalStl);
+            el.z2 -= 1;
+        }
 
         el.__isHover = false;
     }