fix: [geo] tweak a little.

src/component/geo/GeoView.ts

@@ -25,6 +25,7 @@ import ExtensionAPI from '../../core/ExtensionAPI';
 import GeoModel from '../../coord/geo/GeoModel';
 import { Payload, ZRElementEvent, ECEventData } from '../../util/types';
 import { getECData } from '../../util/innerStore';
+import { findEventDispatcher } from '../../util/event';
 
 class GeoView extends ComponentView {
 
@@ -66,12 +67,11 @@ class GeoView extends ComponentView {
     }
 
     private _handleRegionClick(e: ZRElementEvent) {
-        let current = e.target;
         let eventData: ECEventData;
-        // TODO extract a util function
-        while (current && (eventData = getECData(current).eventData) == null) {
-            current = current.__hostTarget || current.parent;
-        }
+
+        findEventDispatcher(e.target, current => {
+            return (eventData = getECData(current).eventData) != null;
+        }, true);
 
         if (eventData) {
             this._api.dispatchAction({

src/component/helper/MapDraw.ts

@@ -403,6 +403,11 @@ class MapDraw {
         if (data) {
             data.setItemGraphicEl(dataIdx, elForStateChange);
         }
+        // series-map will not trigger "geoselectchange" no matter it is
+        // based on a declared geo component. Becuause 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".
         else {
             const regionModel = mapOrGeoModel.getRegionModel(regionName);
             // Package custom mouse event for geo component

src/coord/geo/GeoModel.ts

@@ -34,7 +34,8 @@ import {
     RoamOptionMixin,
     AnimationOptionMixin,
     StatesOptionMixin,
-    Dictionary
+    Dictionary,
+    CommonTooltipOption
 } from '../../util/types';
 import { NameMap } from './geoTypes';
 import GlobalModel from '../../model/Global';
@@ -59,7 +60,15 @@ interface GeoLabelFormatterDataParams {
 export interface RegoinOption extends GeoStateOption, StatesOptionMixin<GeoStateOption> {
     name?: string
     selected?: boolean
-};
+    tooltip?: Partial<Pick<CommonTooltipOption<GeoTooltipFormatterParams>, 'show'>>
+}
+
+export interface GeoTooltipFormatterParams {
+    componentType: 'geo'
+    geoIndex: number
+    name: string
+    $vars: ['name']
+}
 
 export interface GeoCommonOptionMixin extends RoamOptionMixin {
     // Map name
@@ -103,6 +112,8 @@ export interface GeoOption extends
 
     selectedMode?: 'single' | 'multiple' | boolean
     selectedMap?: Dictionary<boolean>
+
+    tooltip?: CommonTooltipOption<GeoTooltipFormatterParams>
 }
 
 class GeoModel extends ComponentModel<GeoOption> {
@@ -188,7 +199,11 @@ class GeoModel extends ComponentModel<GeoOption> {
             }
         },
 
-        regions: []
+        regions: [],
+
+        tooltip: {
+            show: false
+        }
     };
 
     init(option: GeoOption, parentModel: Model, ecModel: GlobalModel): void {

test/geo-svg.html

@@ -37,14 +37,36 @@ under the License.
 
 
 
-        <div id="main0"></div>
-        <div id="main1"></div>
-        <div id="main2"></div>
+        <div id="main_pure_geo_json"></div>
+        <div id="main_pure_geo_svg"></div>
+        <div id="main_pure_map_svg"></div>
+        <div id="main_map_geo_svg"></div>
 
 
 
 
 
+        <script>
+            function listenAndPrintSelectChanged(chart) {
+                if (!chart) {
+                    return;
+                }
+                const out = {
+                };
+                chart.on('geoselectchanged', function (params) {
+                    out.allSelected = params.allSelected;
+                    console.log('geoselectechanged');
+                    chart.__testHelper.updateInfo(out, 'event');
+                });
+                chart.on('selectchanged', function (params) {
+                    out.selected = params.selected;
+                    console.log('selectechanged');
+                    chart.__testHelper.updateInfo(out, 'event');
+                });
+            }
+        </script>
+
+
 
         <script>
         require(['echarts'/*, 'map/js/china' */], function (echarts) {
@@ -70,6 +92,8 @@ under the License.
             echarts.registerMap('testGeoJson1', testGeoJson1);
 
             option = {
+                tooltip: {
+                },
                 geo: {
                     map: 'testGeoJson1',
                     roam: true,
@@ -84,29 +108,19 @@ under the License.
                 }
             };
 
-            var chart = testHelper.create(echarts, 'main0', {
+            var chart = testHelper.create(echarts, 'main_pure_geo_json', {
                 title: [
-                    'geoJSON location:',
+                    'pure geo geoJSON location:',
                     'Should be a square and 80% of canvas height.',
                     'At the center of the canvas.'
                 ],
                 option: option,
-                info: [],
-                infoKey: 'allSelected',
+                info: {},
+                infoKey: 'event',
                 height: 300
             });
 
-            if (chart) {
-                if (chart) {
-                    chart.on('geoselectchanged', function (params) {
-                        chart.__testHelper.updateInfo(
-                            params.allSelected,
-                            'allSelected'
-                        );
-                    });
-                }
-            }
-
+            listenAndPrintSelectChanged(chart);
 
         });
         </script>
@@ -126,6 +140,8 @@ under the License.
                 });
 
                 option = {
+                    tooltip: {
+                    },
                     geo: {
                         map: 'seatmap',
                         roam: true,
@@ -158,27 +174,20 @@ under the License.
                     // }
                 };
 
-                var chart = testHelper.create(echarts, 'main1', {
+                var chart = testHelper.create(echarts, 'main_pure_geo_svg', {
                     title: [
-                        'geo component with svg resource',
+                        'pure geo component with svg resource',
                         'click seat: check **allSelected** correct.'
                     ],
                     option: option,
-                    info: [],
-                    infoKey: 'allSelected',
+                    info: {},
+                    infoKey: 'event',
                     height: 300
                     // buttons: [{text: 'btn-txt', onclick: function () {}}],
                     // recordCanvas: true,
                 });
 
-                if (chart) {
-                    chart.on('geoselectchanged', function (params) {
-                        chart.__testHelper.updateInfo(
-                            params.allSelected,
-                            'allSelected'
-                        );
-                    });
-                }
+                listenAndPrintSelectChanged(chart);
 
             });
 
@@ -231,27 +240,90 @@ under the License.
                     }
                 };
 
-                var chart = testHelper.create(echarts, 'main2', {
+                var chart = testHelper.create(echarts, 'main_pure_map_svg', {
                     title: [
-                        'map series with svg resource',
+                        'pure map series with svg resource',
                         'Hover seat: check **tooltip** correct.'
                     ],
                     option: option,
-                    info: [],
-                    infoKey: 'allSelected',
+                    info: {},
+                    infoKey: 'event',
                     height: 300
                     // buttons: [{text: 'btn-txt', onclick: function () {}}],
                     // recordCanvas: true,
                 });
 
-                if (chart) {
-                    chart.on('selectchanged', function (params) {
-                        chart.__testHelper.updateInfo(
-                            params.selected,
-                            'selected'
-                        );
-                    });
-                }
+                listenAndPrintSelectChanged(chart);
+
+            });
+
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+            $.ajax({
+                url: '../../vis-data/map/svg/seats/seatmap-example.svg',
+                dataType: 'text'
+            }).done(function (svg) {
+
+                echarts.registerMap('seatmap', {
+                    svg: svg
+                });
+
+                option = {
+                    tooltip: {
+                    },
+                    geo: {
+                        map: 'seatmap',
+                        roam: true,
+                        selectedMode: 'multiple',
+                        // height: 100,
+                        // zoom: 1.5
+                        emphasis: {
+                            label: {
+                                textBorderColor: '#fff',
+                                textBorderWidth: 2
+                            }
+                        },
+                        select: {
+                            itemStyle: {
+                                color: '#b50205'
+                            },
+                            label: {
+                                show: false,
+                                textBorderColor: '#fff',
+                                textBorderWidth: 2
+                            }
+                        }
+                    },
+                    series: {
+                        type: 'map',
+                        selectedMode: 'multiple',
+                        coordinateSystem: 'geo',
+                        geoIndex: 0
+                    }
+                };
+
+                var chart = testHelper.create(echarts, 'main_map_geo_svg', {
+                    title: [
+                        'map series on declared geo with svg resource',
+                        'Hover seat: check **tooltip** correct.'
+                    ],
+                    option: option,
+                    info: {},
+                    infoKey: 'event',
+                    height: 300
+                    // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                    // recordCanvas: true,
+                });
+
+                listenAndPrintSelectChanged(chart);
 
             });