apache / apache/echarts

[Bug] geo3D scatter3D Don't show tooltip

Open
#21,088 0 comments 0 reactions 0 assignees View on GitHub
bug en pending
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.