继上篇一样,但是如果点击图表之后点击其他的详情,不会关闭
解决办法就是创建图表之后给文档绑定一个点击事件,判断点击的是不是图表,如果是的话消除图表tooltip,消除实例的时候再去移除点击事件
创建图表之后添加点击事件
document.addEventListener('click', this.handleChartClick);
beforeDestroy() {
this.barChart?.dispose();
document.removeEventListener('click', this.handleChartClick);
},
handleChartClick(e) {
/* 获取echarts图表的的大小及其相对于视口的位置 */
const { left, top, width, height } = document.querySelector('#barRef').getBoundingClientRect();
const clientX = e.clientX;
const clientY = e.clientY;
/* 判断点击的位置是否在图表上 */
if (clientX < left || clientX > left + width
|| clientY < top || clientY > top + height) {
// 隐藏tooltip
his.barChart.dispatchAction({
type: 'hideTip'
});
}
}