首页 > 其他分享 >关于vue3中使用echarts设置tooltip的type为axis不显示的问题

关于vue3中使用echarts设置tooltip的type为axis不显示的问题

时间:2024-05-09 09:22:40浏览次数:12  
标签:插件 对象 tooltip 响应 vue3 markRaw type echarts

因为vue3中的数据对象是用的proxy监听的,要取值需要用value等方法取出来,
解决方法:使用 markRaw 让echarts从监听对象变成普通对象!

在 Vue 3 中,markRaw 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象,并且你确定你不需要它成为响应性对象时,你可以使用 markRaw 来标记它。这在一些场景中非常有用,比如当你需要集成一个第三方库或插件,并且这个库或插件的某些部分不需要是响应性的。

import { ref, reactive, onMounted, markRaw } from 'vue'
......
const GroundWaveChart = ref(null)
......
var chartDom = document.getElementById('ground_wave_dom')
GroundWaveChart.value = markRaw(echarts.init(chartDom))

标签:插件,对象,tooltip,响应,vue3,markRaw,type,echarts
From: https://www.cnblogs.com/lifan-fineDay/p/18181355

相关文章

  • 解决Vue3项目警告:xxxis-declared-but-its-value-is-never-read
    刚刚在Vue3项目引入的一个组件Person下有红线,系统给出了警告,这是因为TypeScript会检查代码中未使用的变量,我定义了'Person'的变量,但是后续代码没有使用到它,从而导致Vetur(Vue的语法检查工具)给出了这个警告。解决方法:方法一:你可以删除或者在代码中使用'Person'变量或类型,以......
  • GeometryCollection 的类型映射器(TypeHandler)
    byemanjusakafromhttps://www.emanjusaka.top/2024/05/mybatis-typeHandler-geometryCollection彼岸花开可奈何本文欢迎分享与聚合,全文转载请留下原文地址。GeometryCollection是GeoJSON数据模型中的一个类型,用于表示一个几何对象的集合。MySQL8中支持了GeometryCol......
  • 探索网站支付系统的奥秘,从Vue3和Spring Boot开始(入门级项目实战+在线教程)附赠项目源码
    你是否曾经在购物时,对着电脑屏幕前的“支付成功”四个字感到好奇?这背后的秘密究竟是什么?今天,让我们一起揭开支付系统的神秘面纱,探索其背后的技术实现。在这个基于Vue3和SpringBoot的支付项目实战中,我们将带你一步步了解支付系统的实现思路。这个项目不仅解决了常用支付方式的......
  • unsupported operand type(s) for +: 'function' and 'str'
    unsupportedoperandtype(s)for+:'function'and'str'报错解释:这个错误表明你尝试将一个函数和一个字符串进行加法操作,在Python中,加法不支持对函数和字符串进行。解决方法:确认你的代码中是否有误,检查是否不小心将函数名直接与字符串用+相连。如果你的意图是调用函数并与字符......
  • 【vue3入门】-【0】前言
    本人是一名四年的软件测试人员,想努力向测试开发方向发展,因此在学习的道路上不停在探索。软件测试所需要的知识面太过庞大,但感觉好的测试开发都是会写前端的,也算是在模仿前辈们的脚步前进,希望不会让自己太受打击了,哈哈哈。对于前端,其实是断断续续有在接触,包括html、css、js,但是苦......
  • 【vue3入门】-【20】组件注册方式
    组件注册方式一个vue组件在使用前需先被“注册”,这样vue才能在渲染模版是找到其对应的实现。组件注册有两种方式:全局注册和局部注册全局注册在最外层注册一次,在最内层组件都能使用main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importHeaderfrom......
  • 【vue3入门】-【21】 组件传递数据
    组件传递数据_Props静态数据传递组件与组件之间不是完全独立的,而是有交集的,那就是组件与组件之间是可以传递数据的传递数据的解决方案就是propsapp.vue<template><!--主要要生效Header中的样式,需要删除main.json中默认的main.css样式--><!--不需要再次引入,可以直接使......
  • 【vue3入门】-【22】 组件事件
    组件事件在组件的模版表达式中,可以直接使用$emit方法触发自定义事件触发自定义事件的目的是组件之间传递数据,通过组件事件可以实现子级传递参数给父级App.vue<template><ComponentEvent/></template><script>importComponentEventfrom"./components/componentEvent.......
  • 界面控件DevExtreme v23.1、v23.2盘点 - 增强的TypeScript(Angular、React、Vue)
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NETCore或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中......
  • vue3.4中KeepAlive的一个bug
    KeepAlive可以缓存组件,在不使用include时没有任何问题,可以正常缓存。但是一旦使用了include,如果动态组件中没有导入ref函数,缓存功能就消失了比如editcom.vue<template><input></template><scriptsetup>import{ref}from'vue'</script><style></style&g......