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.当演染具有不可变数据源的大列表时,跳过响应式转换可以提高性能.
相关推荐
Hello--_--World13 小时前
Vue2的 双端 diff算法 与 Vue3 的 快速diff 算法
前端·vue.js·算法
gongzemin13 小时前
怎么在VS Code 调试vue2 源码
前端·vue.js
烟话613 小时前
Vue3响应式原理【通俗理解】
前端·javascript·vue.js
下北沢美食家13 小时前
JavaScript面试题2
开发语言·javascript·ecmascript
浩星13 小时前
electron系列5:深入理解Electron打包
前端·javascript·electron
英俊潇洒美少年13 小时前
React 实现 AI 流式打字机对话:SSE 分包粘包处理 + 并发优化
前端·javascript·react.js
叫我一声阿雷吧14 小时前
JS 入门通关手册(44):宏任务 / 微任务 / Event Loop(前端最难核心,面试必考
javascript·宏任务·event loop· 前端面试· 微任务· 事件循环·js单线程
We་ct14 小时前
LeetCode 172. 阶乘后的零:从暴力到最优,拆解解题核心
开发语言·前端·javascript·算法·leetcode·typescript
军军君0114 小时前
数字孪生监控大屏实战模板:可视化数字统计展示
前端·javascript·vue.js·typescript·echarts·数字孪生·前端大屏
吴声子夜歌14 小时前
ES6——Iterator和for...of循环详解
前端·javascript·es6