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.当演染具有不可变数据源的大列表时,跳过响应式转换可以提高性能.
相关推荐
chunyublog29 分钟前
HDFS 上传文件名空格问题排障教程
前端·javascript·npm
FRing032 小时前
JavaScript入门到精通二十九(内置构造函数(Object、Array))
开发语言·前端·javascript
天才熊猫君2 小时前
前端队列,我是怎么从 `push + shift` 换成游标的
前端·javascript
Qinging2 小时前
var_let_const
javascript
Maxkim2 小时前
私钥就是数字 4:扒一扒这场把一家 CA 直接送走的事故
javascript·架构
u0111026753 小时前
Canvas 导出 PNG 时 quality 参数为什么不起作用
前端·javascript·vue.js
2601_949847753 小时前
jose 跨端三方库仓颉适配全流程
前端·javascript·flutter
CappuccinoRose3 小时前
滚动交互体系
前端·javascript·交互·html5·1024程序员节
开开心心就好3 小时前
电脑小说阅读器,支持朗读和自定义皮肤
服务器·开发语言·javascript·算法·pdf·c#·音视频
计算机编程-吉哥5 小时前
计算机毕业设计 基于 SpringBoot + Vue 的剧本杀系统 Java毕业设计【任务书、开题报告、中期报告、论文、源码】
java·vue.js·spring boot·毕业设计·课程设计·计算机毕业设计选题