echarts在移动端上tooltip弹框点击空白不能关闭的问题解决方案

1.首先新建一个mixin.js文件

 export const mixinAutoHideTooltip = {
    mounted() {
        this.mAutoHideTooltip(this.$el);
    },
    data() {
        this.mIsSelfTouch = false;
        return {};
    },
    beforeDestroy() {
        this.mRemoveListeners(this.$el);
    },
    methods: {
        mAutoHideTooltip(dom) {
            dom.addEventListener('touchstart', this.mHandleContainerTouchStart);
            dom.addEventListener('touchend', this.mHandleContainerTouchEnd);
            document.addEventListener('touchstart', this.mHandleDomcumentTouchStart);
        },
        mRemoveListeners(dom) {
            dom.removeEventListener('touchstart', this.mHandleContainerTouchStart);
            dom.removeEventListener('touchend', this.mHandleContainerTouchEnd);
            document.removeEventListener('touchstart', this.mHandleDomcumentTouchStart);
        },
        mHandleContainerTouchStart() {
            this.mIsSelfTouch = true;
        },
        mHandleContainerTouchEnd() {
            this.mIsSelfTouch = false;
        },
        mHandleDomcumentTouchStart() {
            if (this.mIsSelfTouch) return;
            this.echartsInstance && this.mHideTooltip(this.echartsInstance);
        },
        mHideTooltip(echartsInstance) {
            echartsInstance.dispatchAction({
                type: 'updateAxisPointer',
                currTrigger: 'mousemove',
                x: 0,
                y: 0
            });
        }
    }
};

2.在使用echarts的文件中使用mixins引入该对象即可

mixins: [mixinAutoHideTooltip],