-
Notifications
You must be signed in to change notification settings - Fork 19.8k
Description
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