[Bug] geo散点图tooltip隐藏bug

Mying666 commented 2 months ago

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html

Steps to Reproduce

1、打开https://echarts.apache.org/examples/zh/editor.html 2、复制代码 myChart.showLoading(); const points = [ { name: '北京', value: ['116.395645038', '39.9299857781', 10] }, { name: '焦作', value: ['113.211835885', '35.234607555', 2] }, { name: '广州', value: ['113.266887', '23.133306', 6] } ]; $.get(ROOT_PATH + '/data/asset/geo/world.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('china', geoJson); myChart.setOption( (option = { tooltip: { show: true }, color: ['#00EEFF'], backgroundColor: 'transparent', geo: { // 地图配置 map: 'china', tooltip: { show: false // textStyle: { // color: 'transparent' // }, // backgroundColor: 'transparent', // borderColor: 'transparent', // shadowColor: { // show: false // } }, label: { // 图形上的文本标签 normal: { // 通常状态下的样式 show: true, textStyle: { color: '#fff', fontSize: 8 } }, emphasis: { // 鼠标放上去高亮的样式 textStyle: { color: '#fff' } } }, roam: false, // 是否允许缩放 itemStyle: { normal: { // 通常状态下的样式 color: '#5089EC', // 地图背景色 borderColor: 'rgba(57, 88, 165, 1)', borderWidth: 1, // areaColor: 'rgba(20, 30, 70, 1)', fontSize: 8, areaColor: { // 地图区域的颜色 type: 'radial', // 径向渐变 x: 0.5, // 圆心 y: 0.5, // 圆心 r: 0.8, // 半径 colorStops: [ { // 0% 处的颜色 offset: 0, color: 'rgba(20, 30, 70, 1)' }, { // 100% 处的颜色 offset: 0.9, color: 'rgba(20, 30, 70, 0.9)' } ] } }, // 鼠标放上去高亮的样式 emphasis: { color: 'rgba(37, 43, 61, .5)', //悬浮背景 areaColor: '#2386AD', borderWidth: 1 } }, zoom: 1.1 }, series: [ { // 散点系列数据 name: '成单数量', type: 'scatter', // 带有涟漪特效动画的散点（气泡）图 tooltip: { show: true, trigger: 'item', textStyle: { color: '#333' }, backgroundColor: '#fff', borderColor: '#00EEFF', shadowColor: '#eee' }, coordinateSystem: 'geo', // 该系列使用的坐标系:地理坐标系 colorBy: 'series', encode: { value: 2 }, label: { position: 'left', formatter: (params) => params.value[2], show: true }, emphasis: { label: { formatter: (params) => params.value[2], show: true } }, zlevel: 1, // 所有图形的 zlevel 值。 data: points.map((item) => { return { ...item, symbolSize: item.value[2] > 3 ? item.value[2] * 2 : 5, itemStyle: { color: '#00EEFF' } }; }) } ] }) ); });

3、鼠标放到散点图上，显示tooltip 4、鼠标继续在地图板块上移动。

Current Behavior

geo散点图tooltip显示之后，直到鼠标移除地图才能小时

Expected Behavior

在散点显示tooltip时，设置geo的tooltip不显示。希望在鼠标移出散点时就消失tooltip。现在是如果鼠标移除散点但未移除地图，tooltip不会隐藏。

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Mying666 commented 2 months ago

现在暂时将geo的tooltip显示的颜色都设置了透明色。正常如果将geo的tooltip设置了show=false。是不是应该在移出散点就隐藏了呢。

helgasoft commented 2 months ago

Normally, if the geo tooltip is set to show=false, it should be hidden when the scatter point is moved out.

yes, it is a bug. And your workaround works great :

    geo: {
      map: 'china',
      tooltip: {
        show: true,  // disable tooltip thru style:
        textStyle: { color: 'transparent' },
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        shadowColor: { show: false }
      }, ...

apache / echarts