[Bug] geo.projection setting are not taking effect #20360
Description
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