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

news2024/12/31 3:34:59
vue3中使用echarts时,tooltip的trigger设置为axis时formatter不触发
tooltip: {
  trigger: "axis",
  formatter: function (params) {
    console.log("params", params);
  },
  axisPointer: {
    type: "shadow", // 阴影指示器
  },
},

在这里插入图片描述

解决办法: 用 markRaw 让echarts从监听对象变成普通对象!!!
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.当演染具有不可变数据源的大列表时,跳过响应式转换可以提高性能.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1360938.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Turtle库】海绵宝宝

在这个充满创意与想象力的时代,我们决定挑战一项富有意义且有趣的使命——使用Python编程语言绘制海绵宝宝。这个经典的角色,以其独特的魅力和无与伦比的搞笑天赋,已经成为了无数人心中的童年回忆。现在,我们希望通过Python的强大…

4《数据结构》

文章目录 绪论逻辑结构存储结构【物理结构】顺序和链式存储区别顺序表和数组区别数组和链表的区别链表结点概念链表为空条件链表文章http://t.csdnimg.cn/dssVK二叉树B树B树【MYSQL索引默认数据结构】B树和B树区别冒泡排序插排选排快排 绪论 数据结构:研究非数值计…

openFeign服务调用

简介 Feign是一个声明式WebService客户端。使用Feign能让编写Web Service客户端更加简单。它的使用方法是定义一个服务接口然后在上面添加注解。 Feign也支持可拔插式的编码器和解码器。Spring Cloud对Feign进行了封装,使其支持了Spring MVC标准注解和HttpMessageC…

数据库——SQL注入攻击

【实验内容及要求】 一、内容:掌握SQL注入攻击的原理,掌握基本SQL注入攻击的方法,掌握防SQL注入攻击的基本措施。 二、要求: 1. DVWA环境配置 DVWA(Damn Vulnerable Web Application)是一个用来进行安全…

IPD-PDP产品开发流程-PDT产品开发计划Charter文档模板(word)6

今天继续为您分享PDT的产品开发计划Charter模板的内容。 Charter任务书模板内容17:配置管理 项目的配置管理活动应该按照配置管理计划来执行。配置管理计划包括定义项目中的配置项,配置项中需要进行正式变更控制的内容,并为这些配置项和内容…

DS|静态查找

题目一:DS静态查找 -- 顺序查找 题目描述: 给出一个队列和要查找的数值,找出数值在队列中的位置,队列位置从1开始 要求使用带哨兵的顺序查找算法 输入要求: 第一行输入n,表示队列有n个数据 第二行输入…

SpringBoot如何返回页面

前提 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>hello</title> </head> <body> 你好&#xff01;初学者&#xff0c;我是SpringBoot的简单启动页面&#xff01; </body>…

数据结构之绪论

一个著名公式&#xff1a; 程序数据结构算法 非数值计算&#xff1a;无法用数学的公式或方程来描述 描述非数值计算问题的数据模型不是数学方程&#xff0c;而是诸如表&#xff0c;树和图之类的具有逻辑关系的数据 数据结构&#xff1a;是一门研究非数值计算的程序设计中计算机…

【AIGC-图片生成视频系列-6】SSR-Encoder:用于主题驱动生成的通用编码器

目录 一. 贡献概述 二. 方法详解 a) 训练阶段 b) 推理生成阶段&#xff1a; 三. 综合结果 四. 注意力可视化 五. 选择性主题驱动图像生成 六. 人体图像生成 七. 可推广到视频生成模型 八. 论文 九. 个人思考 稳定扩散&#xff08;Stable Diffusion&#xff09;模型可…

OpenShift 4 - 使用 Model Serving 运行模型

《OpenShift / RHEL / DevSecOps 汇总目录》 说明&#xff1a;本文已经在 OpenShift 4.14 RHODS 2.50 的环境中验证 说明&#xff1a;请先根据《OpenShift 4 - 部署 OpenShift AI 环境&#xff0c;运行 AI/ML 应用&#xff08;视频&#xff09;》一文完成 OpenShift AI 环境的…

