echarts，tooltip悬浮框无法显示

在配置option没有问题的情况下，悬浮框就是不出来。怎么办？

以下是我踩的坑。

 问题再现

由于我echarts折线图数据来源于祖先组件，属于异步加载数据，使用EventBus事件总线进行值传递，这就涉及到图表渲染不止一次。

在折线图组件中

这里如果在图表渲染函数中对图表对象初始化init，就会导致图表对象初始化两遍

onMounted(() => {
  EventBus.on('事件总线名字xxx', (res: any) => {
    chartData = handelbridgeData(res);  // 图表数据处理
    bridgeChartRender();   // 图表渲染函数
  });
  bridgeChartRender();
});

为了解决以上问题就把它提了出去 

const myChart = ref()
onMounted(() => {
  EventBus.on('lq_bridge', (res: any) => {
    chartData = handelbridgeData(res);
    bridgeChartRender();
  });
  myChart.value = echarts.init(echartBox.value);
  bridgeChartRender();
});

这里把对象设置成了响应式的，页面看不出啥问题，当进行悬浮框配置时，就出现了问题（也许其他配置也会有问题），悬浮框不展示。后经排查，将其设置为普通变量。

let myChart;
onMounted(() => {
  EventBus.on('lq_bridge', (res: any) => {
    chartData = handelbridgeData(res);
    bridgeChartRender();
  });
  myChart = echarts.init(echartBox.value);
  bridgeChartRender();
});

这样就好了。但是可以使用ref获取Dom节点，挂载到echarts图表。

其实出现问题的主要原因就是对echarts的渲染原理理解不到位，只会参照官网的示例使用，导致出现一系列问题，希望可以帮助大家少踩坑。