[Bug] When you want to change the color to the last object in the map Json, all regions become the last color given

[webguicai]

Version

5.4.0

Link to Minimal Reproduction

No response

Steps to Reproduce

@leeight @bantic

<!-- http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=24.9792116201569&lng=104.86930847167969&zoom=10 -->

<!-- 引入vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- 我是dom -->
<div id="app" v-cloak>
    <div ref="echart" class="chart" style="width: 98vw; height: 98vh"></div>
</div>

<script type="module">
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                echartIns: null,
            };
        },
        mounted() {
            // 初始化echarts
            this.echartIns = echarts.init(this.$refs.echart);
            this.renderChart();
        },
        methods: {
            async renderChart(code) {
                this.echartIns.off("click");
                const geoJson = await this.getMap(code);
                echarts.registerMap("map", geoJson.data);
                const option = {
                    geo: {
                        map: 'map',
                        zoom: 1,
                        silent: true,
                        regions: [  // There is a bug when the last corresponding json is used here.  There is no problem if it is given to other cities alone
                            {
                                name: '桐乡市',
                                itemStyle: {
                                    opacity: 1,
                                    borderColor: '#fff',
                                    borderWidth: 1,
                                    areaColor: 'green',
                                },
                            },
                        ],
                        itemStyle: {
                            areaColor: 'rgba(0,0,0,0)',
                        },
                    },
                    series: [
                        {
                            name: '地图',
                            type: 'map',
                            map: 'map',
                            zoom: 1,
                            itemStyle: {
                                color: 'blue',
                                emphasis: {
                                    areaColor: '#fff',
                                },
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                },
                            },
                        },
                    ],
                };
                this.echartIns.setOption(option);
                // 点击获取下一级地图
                this.echartIns.on("click", (msg) => {
                    const cityMsg = geoJson.data.features.find(
                        (item) => item.properties.name === msg.name
                    ).properties;
                    this.renderChart(
                        cityMsg.adcode + (cityMsg.childrenNum > 0 ? "_full" : "")
                    );
                });
            },
            // 获取地图数据
            getMap(code = "330400_full") {
                return axios.get(
                    `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}`
                );
            },
        },
    }).mount("#app");
</script>
<style>
    [v-cloak] {
        display: none;
    }

    html::-webkit-scrollbar {
        display: none;
    }
</style>

Current Behavior

When you want to change the color to the last object in the map Json, all regions become the last color given @leeight @bantic

Expected Behavior

The corresponding block is given the corresponding color @leeight @bantic

Environment

- OS:
- Browser: google
- Framework:

Any additional comments?

这两天需要发布，请帮忙看一下，尽快修复

[echarts-bot[bot]]

@webguicai It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** [Bug] mapMap regions: When the desired color changes to the last object of the map, Json, all areas become the last given color

[helgasoft]

The problem is with your series itemStyle.areaColor. Set it to 'transparent' for a solution. See demo code. geo and series act as separate maps and series is over geo. That's why areaColor needs to be transparent. Related to #18008