You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2021/05/21 08:52:11 UTC

[echarts] branch fix/geo-label updated (71701f8 -> be2770e)

This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a change to branch fix/geo-label
in repository https://gitbox.apache.org/repos/asf/echarts.git.


    from 71701f8  test: add test case for geo-label
     new 32cc0e3  fix: fix geo and map click event params missing props (brought by 5.1.0, partial fixed in 5.1.1)
     new be2770e  fix: map/geo label move when hover. fix #14796

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 src/component/helper/MapDraw.ts            |  87 +++++----
 src/label/labelStyle.ts                    |   9 -
 test/geo-label.html                        | 135 -------------
 test/geo-map-features.html                 | 292 +++++++++++++++++++++++++++++
 test/runTest/actions/__meta__.json         |   1 +
 test/runTest/actions/geo-map-features.json |   1 +
 6 files changed, 347 insertions(+), 178 deletions(-)
 delete mode 100644 test/geo-label.html
 create mode 100644 test/geo-map-features.html
 create mode 100644 test/runTest/actions/geo-map-features.json

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[echarts] 01/02: fix: fix geo and map click event params missing props (brought by 5.1.0, partial fixed in 5.1.1)

Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a commit to branch fix/geo-label
in repository https://gitbox.apache.org/repos/asf/echarts.git

commit 32cc0e3c764818730ac0745738216ef1bd3ccf0e
Author: 100pah <su...@gmail.com>
AuthorDate: Fri May 21 13:20:13 2021 +0800

    fix: fix geo and map click event params missing props (brought by 5.1.0, partial fixed in 5.1.1)
---
 src/component/helper/MapDraw.ts |  66 +++++----
 src/label/labelStyle.ts         |   9 --
 test/geo-label.html             | 135 ------------------
 test/geo-map-features.html      | 304 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 345 insertions(+), 169 deletions(-)

diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts
index ef44f80..e76c877 100644
--- a/src/component/helper/MapDraw.ts
+++ b/src/component/helper/MapDraw.ts
@@ -30,15 +30,15 @@ import {
 import geoSourceManager from '../../coord/geo/geoSourceManager';
 import {getUID} from '../../util/component';
 import ExtensionAPI from '../../core/ExtensionAPI';
-import GeoModel, { GeoCommonOptionMixin, GeoItemStyleOption } from '../../coord/geo/GeoModel';
-import MapSeries from '../../chart/map/MapSeries';
+import GeoModel, { GeoCommonOptionMixin, GeoItemStyleOption, RegoinOption } from '../../coord/geo/GeoModel';
+import MapSeries, { MapDataItemOption } from '../../chart/map/MapSeries';
 import GlobalModel from '../../model/Global';
 import { Payload, ECElement, LineStyleOption, InnerFocus, DisplayState } from '../../util/types';
 import GeoView from '../geo/GeoView';
 import MapView from '../../chart/map/MapView';
 import Geo from '../../coord/geo/Geo';
 import Model from '../../model/Model';
-import { setLabelStyle, getLabelStatesModels, enableLayoutLayoutFeatures } from '../../label/labelStyle';
+import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import { getECData } from '../../util/innerStore';
 import { createOrUpdatePatternFromDecal } from '../../util/decal';
 import ZRText, {TextStyleProps} from 'zrender/src/graphic/Text';
@@ -225,7 +225,11 @@ class MapDraw {
     }
 
     private _buildGeoJSON(viewBuildCtx: ViewBuildContext): void {
-        const nameMap = this._regionsGroupByName = zrUtil.createHashMap<RegionsGroup>();
+        const regionsGroupByName = this._regionsGroupByName = zrUtil.createHashMap<RegionsGroup, string>();
+        const regionsInfoByName = zrUtil.createHashMap<{
+            dataIdx: number;
+            regionModel: Model<RegoinOption> | Model<MapDataItemOption>;
+        }, string>();
         const regionsGroup = this._regionsGroup;
         const transformInfoRaw = viewBuildCtx.transformInfoRaw;
         const mapOrGeoModel = viewBuildCtx.mapOrGeoModel;
@@ -243,20 +247,25 @@ class MapDraw {
         // Only when the resource is GeoJSON, there is `geo.regions`.
         zrUtil.each(viewBuildCtx.geo.regions, function (region: GeoJSONRegion) {
             const regionName = region.name;
-            const regionModel = mapOrGeoModel.getRegionModel(regionName);
-            const dataIdx = data ? data.indexOfName(regionName) : null;
 
             // Consider in GeoJson properties.name may be duplicated, for example,
             // there is multiple region named "United Kindom" or "France" (so many
             // colonies). And it is not appropriate to merge them in geo, which
             // will make them share the same label and bring trouble in label
             // location calculation.
-            let regionGroup = nameMap.get(regionName);
-            const hasRegionGroup = !!regionGroup;
+            let regionGroup = regionsGroupByName.get(regionName);
+            let { dataIdx, regionModel } = regionsInfoByName.get(regionName) || {};
 
-            if (!hasRegionGroup) {
-                regionGroup = nameMap.set(regionName, new graphic.Group() as RegionsGroup);
+            if (!regionGroup) {
+                regionGroup = regionsGroupByName.set(regionName, new graphic.Group() as RegionsGroup);
                 regionsGroup.add(regionGroup);
+
+                dataIdx = data ? data.indexOfName(regionName) : null;
+                regionModel = viewBuildCtx.isGeo
+                    ? mapOrGeoModel.getRegionModel(regionName)
+                    : (data ? data.getItemModel(dataIdx) as Model<MapDataItemOption> : null);
+
+                regionsInfoByName.set(regionName, { dataIdx, regionModel });
             }
 
             const compoundPath = new graphic.CompoundPath({
@@ -267,19 +276,6 @@ class MapDraw {
             });
             regionGroup.add(compoundPath);
 
-            if (!hasRegionGroup) {
-                // ensure children have been added to group before calling resetEventTriggerForRegion
-                resetEventTriggerForRegion(
-                    viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel, dataIdx
-                );
-                resetTooltipForRegion(
-                    viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel
-                );
-                resetStateTriggerForRegion(
-                    viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel
-                );
-            }
-
             zrUtil.each(region.geometries, function (geometry) {
                 if (geometry.type !== 'polygon') {
                     return;
@@ -322,6 +318,21 @@ class MapDraw {
             resetLabelForRegion(
                 viewBuildCtx, compoundPath, regionName, regionModel, mapOrGeoModel, dataIdx, centerPt
             );
+        });
+
+        // Ensure children have been added to `regionGroup` before calling them.
+        regionsGroupByName.each(function (regionGroup, regionName) {
+            const { dataIdx, regionModel } = regionsInfoByName.get(regionName);
+
+            resetEventTriggerForRegion(
+                viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel, dataIdx
+            );
+            resetTooltipForRegion(
+                viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel
+            );
+            resetStateTriggerForRegion(
+                viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel
+            );
 
         }, this);
     }
@@ -373,7 +384,7 @@ class MapDraw {
             // an area hovered that make some inner city can not be clicked.
             (el as ECElement).z2EmphasisLift = 0;
 
-            // If self named, that is, if tag is inside a named <g> (where `namedFrom` does not exists):
+            // If self named:
             if (!namedItem.namedFrom) {
                 // label should batter to be displayed based on the center of <g>
                 // if it is named rather than displayed on each child.
@@ -732,7 +743,12 @@ function resetLabelForRegion(
             }
         }
 
-        enableLayoutLayoutFeatures(el, dataIdx, null);
+        // PENDING:
+        // If labelLayout is enabled (test/label-layout.html), el.dataIndex should be specified.
+        // But el.dataIndex is also used to determine whether user event should be triggered,
+        // where el.seriesIndex or el.dataModel must be specified. At present for a single el
+        // there is not case that "only label layout enabled but user event disabled", so here
+        // we depends `resetEventTriggerForRegion` to do the job of setting `el.dataIndex`.
 
         (el as ECElement).disableLabelAnimation = true;
     }
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index 002a77d..0012983 100644
--- a/src/label/labelStyle.ts
+++ b/src/label/labelStyle.ts
@@ -729,12 +729,3 @@ export function animateLabelValue(
         : updateProps
     )(textEl, {}, animatableModel, dataIndex, null, during);
 }
-
-export function enableLayoutLayoutFeatures(
-    el: Element,
-    dataIndex: number,
-    dataType: SeriesDataType
-): void {
-    getECData(el).dataIndex = dataIndex;
-    getECData(el).dataType = dataType;
-}
diff --git a/test/geo-label.html b/test/geo-label.html
deleted file mode 100644
index b972f6b..0000000
--- a/test/geo-label.html
+++ /dev/null
@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-   http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <script src="lib/simpleRequire.js"></script>
-        <script src="lib/config.js"></script>
-        <script src="lib/jquery.min.js"></script>
-        <script src="lib/facePrint.js"></script>
-        <script src="lib/testHelper.js"></script>
-        <!-- <script src="ut/lib/canteen.js"></script> -->
-        <link rel="stylesheet" href="lib/reset.css" />
-    </head>
-    <body>
-        <style>
-        </style>
-
-
-
-        <div id="main0"></div>
-
-
-        <script>
-        require([
-            'echarts',
-        ], function (echarts) {
-
-            var NAME = 'AAAA';
-            var testGeoJSON1 = {
-                'type': 'FeatureCollection',
-                'features': [{
-                    'type': 'Feature',
-                    'geometry': { 'type': 'Polygon', 'coordinates': [
-                        [[2000, 2000], [2100, 2000], [2100, 2100], [2000, 2100]]
-                    ]},
-                    'properties': {
-                        'name': NAME, 'childNum': 1,
-                        cp: [2000, 4000]
-                    }
-                // }, {
-                //     'type': 'Feature',
-                //     'geometry': { 'type': 'Polygon', 'coordinates': [
-                //         [[3000, 2000], [7000, 2000], [7000, 5000], [3000, 5000]]
-                //     ]},
-                //     'properties': {
-                //         'name': NAME, 'childNum': 1,
-                //         cp: [2600, 5200]
-                //     }
-                }]
-            };
-            var mapType = 'world1';
-            echarts.registerMap(mapType, testGeoJSON1);
-
-            var option = {
-                animation: false,
-                backgroundColor: '#404a59',
-                animationDurationUpdate: 800,
-                visualMap: {
-                    max: 3000,
-                    show: false
-                },
-                series: [{
-                    type: 'map',
-                    map: mapType,
-                    roam: true,
-                    zoom: 0.03,
-                    label: {
-                        show: false,
-                        opacity: 0.5,
-                        formatter: '{c}'
-                    },
-                    // itemStyle: {
-                    //     borderWidth: 0
-                    // },
-                    emphasis: {
-                        itemStyle: {
-                            shadowColor: 'rgba(0, 0, 0, 0.5)',
-                            shadowBlur: 0,
-                            borderWidth: 0
-                        }
-                    },
-                    data: [{
-                        name: NAME,
-                        value: 12361,
-                        label: {
-                            normal: {
-                                textStyle: {
-                                    color: '#50d5d3',
-                                    fontWeight: 'bolder',
-                                    fontSize: Math.round(12361 / 500) + 20
-                                },
-                                show: true
-                            },
-                            emphasis: {
-                                show: true
-                            }
-                        }
-                    }]
-                }]
-            };
-
-            var chart = testHelper.create(echarts, 'main0', {
-                title: [
-                    'Hover on the rect, the label should not be moved'
-                ],
-                option: option,
-                height: 800,
-            });
-        });
-        </script>
-
-
-    </body>
-</html>
-
diff --git a/test/geo-map-features.html b/test/geo-map-features.html
new file mode 100644
index 0000000..d2ed57f
--- /dev/null
+++ b/test/geo-map-features.html
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="map_click_event"></div>
+        <div id="geo_click_event"></div>
+        <!-- <div id="main0"></div> -->
+
+
+
+        <script>
+        require([
+            'echarts',
+        ], function (echarts) {
+
+            var testGeoJSON1 = {
+                'type': 'FeatureCollection',
+                'features': [{
+                    'type': 'Feature',
+                    'geometry': { 'type': 'Polygon', 'coordinates': [
+                        [[2000, 3000], [2100, 3000], [3100, 2100], [2000, 2100]]
+                    ]},
+                    'properties': {
+                        'name': 'AAA', 'childNum': 1
+                    }
+                }, {
+                    'type': 'Feature',
+                    'geometry': { 'type': 'Polygon', 'coordinates': [
+                        [[5500, 3000], [6000, 3000], [5500, 2100], [6000, 2100]]
+                    ]},
+                    'properties': {
+                        'name': 'BBB', 'childNum': 1
+                    }
+                }, {
+                    'type': 'Feature',
+                    'geometry': { 'type': 'Polygon', 'coordinates': [
+                        [[3000, 2000], [5000, 2000], [5000, 5000], [3000, 5000]]
+                    ]},
+                    'properties': {
+                        'name': 'AAA', 'childNum': 1
+                    }
+                }]
+            };
+            var mapType = 'world1';
+            echarts.registerMap(mapType, testGeoJSON1);
+
+            var option = {
+                tooltip: {},
+                series: [{
+                    type: 'map',
+                    map: mapType,
+                    label: {
+                        formatter: '{c}'
+                    },
+                    data: [{
+                        name: 'AAA',
+                        value: 76543,
+                    }, {
+                        name: 'BBB',
+                        value: 12345
+                    }]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'map_click_event', {
+                title: [
+                    'Map: Click on the regions. **checked: Pass** should be displayed.'
+                ],
+                option: option,
+                height: 400,
+            });
+
+            if (chart) {
+                chart.on('click', {seriesIndex: 0, name: 'AAA'}, function (event) {
+                    checkClickEvent(event, 'AAA', 76543);
+                });
+                chart.on('click', {seriesIndex: 0, name: 'BBB'}, function (event) {
+                    checkClickEvent(event, 'BBB', 12345);
+                });
+                function checkClickEvent(event, name, value) {
+                    testHelper.printAssert(chart, function (assert) {
+                        assert(event.componentType === 'series');
+                        assert(event.seriesType === 'map');
+                        assert(event.seriesIndex === 0);
+                        assert(event.name === name);
+                        assert(event.value === value);
+                        assert(event.data.name === name);
+                        assert(event.data.value === value);
+                    });
+                }
+            }
+        });
+        </script>
+
+
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+        ], function (echarts) {
+
+            var testGeoJSON1 = {
+                'type': 'FeatureCollection',
+                'features': [{
+                    'type': 'Feature',
+                    'geometry': { 'type': 'Polygon', 'coordinates': [
+                        [[2000, 3000], [2100, 3000], [3100, 2100], [2000, 2100]]
+                    ]},
+                    'properties': {
+                        'name': 'AAA', 'childNum': 1
+                    }
+                }, {
+                    'type': 'Feature',
+                    'geometry': { 'type': 'Polygon', 'coordinates': [
+                        [[5500, 3000], [6000, 3000], [5500, 2100], [6000, 2100]]
+                    ]},
+                    'properties': {
+                        'name': 'BBB', 'childNum': 1
+                    }
+                }, {
+                    'type': 'Feature',
+                    'geometry': { 'type': 'Polygon', 'coordinates': [
+                        [[3000, 2000], [5000, 2000], [5000, 5000], [3000, 5000]]
+                    ]},
+                    'properties': {
+                        'name': 'AAA', 'childNum': 1
+                    }
+                }]
+            };
+            var mapType = 'world1';
+            echarts.registerMap(mapType, testGeoJSON1);
+
+            var option = {
+                tooltip: {},
+                geo: [{
+                    map: mapType
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'geo_click_event', {
+                title: [
+                    'Geo: Click on the regions. **checked: Pass** should be displayed.'
+                ],
+                option: option,
+                height: 400,
+            });
+
+            if (chart) {
+                chart.on('click', {geoIndex: 0, name: 'AAA'}, function (event) {
+                    checkClickEvent(event, 'AAA', 76543);
+                });
+                chart.on('click', {geoIndex: 0, name: 'BBB'}, function (event) {
+                    checkClickEvent(event, 'BBB', 12345);
+                });
+                function checkClickEvent(event, name, value) {
+                    console.log(event);
+                    testHelper.printAssert(chart, function (assert) {
+                        assert(event.componentType === 'geo');
+                        assert(event.componentIndex === 0);
+                        assert(event.name === name);
+                    });
+                }
+            }
+        });
+        </script>
+
+
+
+
+        <script>
+        require([
+            'echarts',
+        ], function (echarts) {
+
+            var NAME = 'AAAA';
+            var testGeoJSON1 = {
+                'type': 'FeatureCollection',
+                'features': [{
+                    'type': 'Feature',
+                    'geometry': { 'type': 'Polygon', 'coordinates': [
+                        [[2000, 2000], [2100, 2000], [2100, 2100], [2000, 2100]]
+                    ]},
+                    'properties': {
+                        'name': NAME, 'childNum': 1,
+                        cp: [2000, 4000]
+                    }
+                // }, {
+                //     'type': 'Feature',
+                //     'geometry': { 'type': 'Polygon', 'coordinates': [
+                //         [[3000, 2000], [7000, 2000], [7000, 5000], [3000, 5000]]
+                //     ]},
+                //     'properties': {
+                //         'name': NAME, 'childNum': 1,
+                //         cp: [2600, 5200]
+                //     }
+                }]
+            };
+            var mapType = 'world1';
+            echarts.registerMap(mapType, testGeoJSON1);
+
+            var option = {
+                animation: false,
+                backgroundColor: '#404a59',
+                animationDurationUpdate: 800,
+                visualMap: {
+                    max: 3000,
+                    show: false
+                },
+                series: [{
+                    type: 'map',
+                    map: mapType,
+                    roam: true,
+                    zoom: 0.03,
+                    label: {
+                        show: false,
+                        opacity: 0.5,
+                        formatter: '{c}'
+                    },
+                    // itemStyle: {
+                    //     borderWidth: 0
+                    // },
+                    emphasis: {
+                        itemStyle: {
+                            shadowColor: 'rgba(0, 0, 0, 0.5)',
+                            shadowBlur: 0,
+                            borderWidth: 0
+                        }
+                    },
+                    data: [{
+                        name: NAME,
+                        value: 12361,
+                        label: {
+                            normal: {
+                                textStyle: {
+                                    color: '#50d5d3',
+                                    fontWeight: 'bolder',
+                                    fontSize: Math.round(12361 / 500) + 20
+                                },
+                                show: true
+                            },
+                            emphasis: {
+                                show: true
+                            }
+                        }
+                    }]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Hover on the rect, the label should not be moved'
+                ],
+                option: option,
+                height: 800,
+            });
+        });
+        </script>
+
+
+
+
+
+    </body>
+</html>
+

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[echarts] 02/02: fix: map/geo label move when hover. fix #14796

Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a commit to branch fix/geo-label
in repository https://gitbox.apache.org/repos/asf/echarts.git

commit be2770ed02d6dce0ed44bdcfb0b3f4c371a4208b
Author: 100pah <su...@gmail.com>
AuthorDate: Fri May 21 16:51:19 2021 +0800

    fix: map/geo label move when hover. fix #14796
---
 src/component/helper/MapDraw.ts            | 21 ++++++++++-------
 test/geo-map-features.html                 | 38 ++++++++++--------------------
 test/runTest/actions/__meta__.json         |  1 +
 test/runTest/actions/geo-map-features.json |  1 +
 4 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts
index e76c877..31ff42d 100644
--- a/src/component/helper/MapDraw.ts
+++ b/src/component/helper/MapDraw.ts
@@ -731,15 +731,18 @@ function resetLabelForRegion(
         if (textEl) {
             mapLabelRaw(textEl).ignore = textEl.ignore;
 
-            if (el.textConfig) {
-                if (labelXY) {
-                    // Compute a relative offset based on the el bounding rect.
-                    const rect = el.getBoundingRect().clone();
-                    el.textConfig.position = [
-                        ((labelXY[0] - rect.x) / rect.width * 100) + '%',
-                        ((labelXY[1] - rect.y) / rect.height * 100) + '%'
-                    ];
-                }
+            if (el.textConfig && labelXY) {
+                // Compute a relative offset based on the el bounding rect.
+                const rect = el.getBoundingRect().clone();
+                // Need to make sure the percent position base on the same rect in normal and
+                // emphasis state. Otherwise if using boundingRect of el, but the emphasis state
+                // has borderWidth (even 0.5px), the text position will be changed obviously
+                // if the position is very big like ['1234%', '1345%'].
+                el.textConfig.layoutRect = rect;
+                el.textConfig.position = [
+                    ((labelXY[0] - rect.x) / rect.width * 100) + '%',
+                    ((labelXY[1] - rect.y) / rect.height * 100) + '%'
+                ];
             }
         }
 
diff --git a/test/geo-map-features.html b/test/geo-map-features.html
index d2ed57f..653afae 100644
--- a/test/geo-map-features.html
+++ b/test/geo-map-features.html
@@ -39,7 +39,7 @@ under the License.
 
         <div id="map_click_event"></div>
         <div id="geo_click_event"></div>
-        <!-- <div id="main0"></div> -->
+        <div id="label_position"></div>
 
 
 
@@ -248,44 +248,32 @@ under the License.
                 series: [{
                     type: 'map',
                     map: mapType,
-                    roam: true,
                     zoom: 0.03,
                     label: {
-                        show: false,
-                        opacity: 0.5,
-                        formatter: '{c}'
+                        formatter: '{c}',
+                        textStyle: {
+                            color: '#50d5d3',
+                            fontWeight: 'bolder',
+                            fontSize: Math.round(12361 / 500) + 20
+                        },
+                        show: true
                     },
-                    // itemStyle: {
-                    //     borderWidth: 0
-                    // },
                     emphasis: {
+                        show: true,
                         itemStyle: {
                             shadowColor: 'rgba(0, 0, 0, 0.5)',
-                            shadowBlur: 0,
-                            borderWidth: 0
+                            shadowBlur: 20,
+                            borderWidth: 2
                         }
                     },
                     data: [{
                         name: NAME,
-                        value: 12361,
-                        label: {
-                            normal: {
-                                textStyle: {
-                                    color: '#50d5d3',
-                                    fontWeight: 'bolder',
-                                    fontSize: Math.round(12361 / 500) + 20
-                                },
-                                show: true
-                            },
-                            emphasis: {
-                                show: true
-                            }
-                        }
+                        value: 12361
                     }]
                 }]
             };
 
-            var chart = testHelper.create(echarts, 'main0', {
+            var chart = testHelper.create(echarts, 'label_position', {
                 title: [
                     'Hover on the rect, the label should not be moved'
                 ],
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 1040db8..646e5d8 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -80,6 +80,7 @@
   "funnel": 2,
   "gauge-simple": 2,
   "geo-map": 3,
+  "geo-map-features": 3,
   "geo-svg": 8,
   "geo-svg-demo": 6,
   "geoScatter": 1,
diff --git a/test/runTest/actions/geo-map-features.json b/test/runTest/actions/geo-map-features.json
new file mode 100644
index 0000000..92393d4
--- /dev/null
+++ b/test/runTest/actions/geo-map-features.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousemove","time":1352,"x":580,"y":242},{"type":"mousemove","time":1552,"x":556,"y":300},{"type":"mousemove","time":1752,"x":546,"y":318},{"type":"mousemove","time":1960,"x":545,"y":320},{"type":"mousedown","time":2013,"x":545,"y":320},{"type":"mouseup","time":2133,"x":545,"y":320},{"time":2134,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3135,"x":545,"y":320},{"type":"mousemove","time":3335,"x":535,"y":292},{"type":"mousemove","tim [...]
\ No newline at end of file

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org