vue3中使用echarts：tooltip的trigger为axis tooltip不显示问题

最新推荐文章于 2025-04-15 11:34:50 发布

SmallGirlYang

最新推荐文章于 2025-04-15 11:34:50 发布

阅读量1k

点赞数 4

CC 4.0 BY-SA版权

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/SmallGirlYang/article/details/129673330

在Vue3项目中，使用echarts时遇到tooltip在axis模式下无法显示滑动效果的问题。原因是Vue3的数据响应式系统使用了proxy。解决方案是使用markRaw函数，避免echarts实例化时处理的是监听对象。经过markRaw处理后，echarts能正确初始化并显示axis的tooltip滑动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到一个问题，vue3中使用echarts
tooltip使用item没有问题，在使用axis时一直出不来滑动效果

  tooltip: {
    trigger: 'item',
  },

将设置好的option在官网的代码运行器中没有问题

最后解决办法：用 markRaw 让echarts从监听对象变成普通对象！！

import { ref, reactive, watch, onMounted, markRaw } from 'vue';
...
const chartBox = document.getElementById('chart-box');
myChart = markRaw(echarts.init(chartBox));