Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法
更新時間：2023年08月31日 11:14:00 作者：MichstaBe Stars
Vue3 使用 proxy 對象代理,而 echarts 則使用了大量的全等（===）, 對比失敗從而導(dǎo)致了bug,這篇文章主要介紹了Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法,需要的朋友可以參考下
版本 vue3.2.47 echarts5.4.1
使用響應(yīng)式對象存儲 echarts 實例，導(dǎo)致 tooltip 功能失效；
原因：Vue3 使用 proxy 對象代理，而 echarts 則使用了大量的全等（===）, 對比失敗從而導(dǎo)致了bug。
解決方法：將ref或reactive對象換成普通變量來保存 echarts 實例。
初始化圖表
// 初始化柱狀圖
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: '直接訪問',
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于el-table-column的formatter的使用及說明
這篇文章主要介紹了關(guān)于el-table-column的formatter的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue如何利用vue-print-nb插件實現(xiàn)打印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)一下2023-03-03
基于vue3+antDesign2+echarts?實現(xiàn)雷達圖效果
這篇文章主要介紹了基于vue3+antDesign2+echarts?實現(xiàn)雷達圖,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
在Vue3中為路由Query參數(shù)標(biāo)注類型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對這個話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08
我們在前端開發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時候，里面有個彈窗el-dialog組件的時候會有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
Vue通過axios調(diào)用json地址數(shù)據(jù)的方法
在現(xiàn)代Web開發(fā)中,前后端分離已成為標(biāo)準(zhǔn)做法,Vue.js作為前端框架中的佼佼者,提供了豐富的API來處理數(shù)據(jù)和服務(wù)端的交互,其中一個常用的庫是axios,本文將詳細(xì)介紹如何在Vue項目中使用axios來調(diào)用JSON數(shù)據(jù),需要的朋友可以參考下2024-09-09
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue大屏展示適配，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Vue2.x中的父子組件相互通信,需要的朋友可以參考下2017-05-05