快捷導(dǎo)航

Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法

更新時間：2023年08月31日 11:14:00 作者：MichstaBe Stars

Vue3 使用 proxy 對象代理,而 echarts 則使用了大量的全等（===）, 對比失敗從而導(dǎo)致了bug,這篇文章主要介紹了Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法,需要的朋友可以參考下

初始化圖表

// 初始化柱狀圖
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)文章

Vue渲染器如何對節(jié)點進行掛載和更新
這篇文章主要介紹了Vue 的渲染器是如何對節(jié)點進行掛載和更新的,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-05-05
vue?router?動態(tài)路由清除方式
這篇文章主要介紹了vue?router?動態(tài)路由清除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
VUE+node（express）實現(xiàn)前后端分離
在本篇文章里小編給大家分享的是關(guān)于VUE+node（express）前后端分離實例內(nèi)容，有需要的朋友們參考下。
2019-10-10
詳解Vue如何進行表單聯(lián)動與級聯(lián)選擇
表單聯(lián)動和級聯(lián)選擇是Vue.js中常見的功能，在下面的文章中，我們將討論如何在Vue.js中實現(xiàn)表單聯(lián)動和級聯(lián)選擇，感興趣的小伙伴可以了解一下
2023-06-06
element表單el-form的label自適應(yīng)寬度的實現(xiàn)
本文主要介紹了element表單el-form的label自適應(yīng)寬度的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue2引入和使用Tailwind?CSS的完整指南
Tailwind?CSS?是一個功能類優(yōu)先的?CSS?框架,它提供了大量預(yù)定義的實用類來快速構(gòu)建用戶界面,本指南將詳細介紹如何在?Vue2?項目中引入和使用?Tailwind?CSS,需要的朋友可以參考下
2025-06-06
如何持久化存儲你的Pinia狀態(tài)
createPersistedState是Pinia插件,用于持久化存儲狀態(tài)數(shù)據(jù),通過localStorage/sessionStorage實現(xiàn)頁面刷新后數(shù)據(jù)保留,適用于登錄信息、主題設(shè)置等場景,需在main.ts注冊并配置store開啟
2025-07-07
vue.js+ElementUI實現(xiàn)進度條提示密碼強度效果
這篇文章主要介紹了vue.js+ElementUI實現(xiàn)進度條提示密碼強度效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-01-01
vue3中的事件修飾符詳解
Vue3中的事件修飾符包括：.stop（阻止冒泡）、.prevent（阻止默認(rèn)事件）、.self（阻止自身事件）、.capture（打亂冒泡順序）、.once（事件只觸發(fā)一次）和.passive（事件默認(rèn)行為立即執(zhí)行）,這些修飾符可以幫助開發(fā)者更靈活地控制事件的處理方式
2025-02-02
關(guān)于vue2使用swiper4的踩坑記錄
最近寫vue的一個練手項目需要在里面實現(xiàn)一個輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下
2022-01-01