3D地图上的scatter3D散点图，文本标签或散点图位置错乱。 #11797
Description
Version
4.5.0
Steps to reproduce
What is expected?
散点图和文字与地图区域对齐。
What is actually happening?
散点图位置错乱。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title></title>
<!-- <script src="js/jquery.min.js"></!-->
<script src="js/echarts.js"></script>
<script src="js/echarts-gl.js"></script>
<script src='js/china.js'></script>
<style>
#main {
width: 1500px;
height: 600px;
margin: auto;
border: 2px solid green;
}
</style>
</head>
<body>
<div id='main'></div>
</body>
<script>
var geoCoordMap = {
'江苏': [118.78, 32.04],
'安徽': [117.27, 31.86],
'浙江': [120.19, 30.26],
'江西': [115.89, 28.68],
'福建': [119.3, 26.08],
'广东': [113.23, 23.16],
'湖南': [113, 28.21],
'海南': [110.35, 20.02],
'辽宁': [123.38, 41.8],
'吉林': [125.35, 43.88],
'黑龙江': [126.63, 45.75],
'山西': [112.53, 37.87],
'陕西': [108.95, 34.27],
'台湾': [121.30, 25.03],
'北京': [116.46, 39.92],
'上海': [121.48, 31.22],
'重庆': [106.54, 29.59],
'天津': [117.2, 39.13],
'内蒙古': [111.65, 40.82],
'广西': [108.33, 22.84],
'西藏': [91.11, 29.97],
'宁夏': [106.27, 38.47],
'新疆': [87.68, 43.77],
'香港': [114.17, 22.28],
'澳门': [113.54, 22.19]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(8).concat(data[i].value)
});
}
}
console.log(res)
return res;
};
option = {
geo3D: {
map: 'china',
// boxWidth: 200,
itemStyle: {
color: '#1d5e98',
opacity: 1,
borderWidth: 0.4,
borderColor: '#000'
},
label: {
show: true,
textStyle: {
color: '#f00', //地图初始化区域字体颜色
fontSize: 8,
opacity: 1,
backgroundColor: 'rgba(0,23,11,0)'
},
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 3,
backgroundColor: 'rgba(0,23,11,0)'
}
}
},
},
series: [
{
type: "scatter3D",
coordinateSystem: 'geo3D',
symbol: 'pin',
symbolSize(val) {
const _val = ~~val[2];
return _val === 1 ? 1 : (_val > 100 ? 50 : 30)
},
opacity: 1,
itemStyle: {
borderWidth: 0.5,
borderColor: '#fff'
},
data: convertData([
{
name: "北京",
value: '90.00'
},
{
name: "福建",
value: '90.00'
},
{
name: "广东",
value: '128.14'
},
{
name: '香港',
value: '1'
}
])
},
{
type: "scatter3D",
coordinateSystem: 'geo3D',
symbol: 'pin',
symbolSize(val) {
const _val = ~~val[2];
return _val === 1 ? 1 : (_val > 100 ? 40 : 30)
},
opacity: 1,
itemStyle: {
borderWidth: 0.5,
borderColor: '#fff'
},
data: convertData([
{
name: "江西",
value: '90.00'
},
{
name: "浙江",
value: '90.00'
},
{
name: "宁夏",
value: '128.14'
}
])
}]
}
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option, true);
</script>
</html>