Fix that emphasis listener added repeatly.

src/chart/map/MapView.js

@@ -22,6 +22,9 @@ import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import MapDraw from '../../component/helper/MapDraw';
 
+var HIGH_DOWN_PROP = '__seriesMapHighDown';
+var RECORD_VERSION_PROP = '__seriesMapCallKey';
+
 export default echarts.extendChartView({
 
     type: 'map',
@@ -139,7 +142,7 @@ export default echarts.extendChartView({
                 var labelModel = itemModel.getModel('label');
                 var hoverLabelModel = itemModel.getModel('emphasis.label');
 
-                var polygonGroups = fullData.getItemGraphicEl(fullIndex);
+                var regionGroup = fullData.getItemGraphicEl(fullIndex);
 
                 // `getFormattedLabel` needs to use `getData` inside. Here
                 // `mapModel.getData()` is shallow cloned from `mainSeries.getData()`.
@@ -157,37 +160,74 @@ export default echarts.extendChartView({
                     normalText
                 );
 
-                var onEmphasis = function () {
-                    var hoverStyle = graphic.setTextStyle({}, hoverLabelModel, {
-                        text: hoverLabelModel.get('show') ? emphasisText : null
-                    }, {isRectText: true, useInsideStyle: false}, true);
-                    circle.style.extendFrom(hoverStyle);
-                    // Make label upper than others if overlaps.
-                    circle.__mapOriginalZ2 = circle.z2;
-                    circle.z2 += graphic.Z2_EMPHASIS_LIFT;
-                };
-
-                var onNormal = function () {
-                    graphic.setTextStyle(circle.style, labelModel, {
-                        text: labelModel.get('show') ? normalText : null,
-                        textPosition: labelModel.getShallow('position') || 'bottom'
-                    }, {isRectText: true, useInsideStyle: false});
-
-                    if (circle.__mapOriginalZ2 != null) {
-                        circle.z2 = circle.__mapOriginalZ2;
-                        circle.__mapOriginalZ2 = null;
-                    }
-                };
-
-                polygonGroups.on('mouseover', onEmphasis)
-                    .on('mouseout', onNormal)
-                    .on('emphasis', onEmphasis)
-                    .on('normal', onNormal);
-
-                onNormal();
+                var highDownRecord = regionGroup[HIGH_DOWN_PROP];
+                var recordVersion = Math.random();
+
+                // Prevent from register listeners duplicatedly when roaming.
+                if (!highDownRecord) {
+                    highDownRecord = regionGroup[HIGH_DOWN_PROP] = {};
+                    var onEmphasis = zrUtil.curry(onRegionHighDown, true);
+                    var onNormal = zrUtil.curry(onRegionHighDown, false);
+                    regionGroup.on('mouseover', onEmphasis)
+                        .on('mouseout', onNormal)
+                        .on('emphasis', onEmphasis)
+                        .on('normal', onNormal);
+                }
+
+                // Prevent removed regions effect current grapics.
+                regionGroup[RECORD_VERSION_PROP] = recordVersion;
+                zrUtil.extend(highDownRecord, {
+                    recordVersion: recordVersion,
+                    circle: circle,
+                    labelModel: labelModel,
+                    hoverLabelModel: hoverLabelModel,
+                    emphasisText: emphasisText,
+                    normalText: normalText
+                });
+
+                // FIXME
+                // Consider set option when emphasis.
+                enterRegionHighDown(highDownRecord, false);
             }
 
             group.add(circle);
         });
     }
-});
\ No newline at end of file
+});
+
+function onRegionHighDown(toHighOrDown) {
+    var highDownRecord = this[HIGH_DOWN_PROP];
+    if (highDownRecord && highDownRecord.recordVersion === this[RECORD_VERSION_PROP]) {
+        enterRegionHighDown(highDownRecord, toHighOrDown);
+    }
+}
+
+function enterRegionHighDown(highDownRecord, toHighOrDown) {
+    var circle = highDownRecord.circle;
+    var labelModel = highDownRecord.labelModel;
+    var hoverLabelModel = highDownRecord.hoverLabelModel;
+    var emphasisText = highDownRecord.emphasisText;
+    var normalText = highDownRecord.normalText;
+
+    if (toHighOrDown) {
+        circle.style.extendFrom(
+            graphic.setTextStyle({}, hoverLabelModel, {
+                text: hoverLabelModel.get('show') ? emphasisText : null
+            }, {isRectText: true, useInsideStyle: false}, true)
+        );
+        // Make label upper than others if overlaps.
+        circle.__mapOriginalZ2 = circle.z2;
+        circle.z2 += graphic.Z2_EMPHASIS_LIFT;
+    }
+    else {
+        graphic.setTextStyle(circle.style, labelModel, {
+            text: labelModel.get('show') ? normalText : null,
+            textPosition: labelModel.getShallow('position') || 'bottom'
+        }, {isRectText: true, useInsideStyle: false});
+
+        if (circle.__mapOriginalZ2 != null) {
+            circle.z2 = circle.__mapOriginalZ2;
+            circle.__mapOriginalZ2 = null;
+        }
+    }
+}

test/map.html

@@ -310,7 +310,10 @@ under the License.
                                     }
                                 },
                                 emphasis: {
-                                    label: {show: true}
+                                    label: {
+                                        show: true,
+                                        backgroundColor: '#fcf'
+                                    },
                                 },
                                 data:[
                                     {name: '北京',value: 234},
@@ -341,7 +344,10 @@ under the License.
                                     }
                                 },
                                 emphasis: {
-                                    label: {show: true}
+                                    label: {
+                                        show: true,
+                                        backgroundColor: '#ccc'
+                                    }
                                 },
                                 data:[
                                     {name: '北京',value: 567},
@@ -357,6 +363,7 @@ under the License.
                         title: [
                             '1. 北京、天津、河北 rich text 正常倾斜（河北竖直）（其他 region 都没数据，显示 NaN）',
                             '2. selectedMode: "multiple"',
+                            '3. hover 时标签底色变红',
                             '所有 label 样式一致（例外：没数据的 label 并不 rotate，因为这还没支持）'
                         ]
                     });