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

最新推荐文章于 2024-06-29 11:41:30 发布

原创最新推荐文章于 2024-06-29 11:41:30 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #javascript #vue.js

收录于

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

遇到一个问题，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));