Merge pull request #17346 from apache/fix/visualMap-label-indicator

fix(visualMap): fix the indicator doesn't show when hovering on map label

src/component/helper/MapDraw.ts

@@ -820,7 +820,7 @@ function resetEventTriggerForRegion(
     dataIdx: number
 ): void {
     // setItemGraphicEl, setHoverStyle after all polygons and labels
-    // are added to the rigionGroup
+    // are added to the regionGroup
     if (viewBuildCtx.data) {
         // FIXME: when series-map use a SVG map, and there are duplicated name specified
         // on different SVG elements, after `data.setItemGraphicEl(...)`:
@@ -832,7 +832,7 @@ function resetEventTriggerForRegion(
         viewBuildCtx.data.setItemGraphicEl(dataIdx, eventTrigger);
     }
     // series-map will not trigger "geoselectchange" no matter it is
-    // based on a declared geo component. Becuause series-map will
+    // based on a declared geo component. Because series-map will
     // trigger "selectchange". If it trigger both the two events,
     // If users call `chart.dispatchAction({type: 'toggleSelect'})`,
     // it not easy to also fire event "geoselectchanged".

src/component/visualMap/ContinuousView.ts

@@ -37,8 +37,9 @@ import { parsePercent } from 'zrender/src/contain/text';
 import { setAsHighDownDispatcher } from '../../util/states';
 import { createSymbol } from '../../util/symbol';
 import ZRImage from 'zrender/src/graphic/Image';
-import { getECData } from '../../util/innerStore';
+import { ECData, getECData } from '../../util/innerStore';
 import { createTextStyle } from '../../label/labelStyle';
+import { findEventDispatcher } from '../../util/event';
 
 const linearMap = numberUtil.linearMap;
 const each = zrUtil.each;
@@ -816,16 +817,23 @@ class ContinuousView extends VisualMapView {
     }
 
     private _hoverLinkFromSeriesMouseOver(e: ElementEvent) {
-        const el = e.target;
-        const visualMapModel = this.visualMapModel;
+        let ecData: ECData;
+
+        findEventDispatcher(e.target, target => {
+            const currECData = getECData(target);
+            if (currECData.dataIndex != null) {
+                ecData = currECData;
+                return true;
+            }
+        }, true);
 
-        if (!el || getECData(el).dataIndex == null) {
+        if (!ecData) {
             return;
         }
-        const ecData = getECData(el);
 
         const dataModel = this.ecModel.getSeriesByIndex(ecData.seriesIndex);
 
+        const visualMapModel = this.visualMapModel;
         if (!visualMapModel.isTargetSeries(dataModel)) {
             return;
         }
@@ -947,4 +955,4 @@ function getCursor(orient: Orient) {
     return orient === 'vertical' ? 'ns-resize' : 'ew-resize';
 }
 
-export default ContinuousView;
+export default ContinuousView;