问题:
VUE3中Echarts tooltip.trigger=‘axis‘不展示提示框;tooltip.trigger=‘item‘时出现提示框。
请检查以下几点:
-
确保
tooltip
组件没有被禁用(即设置为show: false
),show属性可不设置,默认为true
。 -
确保
trigger
属性正确设置为'axis'
。 -
确保你的图表实例化没有问题,并且已经正确加载了配置。
如果以上都是正确的,但仍然不显示提示框,
解决方案:(最终极)
不要将 echarts 实例包装成响应式对象,也就是避免使用 ref 和 reactive。可以用 shallowRef 或者普通变量
import { ref, reactive, watch, onMounted, markRaw } from 'vue';
const chartId= document.getElementById(this.id);
this.echart = markRaw(echarts.init(chartId));
this.echart.setOption({ ... })
markRaw: 将一个对象标记为不可被转为代理。返回该对象本身。
toRaw:根据一个 Vue 创建的代理返回其原始对象。