Vue3使用Echarts导致tooltip失效问题及解决方法
更新时间:2023年08月31日 11:14:00 作者:MichstaBe Stars
Vue3 使用 proxy 对象代理,而 echarts 则使用了大量的全等(===), 对比失败从而导致了bug,这篇文章主要介绍了Vue3使用Echarts导致tooltip失效问题及解决方法,需要的朋友可以参考下
版本 vue3.2.47 echarts5.4.1
使用响应式对象存储 echarts 实例,导致 tooltip 功能失效;
原因:Vue3 使用 proxy 对象代理,而 echarts 则使用了大量的全等(===), 对比失败从而导致了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); }
更新图表数据
// 更新柱状图 function updateBarChart(data) { const getLineChartInstance = echarts.getInstanceByDom(unref(barRef)!); getLineChartInstance && getLineChartInstance.setOption({ series: [{ data }] }); }
到此这篇关于Vue3使用Echarts导致tooltip失效的文章就介绍到这了,更多相关Vue3使用Echarts tooltip失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue3 + async-validator实现表单验证的示例代码
表单验证可以有效的过滤不合格的数据,减少服务器的开销,并提升用户的使用体验,今天我们使用 vue3 来做一个表单验证的例子,需要的朋友跟随小编一起学习下吧2022-06-06用v-html解决Vue.js渲染中html标签不被解析的问题
这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析,html标签显示为字符串的问题,文中通过图文介绍的很详细,有需要的朋友们可以参考借鉴,下面来一起看看吧。2016-12-12
最新评论