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

vue3中使用echarts时,tooltip的trigger设置为axis时formatter不触发
javascript 复制代码
tooltip: {
  trigger: "axis",
  formatter: function (params) {
    console.log("params", params);
  },
  axisPointer: {
    type: "shadow", // 阴影指示器
  },
},
解决办法: 用 markRaw 让echarts从监听对象变成普通对象!!!
javascript 复制代码
import { ref, reactive, watch, onMounted, markRaw } from 'vue';
...
const chartBox = document.getElementById('chart-box');
myChart = markRaw(echarts.init(chartBox));
因为vue3中的数据对象是用的proxy监听的,要取值需要用value等方法取出来。
markRaw() 详情参考:markRaw详情
toRaw与markRaw区别
- toRaw:
复制代码
作用:将一个由reactive生成的响应式对象转换为普通对象

使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
- markRaw
复制代码
作用:标记一个对象,使其永远不会再成为响应式对象

使用场景:
1.有些值不应被设置为响应式的,例如复杂的第三方类库等.
2.当演染具有不可变数据源的大列表时,跳过响应式转换可以提高性能.
相关推荐
牧濑红莉2 小时前
网络安全竞赛pwn全解及第一道ai的wp
javascript·.net
kyriewen2 小时前
别再用AI debug了——这5种bug越修越烂
前端·javascript·ai编程
顾昂_4 小时前
内存泄漏排查和 Chrome DevTools 使用教程
前端·javascript·面试
An_s5 小时前
rust开发wasm与浏览器(js)交互
javascript·rust·wasm
山河木马5 小时前
GPU自动处理专题4-填充覆盖区域(光栅化)
javascript·webgl·计算机图形学
悦儿遥遥雨15 小时前
PXE + Kickstart 无人值守批量部署系统
linux·javascript·nginx
清秋6 小时前
全网最全 ECMAScript 攻略( 更新至 ES2026)
前端·javascript·编程语言
Hilaku6 小时前
为什么 AI 写前端时,总是优先选择 React,而不是 Vue?
前端·javascript·程序员
不简说9 小时前
拖拽DIY表格插件来了!sv-print 七月更新:这次真的能自己拼表格了
前端·javascript·前端框架
weixin_471383039 小时前
Next.js - 04 - 深入理解next.js渲染原理
前端·javascript·next.js