Echarts通过setOption动态更新数据,并动态设置dataZoom显示最后1分钟数据区域时tooltip出现无法固定数据的问题。
场景:
myChart.current?.setOption({
...,
tooltip: {
triggerOn: "mousemove",
},
series: [...],
dataZoom: {
start: Math.floor((last / chartData.length) * 100),
end: 100,
}
});
大概场景如下: 鼠标移入显示某个tooltip后,随着数据和数据区域动态更新会偶现鼠标不移动,但tooltip获得的显示数据会更新。
可以通过监听鼠标事件,手动控制tooltip显示隐藏:
// 监听控制tooltip显示
myChart.current?.on('mouseover', function (params: any) {
if (params.componentType === 'series') {
myChart.current.dispatchAction({
type: 'showTip',
seriesIndex: params.seriesIndex,
dataIndex: params.dataIndex
});
}
});
// 手动隐藏tooltip和轴指示器
myChart.current?.on('mouseout', (params: any) => {
if (params.componentType === 'series') {
myChart.current.dispatchAction({
type: 'hideTip'
});
myChart.current.dispatchAction({
type: 'updateAxisPointer',
currTrigger: 'leave',
xAxisIndex: 0,
yAxisIndex: 0
});
}
});
设置tooltip.triggerOn为"none"