[Bug] geo.projection setting are not taking effect

[aaa930811]

Version

5.5.1

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/yyksql?file=%2Findex.js

Steps to Reproduce

<template>
    <div class="geoMap"></div>
</template>

<script>
    import * as echarts from 'echarts'
    import {
        fetchChinaMapData
    } from '@/api/getLocalChinaMap'
    import {
        getOrganizationConfig
    } from '@/api/data'

    export default {
        name: 'GeoMap',
        data() {
            return {
                geoData: []
            }
        },
        methods: {
            setData() {
                getOrganizationConfig().then(res => {
                    console.log(res)
                    const geoData = this.convertGeoData(res.result)
                    // console.log('geoData', geoData)
                    this.geoData = geoData
                    this.setChart()
                })
            },
            setChart() {
                let myChart = this.$echarts(this.$el);
                myChart.clear();
                myChart.resize()
                // 再得到数据的基础上，进行地图绘制
                fetchChinaMapData().then(res => {
                    // 注册地图(数据放在axios返回对象的data中哦)
                    echarts.registerMap('China', res);
                    let option = {
                        tooltip: {}, // 配置提示框，有这个配置项即可
                        geo: {
                            map: 'China', // 选择你需要的地图类型
                            roam: true,
                            zoom: 1,
                            center: [103.97, 32.71],
                            projection: {
                                project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math
                                    .PI / 2 + point[1] / 180 * Math.PI) / 2))],
                                unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI *
                                    Math.atan(Math.exp(point[1])) - 90
                                ]
                            },
                            label: {
                                show: true,
                                color: 'white',
                                fontSize: 10
                            },
                            itemStyle: {
                                areaColor: '#1E90FF',
                                borderColor: '#fff'
                            }
                        },
                        series: [
                            // {
                            //     type: 'map',
                            //     map: 'China',
                            //     projection: {
                            //         project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((
                            //             Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
                            //         unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI *
                            //             Math.atan(Math.exp(point[1])) - 90
                            //         ]
                            //     },
                            //     roam: true,
                            //     zoom: 1,
                            //     // center: [103.97, 32.71],
                            //     // zlevel: 2,
                            //     label: {
                            //         show: true,
                            //         color: 'white',
                            //         fontSize: 10
                            //     },
                            //     itemStyle: {
                            //         areaColor: '#1E90FF',
                            //         borderColor: '#fff'
                            //     }
                            // },
                            {
                                name: '合作机构',
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                // zlevel: 3,
                                data: this.geoData,
                                encode: {
                                    value: 2
                                },
                                symbolSize: function (val) {
                                    return val[2];
                                },
                                showEffectOn: 'render', // 闪动效果的触发时机
                                rippleEffect: {
                                    // color: '#28CCB6',
                                    brushType: 'stroke', // 光圈的样式，'stroke'表示仅描边
                                    scale: 4, // 光圈放大倍数
                                    // period: 5, // 光圈动画的周期，值越小，速度越快
                                },
                                itemStyle: {
                                    color: {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.5,
                                        colorStops: [{
                                            offset: 0,
                                            color: '#9cfda3' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#2cedf460', // 100% 处的颜色

                                        }],
                                        global: false // 缺省为 false
                                    },
                                },
                                tooltip: {
                                    formatter: function (params) {
                                        return params.seriesName + '<br/>' + params.marker + params
                                            .name;
                                    }
                                }
                            }
                        ]
                    };
                    // console.log(option)
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                })
            },
            convertGeoData(data) {
                const output = data.map(item => ({
                    name: item.organization_name,
                    value: [item.longitude, item.latitude, 10]
                }));
                return output;
            }
        },
        mounted() {
            this.setData()
        }
    }
</script>
<style lang="less" scoped>
    .geoMap {
        position: relative;
        width: 100%;
        height: 100%;
    }
</style>

Current Behavior

我需要在geo地图上设置墨卡托投影，但是当我设置geo.projection时地图就直接不显示了

Expected Behavior

我能够正确的在地图上设置墨卡托投影，并且展示带有涟漪特效动画的散点（气泡）图

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[helgasoft]

geo.projection works fine - Demo.
📌 please close issue if problem solved.