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.当演染具有不可变数据源的大列表时,跳过响应式转换可以提高性能.
相关推荐
国服第二切图仔19 小时前
Electron for 鸿蒙PC项目开发之模态框组件
javascript·electron·harmonyos
_Jyann_19 小时前
uniapp两种方式实现自定义tabbar
前端·javascript·uni-app
一 乐19 小时前
数码商城系统|电子|基于SprinBoot+vue的数码商城系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·springboot
fruge19 小时前
React Server Components 实战:下一代 SSR 开发指南
前端·javascript·react.js
hxmmm19 小时前
preconnect、dns-prefetch、prerender、preload、prefetch
javascript
郑州光合科技余经理19 小时前
PHP技术栈:上门系统海外版开发与源码解析
java·开发语言·javascript·git·uni-app·php·uniapp
汤姆Tom20 小时前
前端转战后端:JavaScript 与 Java 对照学习指南(第三篇 —— Map 对象)
java·javascript·全栈
前端_逍遥生20 小时前
Vue 2 vs React 18 深度对比指南
前端·vue.js·react.js
juma900220 小时前
最近在搞PCS储能双向变流器的Simulink仿真时踩了不少坑,尤其是功率控制环的配合调试简直让人头秃。咱们直接打开仿真模型,先从系统架构开始盘
javascript
feiyangqingyun20 小时前
Qt/C++地图最简示例/在线离线切换/地图视图切换/执行各种js函数交互
javascript·c++·qt