vue3.0 + echarts5.0 tooltip不显示问题

一、问题描述

新项目采用vue3.0 + echarts5.0库，当在做一个图表的时候，发现tooltip框怎么都不显示，但是将option复制到echarts官网事例代码中后，发现可以显示。最开始以为是，页面某些样式造成echarts库某些逻辑异常。多次排查后，发现将echarts实例赋值到vue data中就会有这个问题，如下：

export default {
    data()  {
      this.echartsInstance = null // 建议这样存储echarts实例
      return {
        // echartsInstance: null // 放在data中会有tooltip不显示的问题（这样书写会有bug）
      }
    }  ,
    mounted() {
       const chartDom = document.getElementById('chartBox');
       this.echartsInstance = echarts.init(chartDom);
    }
}

二、解决方案

将echartsInstance用let定义

let echartsInstance;

转载自：vue3.0 + echarts5.0 tooltip不显示问题