[JavaScript知识库]echarts手动关闭tooltip

在vue项目中用到echarts的自定义tooltip，需求需要手动关闭tooltip框

tooltip: {
   show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
   trigger: 'item', //触发类型。item,axis,none
   enterable: true,//鼠标是否可进入提示框浮层中，默认为false，
   showContent: true,          //是否显示提示框浮层
   triggerOn: 'click',//提示框触发的条件(mousemove|click|none)  
   showDelay: 0,   //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
   textStyle: {
       color: 'white',
       fontSize: 12
   },
   padding: [0, 8],
   hideDelay: 10,             //浮层隐藏的延迟
   formatter: (i) => (i.data) ? `<div class="map-tooltip">
       <h3>${i.data.title}</h3>
       <i class="map-tooltip-close" οnclick="toolTipClose(this)">X</i>
       </div>` 
       : `` ,
   backgroundColor: 'none',  //提示框浮层的背景颜色。
   borderColor: "white",  //图形的描边颜色
   borderWidth: 0,
   alwaysShowContent: true,
   transitionDuration: 1,      //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
},

有两个注意点
1.triggerOn需要设置为click触发
2.enterable设置为true ，鼠标可以进入悬浮框内

window.toolTipClose = this.toolTipClose   //在formatter中给元素绑定点击事件，点击事件需要先在window上挂载

toolTipClose(e){
  e.parentNode.style.display = 'none'   //找到该元素父元素，设置display为none即可实现手动关闭
},