vue3+ECharts tooltip不显示的问题

最近在Vue3.0项目中使用ECharts5.0制作统计图表，发现配置一切正常，但是tooltip无论如何就是无法显示，所以排查了下原因，发现在Vue3.0环境下，使用ECharts5.0+会出现该问题。原因是echarts实例不能由Vue来维护。

问题根源：Vue3 用Proxy劫持了 ECharts 响应式实例，导致 tooltip 原生交互失效。解决方案：使用 Vue3 提供的markRaw方法，让 ECharts 实例跳过响应式转换。核心代码适用范围：所有第三方库实例存入 Vue3 响应式数据时，都建议用markRaw避免冲突。

Vue3 中 echarts 不显示 tooltip 的问题

VUE3中Echarts tooltip.trigger=‘axis‘不展示提示框；tooltip.trigger=‘item‘时出现提示框。markRaw： 将一个对象标记为不可被转为代理。toRaw：根据一个 Vue 创建的代理返回其原始对象。确保你的图表实例化没有问题，并且已经正确加载了配置。不要将 echarts 实例包装成响应式对象，也就是。可以用 shallowRef 或者普通变量。如果以上都是正确的，但仍然不显示提示框，组件没有被禁用（即设置为。解决方案：（最终极）

vue3中使用echarts的tooltip不显示问题

【摘要】在Vue3+ECharts开发中，当tooltip设置为trigger:'axis'时出现不显示问题。核心原因是ECharts实例被Vue响应式系统Proxy包装，可以使用markRaw包裹ECharts实例，避免响应式代理干扰。

vue3无法出现tooltip

修改前// 重点if (!// 当窗口大小改变时候，echarts重置大小提示：以下是本篇文章正文内容，下面案例可供参考以上就是今天要讲的内容。

Vue3 Echarts5.x 中tooltip属性不显示问题

【代码】vue3中使用echarts：tooltip的trigger为axis tooltip不显示问题。

vue3中使用echarts的坑：legend点击问题、tooltip trigger axis不显示问题

问题： 由于我需要在后台数据还没请求回来时，在echarts图上加个加载图标，所以定义了一个 全局变量来接收echarts 实例。 之后就发现 option配置了 trigger: ‘axis’， 但是 tooltip 显示不出来 tooltip: { trigger: 'axis' }, // 定义了一个全局的响应式变量，用于接收echarts实例 const myChart = ref() onMounted(() => { myChart.value = echart

vue3 Echarts tooltip不显示问题 封装组件的时候获取的元素不要用ref。

如图，我将echarts实例赋值给了响应式的变量this.chartInstance，这便是在vue3中出错的原因，即不能将echarts实例赋值给响应式变量。②如果我们需要多次在一个dom元素上绘制echarts，又不想让元素多次echarts实例化，可以使用getInstanceByDom方法。

修复内容：使用 shallowRef 的原因：

在 Vue 3 中，markRaw 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象，并且你确定你不需要它成为响应性对象时，你可以使用 markRaw 来标记它。这在一些场景中非常有用，比如当你需要集成一个第三方库或插件，并且这个库或插件的某些部分不需要是响应性的。因为vue3中的数据对象是用的proxy监听的，要取值需要用value等方法取出来，解决方法：使用 markRaw 让echarts从监听对象变成普通对象！