aaa930811 opened a new issue, #20360: URL: https://github.com/apache/echarts/issues/20360
### 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 ```markdown - OS: - Browser: - Framework: ``` ### Any additional comments? _No response_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
