From 8f3977327e40bfb9a70353d15582c475aa352137 Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Thu, 5 Dec 2024 14:35:16 +0800
Subject: [PATCH] refactor(geo): change option name to `echartsStyle` and
 enable more style options

---
 src/component/helper/MapDraw.ts |  10 +--
 src/coord/geo/Region.ts         |   4 +-
 test/geo-map.html               | 114 +++++++++++++++++++++++---------
 3 files changed, 86 insertions(+), 42 deletions(-)

diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts
index 6bc79d1a8b..635b998f88 100644
--- a/src/component/helper/MapDraw.ts
+++ b/src/component/helper/MapDraw.ts
@@ -302,13 +302,9 @@ class MapDraw {
                     ? mapOrGeoModel.getRegionModel(regionName)
                     : (data ? data.getItemModel(dataIdx) as Model<MapDataItemOption> : null);
 
-                // allow specified itemStyle in GeoJSON data
-                const regionItemStyle = region.properties && region.properties.itemStyle;
-                if (regionItemStyle) {
-                    const regionModelOption = regionModel.option;
-                    const modelItemStyle = regionModelOption.itemStyle || (regionModelOption.itemStyle = {});
-                    modelItemStyle && zrUtil.defaults(modelItemStyle, regionItemStyle);
-                }
+                // allow specified echarts style in GeoJSON data
+                const specifiedRegionStyle = region.properties && region.properties.echartsStyle;
+                specifiedRegionStyle && zrUtil.merge(regionModel.option, specifiedRegionStyle);
 
                 regionsInfoByName.set(regionName, { dataIdx, regionModel });
             }
diff --git a/src/coord/geo/Region.ts b/src/coord/geo/Region.ts
index 82d56bfecd..e03863dcd7 100644
--- a/src/coord/geo/Region.ts
+++ b/src/coord/geo/Region.ts
@@ -25,7 +25,7 @@ import { GeoJSON, GeoProjection, GeoSVGGraphicRoot } from './geoTypes';
 import * as matrix from 'zrender/src/core/matrix';
 import type Element from 'zrender/src/Element';
 import { each } from 'zrender/src/core/util';
-import type { GeoItemStyleOption } from './GeoModel';
+import type { RegoinOption } from './GeoModel';
 
 const TMP_TRANSFORM = [] as number[];
 
@@ -137,7 +137,7 @@ export class GeoJSONRegion extends Region {
 
     // Injected outside.
     properties: GeoJSON['features'][0]['properties'] & {
-        itemStyle?: GeoItemStyleOption
+        echartsStyle?: Omit<RegoinOption, 'name' | 'selected'>
     };
 
     constructor(
diff --git a/test/geo-map.html b/test/geo-map.html
index 4002e59384..5c7da0ecc2 100644
--- a/test/geo-map.html
+++ b/test/geo-map.html
@@ -463,18 +463,14 @@
                         map: 'china',
                         roam: true,
                         label: {
-                            normal: {
-                                show: true,
-                                textStyle: {
-                                    color: 'rgba(0,0,0,0.4)'
-                                }
-                            }
+                            show: true,
+                            color: 'rgba(0,0,0,0.4)'
                         },
                         itemStyle: {
-                            normal:{
-                                borderColor: 'rgba(0, 0, 0, 0.2)'
-                            },
-                            emphasis:{
+                            borderColor: 'rgba(0, 0, 0, 0.2)'
+                        },
+                        emphasis:{
+                            itemStyle: {
                                 color: null,
                                 areaColor: null,
                                 shadowOffsetX: 0,
@@ -495,18 +491,16 @@
                                 return val[2] / 10;
                             },
                             label: {
-                                normal: {
-                                    formatter: '{b}',
-                                    position: 'right',
-                                    show: false
-                                },
-                                emphasis: {
-                                    show: true
-                                }
+                                formatter: '{b}',
+                                position: 'right',
+                                show: false
                             },
                             itemStyle: {
-                                normal: {
-                                    color: '#ddb926'
+                                color: '#ddb926'
+                            },
+                            emphasis: {
+                                label: {
+                                    show: true
                                 }
                             }
                         },
@@ -623,21 +617,73 @@
                 'data/usa.json'
             ], function (echarts, usaGeoJSON) {
                 usaGeoJSON = JSON.parse(JSON.stringify(usaGeoJSON));
-                usaGeoJSON.features[0].properties.itemStyle = {
-                    areaColor: '#f00'
+                const features = usaGeoJSON.features
+                features[0].properties.echartsStyle = {
+                    itemStyle: {
+                        areaColor: '#f00'
+                    },
+                    label: {
+                        show: true,
+                        color: 'blue',
+                        fontWeight: 'bold'
+                    }
+                }
+                features[1].properties.echartsStyle = {
+                    itemStyle: {
+                        borderColor: '#f00',
+                        borderType: [5, 5],
+                        borderWidth: 2
+                    },
+                    emphasis: {
+                        itemStyle: {
+                            areaColor: 'purple'
+                        }
+                    },
+                    label: {
+                        fontStyle: 'italic',
+                        fontSize: 20,
+                        show: true,
+                        offset: [0, -30]
+                    }
                 };
-                usaGeoJSON.features[1].properties.itemStyle = {
-                    borderColor: '#f00',
-                    borderType: [5, 5]
+                features[2].properties.echartsStyle = {
+                    itemStyle: {
+                        opacity: 0.5
+                    }
                 };
-                usaGeoJSON.features[2].properties.itemStyle = {
-                    opacity: 0.5
+                features[3].properties.echartsStyle = {
+                    itemStyle: {
+                        borderWidth: 4
+                    }
                 };
-                usaGeoJSON.features[3].properties.itemStyle = {
-                   borderWidth: 4
+                features[4].properties.echartsStyle = {
+                    itemStyle: {
+                        areaColor: 'green'
+                    },
+                    emphasis: {
+                        focus: 'self'
+                    },
+                    label: {
+                        show: true,
+                        offset: [-60, 0],
+                        formatter: '{a}→'
+                    }
                 };
-                usaGeoJSON.features[4].properties.itemStyle = {
-                   areaColor: 'green'
+                features[5].properties.echartsStyle = {
+                    label: {
+                        show: true,
+                        formatter: 'GeoJSON\nlabel',
+                        color: '#fff'
+                    },
+                    tooltip: {
+                        show: true,
+                        formatter: 'This is a tooltip specified in GeoJSON data.'
+                    },
+                    select: {
+                        itemStyle: {
+                            areaColor: 'red'
+                        }
+                    }
                 };
 
                 echarts.registerMap('usa', usaGeoJSON, {
@@ -665,8 +711,10 @@
                         itemStyle: {
                             areaColor: '#14c4ba',
                             borderColor: '#000'
-                        }
-                    }
+                        },
+                        selectedMode: 'single',
+                    },
+                    tooltip: {}
                 };
 
                 var chart = testHelper.create(echarts, 'main2', {