域名流量被劫持怎么办?如何避免域名流量劫持?

随着互联网不断发展&#xff0c;流量成为线上世界的巨大财富。然而一种叫做域名流量劫持的网络攻击&#xff0c;将会在不经授权的情况下控制或重定向一个域名的DNS记录&#xff0c;导致用户在访问一个网站时&#xff0c;被引导到另一个不相关的网站&#xff0c;从而劫持走原网站…

简单介绍Java 的内存泄漏

java最明显的一个优势就是它的内存管理机制。你只需简单创建对象&#xff0c;java的垃圾回收机制负责分配和释放内存。然而情况并不像想像的那么简单&#xff0c;因为在Java应用中经常发生内存泄漏。 本教程演示了什么是内存泄漏&#xff0c;为什么会发生内存泄漏以及如何预防…

C# 使用命名管道进行网络进程间通信

目录 写在前面 代码实现 服务端代码 客户端代码 调用示例 写在前面 使用 NamedPipeServerStream 和 NamedPipeClientStream 类&#xff0c;实现命名管道方式的网络通讯&#xff0c;支持跨网络和多个服务器实例的全双工通信、基于消息的通信以及客户端模拟&#xff1b;需要…

力扣:15.三数之和

1.做题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.做题前须&#xff1a; 两数之和降低复杂度&#xff1a; 1.问题描述&#xff1a;一个数组中找到两个数字之和是taeget 例如&#xff1a;[2,7,11,15,19,21],target30 2.解法一&#xff1a;暴力枚举时间复…

权威认可!甄知科技猪齿鱼产品荣获信创产品评估证书

近日&#xff0c;依据《信息技术应用创新产品评估规范 第1部分&#xff1a;应用软件》&#xff08;T/SSIA 2001-2022&#xff09;&#xff0c;经过严格评估&#xff0c;甄知科技旗下自主研发的猪齿鱼数智化开发管理平台 V2.0.0&#xff0c;通过信创测试认证&#xff0c;获得上海…

java基于SSM的毕业生就业管理系统+vue论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本毕业生就业管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信…

UE4运用C++和框架开发坦克大战教程笔记(十四)(第43~45集)

UE4运用C和框架开发坦克大战教程笔记&#xff08;十四&#xff09;&#xff08;第43~45集&#xff09; 43. 单个加载 UObject 功能获取资源 URL 链接实现异步加载单个 UObject 类型资源 44. 批量加载 UObject 功能测试加载单个 UObject 资源批量加载多个同类的 UObject 资源 45…

跟着小德学C++之日志记录

嗨&#xff0c;大家好&#xff0c;我是出生在达纳苏斯的一名德鲁伊&#xff0c;我是要立志成为海贼王&#xff0c;啊不&#xff0c;是立志成为科学家的德鲁伊。最近&#xff0c;我发现我们所处的世界是一个虚拟的世界&#xff0c;并由此开始&#xff0c;我展开了对我们这个世界…

VS2017 搭建opencv工程

VS2017 搭建opencv工程 opencv在处理图像方面具有很强的能力&#xff0c;在使用opencv之前先需要造好轮子。 1、opencv 官网 &#xff0c;下载对应的资源文件包。 根据自身选择。下载包之后&#xff0c;解压。分为build和sources source目录下分别存放&#xff1a; modules: …

Java面试项目推荐,异构数据源数据流转服务DatalinkX

前言 作为一个年迈的夹娃练习生&#xff0c;每次到了春招秋招面试实习生时都能看到一批简历&#xff0c;十个简历里得有七八个是写商城或者外卖项目。 不由得想到了我大四那会&#xff0c;由于没有啥项目经验&#xff0c;又想借一个质量高点的项目通过简历初筛&#xff0c;就…