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.当演染具有不可变数据源的大列表时,跳过响应式转换可以提高性能.
相关推荐
山河木马18 小时前
矩阵专题3-怎么创建投影矩阵(uProjectionMatrix)
javascript·webgl·计算机图形学
泯泷20 小时前
第 2 篇:设计第一套字节码:Opcode、Instruction 与 Constant Pool
前端·javascript·安全
泯泷20 小时前
第 1 篇:从 1 + 2 开始:亲手写出第一台 JSVM
前端·javascript·安全
古夕20 小时前
第三方 SSO 接入实践:redirect_uri 编码、回调一致性与跨项目联调
前端·vue.js
朦胧之20 小时前
页面白屏卡住排查方法
前端·javascript
Ruihong20 小时前
Vue withDefaults 转 React:VuReact 怎么处理?
vue.js·react.js·面试
犇驫聊AI21 小时前
Chrome DevTools MCP + Claude Code 自定义skills生成接口代码生成器
前端·javascript
kyriewen21 小时前
别再这样写 async/await 了:我在 Code Review 中见过最多的 8 个错误
前端·javascript·面试
稀土熊猫君1 天前
一个人能做出什么开源项目?
vue.js·后端·开源
用户298698530141 天前
在 React 中使用 JavaScript 将 Excel 转换为 SVG
前端·javascript·react.js