Vue3使用Echarts導(dǎo)致tooltip失效問(wèn)題及解決方法
更新時(shí)間：2023年08月31日 11:14:00 作者：MichstaBe Stars
Vue3 使用 proxy 對(duì)象代理,而 echarts 則使用了大量的全等（===）, 對(duì)比失敗從而導(dǎo)致了bug,這篇文章主要介紹了Vue3使用Echarts導(dǎo)致tooltip失效問(wèn)題及解決方法,需要的朋友可以參考下
版本 vue3.2.47 echarts5.4.1
使用響應(yīng)式對(duì)象存儲(chǔ) echarts 實(shí)例，導(dǎo)致 tooltip 功能失效；
原因：Vue3 使用 proxy 對(duì)象代理，而 echarts 則使用了大量的全等（===）, 對(duì)比失敗從而導(dǎo)致了bug。
解決方法：將ref或reactive對(duì)象換成普通變量來(lái)保存 echarts 實(shí)例。
初始化圖表
// 初始化柱狀圖
function initBarChart(data) {
const myChart = echarts.init(unref(barRef));
const option: EChartsOption = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: { alignWithLabel: true }
}
],
yAxis: [{ type: 'value' }],
series: [
{
name: '直接訪問(wèn)',
type: 'bar',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option);
}更新圖表數(shù)據(jù)
// 更新柱狀圖
function updateBarChart(data) {
const getLineChartInstance = echarts.getInstanceByDom(unref(barRef)!);
getLineChartInstance && getLineChartInstance.setOption({ series: [{ data }] });
}到此這篇關(guān)于Vue3使用Echarts導(dǎo)致tooltip失效的文章就介紹到這了,更多相關(guān)Vue3使用Echarts tooltip失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于el-table-column的formatter的使用及說(shuō)明
這篇文章主要介紹了關(guān)于el-table-column的formatter的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實(shí)現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue如何利用vue-print-nb插件實(shí)現(xiàn)打印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)一下2023-03-03
基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖效果
這篇文章主要介紹了基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
在Vue3中為路由Query參數(shù)標(biāo)注類(lèi)型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類(lèi)型,我們就針對(duì)這個(gè)話題如何為路由Query參數(shù)標(biāo)注類(lèi)型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08
我們?cè)谇岸碎_(kāi)發(fā)中經(jīng)常看到:visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時(shí)候，里面有個(gè)彈窗el-dialog組件的時(shí)候會(huì)有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
Vue通過(guò)axios調(diào)用json地址數(shù)據(jù)的方法
在現(xiàn)代Web開(kāi)發(fā)中,前后端分離已成為標(biāo)準(zhǔn)做法,Vue.js作為前端框架中的佼佼者,提供了豐富的API來(lái)處理數(shù)據(jù)和服務(wù)端的交互,其中一個(gè)常用的庫(kù)是axios,本文將詳細(xì)介紹如何在Vue項(xiàng)目中使用axios來(lái)調(diào)用JSON數(shù)據(jù),需要的朋友可以參考下2024-09-09
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue大屏展示適配，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue2.x中的父子組件相互通信的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue2.x中的父子組件相互通信,需要的朋友可以參考下2017-05-05