[Bug] geo3D scatter3D Don't show tooltip
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
echarts@5.6.0 echarts-gl@2.0.9
### Link to Minimal Reproduction
.
### Steps to Reproduce
`
import * as echarts from 'echarts'
import 'echarts-gl'
import liaoningGeoJSON from './ln.json'
export default {
name: '1',
data() {
return {
chartData: [],
chart: null,
data: [
{
name: '沈阳', value: 5000
},
{
name: '大连', value: 1000
},
{
name: '抚顺', value: 1000
},
]
}
},
props: {
id: {
type: String,
}
},
mounted() {
this.initChart();
},
methods: {
async initChart() {
// 注册地图数据
echarts.registerMap('liaoning', liaoningGeoJSON)
this.chart = echarts.init(this.$refs.chartContainer)
const option = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: { },
geo3D: {
map: 'liaoning',
regionHeight: 8,
label: {
show: true, // 默认显示标签
distance: 0, // 标签与地图距离
color: '#fff',
fontSize: 13,
lineHeight: 20,
},
itemStyle: {
color: '#4582d3',
borderWidth: 1,
borderColor: '#FFF'
},
viewControl: {
distance: 120,
alpha: 70, // 旋转角
beta: 0, // 倾斜角
autoRotateSpeed: 10,
projection: "orthographic",
orthographicSize: 120,
zoomSensitivity: 0
},
emphasis: {
itemStyle: {
color: '#66ccff'
},
},
},
series: [{
type: 'scatter3D',
coordinateSystem: 'geo3D',
symbolSize: (value, params) => this.getSymbolSize(value, params),
data: this.chartData,
itemStyle: {
color: '#ff8d00',
opacity: 0.9,
},
}]
}
this.chart.setOption(option)
//此处模拟接口
setTimeout(() => {
this.data.forEach(item => {
let find = liaoningGeoJSON.features.find(findItem => findItem.properties.name == item.name)
if (find) {
let centroid = find.properties.cp ? find.properties.cp : find.properties.centroid
this.chartData.push({
name: item.name,
value: [centroid[0], centroid[1], 1000, item.value],
})
}
});
this.chart.setOption(option)
}, 2000)
// 窗口大小变化时重绘
window.addEventListener('resize', function () {
this.chart.resize()
})
},
getSymbolSize(value, params) {
console.log(value, params);
let max = 50;
let min = 10;
const maxValue = Math.max(... this.data.map(item => item.value));
let findData = this.chartData.find(item => item.name == params.name)
if (findData) {
return Math.round((findData.value[3] / maxValue) * max)
} else {
return '0'
}
},
},
}
.page {
// padding: 20px;
color: white;
flex: 1;
width: 100%;
display: flex;
}
.left {
width: 30%;
}
.map {
flex: 1;
display: flex;
.map-charts {
flex: 1;
}
}
.right {
width: 30%;
}
`
### Current Behavior
i need tooltip
### Expected Behavior
show tooltip
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.