解决uni-app中echarts图表自带的事件(点击,拖拽,滑动,悬停...)失效问题

问题原因:uniapp中的wx变量污染了echarts中的wx变量。

解决办法

方法1:在main.js中移除window中的wx对象,或者置空微信对象

//解决echarts在h5、app中tooltips及部分功能失效问题
window.wx = null
delete window.wx

注意:这种办法虽然可以解决tooltip不显示的问题,但是如果项目中使用了富文本标签的话(如uView中的富文本组件),控制台就会报错,所以此法有缺陷

<u-parse :html="content"></u-parse>

方法2:在初始化echarts对象之前,添加以下代码

// 开启触摸事件支持,用于适配移动端触摸屏设备。
echarts.env.touchEventsSupported = true;
 
// 明确关闭微信小程序适配模式,因为当前是浏览器环境
echarts.env.wxa = false;
 
// 同时启用SVG和Canvas两种渲染模式,ECharts会根据浏览器能力自动选择:
// Canvas更适合大数据量场景
// SVG更适合交互操作和动画
echarts.env.svgSupported = true;
echarts.env.canvasSupported = true,
 
// 启用DOM操作支持,这是浏览器环境下图表渲染的基础能力
echarts.env.domSupported = true;
 注意代码的位置,要加在初始化echarts实例之前!

在这里插入图片描述

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值