echarts图表滚动条带动页面窗口滚动条的问题

网上搜了很多方法不管用,后来发现每次滚动echarts或者左右滑动echarts下方都会报错,报错提示如下,看看你们的图表是否这样报错:

报错信息如下:Unable to preventDefault inside passive event listener invocation

原因分析:
我们的事件已经默认被定义为了被动事件监听。结果我们在这个事件监听中调用了event.preventDefault(),浏览器就不高兴了,报错,告诉你:“你定义的事件不是一个被动事件监听吗?不就是告诉我为了提高响应速度不要处理event.preventDefault()吗?为啥你还要调用event.preventDefault()!”

解决方案:
1、文件node_modules下,找到zrender文件。在zrender文件中找到event.js文件。

2、具体路径:zrender/lib/core/event.js。

3、找到event.js文件下的addEventListener函数,如下修改标注红色字体部分。

新增代码:

el.addEventListener(name, handler, { passive: false });

试一下,图表无论是放大缩小,或者是拖动滚动条,应该都没问题了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/199626.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

三大录屏软件推荐,让你轻松录制屏幕

录屏软件的应用变得越来越广泛,无论是记录屏幕上的内容以方便日后查阅,还是与他人分享操作过程,录屏软件都发挥着重要作用。然而,市面上的录屏软件种类繁多,质量参差不齐。那有没有好用的录屏软件推荐呢?在…

金字塔原理

金字塔原理 来自于麦肯锡公司的第一位女性咨询顾问芭芭拉•明托的著作《金字塔原理》。 原理介绍 此原理是一种重点突出、逻辑清晰、主次分明的逻辑思路、表达方式和规范动作。 金字塔的基本结构是:中心思想明确,结论先行,以上统下&#xff…

小功能实现(十九)生成shp文件

引入依赖 <!--shp文件相关工具--><dependency><groupId>org.geotools</groupId><artifactId>gt-shapefile</artifactId><version>${geotools.version}</version></dependency><dependency><groupId>org.geo…

矩阵连乘问题

1、求解矩阵连乘问题。 要求: 分别用自底向上的动态规划方法和自顶向下的备忘录方法计算最优值并构造最优解&#xff0c;通过实例比较两种方法的结果和效率。 思路 1)寻找最优子结构&#xff1a; 此问题最难就在于此&#xff0c;对于乘积的任意位置加括号都会将序列在某个…

Java 基础学习(三)循环流程控制与数组

1 循环流程控制 1.1 循环流程控制概述 1.1.1 什么是循环流程控制 当一个业务过程需要多次重复执行一个程序单元时&#xff0c;可以使用循环流程控制实现。 Java中包含3种循环结构&#xff1a; 1.2 for循环 1.2.1 for循环基础语法 for循环是最常用的循环流程控制&#xff…

智慧公厕为高速服务区公厕做出的贡献

在现代社会&#xff0c;科技的飞速发展改变了人们的生活方式&#xff0c;也深刻影响着城市的基础设施和公共服务。而在这个数字化时代的背景下&#xff0c;智慧公厕作为城市智能化管理的一部分&#xff0c;为高速服务区公厕带来了一系列的创新和贡献&#xff0c;为旅客的出行提…

C++基础 -10- 类的构造函数

类的构造函数类型一 使用this指针给类内参数赋值 class rlxy {public:int a;rlxy(int a, int b, int c){this->aa;this->bb;this->cc;cout << "rlxy" << endl;}protected:int b;private:int c; };int main() {rlxy ss(10, 20, 30); }类的构造…

\n\r:解析java中的\r、\n、\r\n、\n\r的区别

1 \r 1.1 内容 回车符,将光标定义到当前行行首 1.2 在idea中测试 1.2.1 表现形式 在\r后有新内容时,会先删除之前以前存在过的文本,即只打印\r后面的内容 1.2.2 示例代码 package Work; public class Test05 { public static void main(String[] args) { System.…

docker-compose Install OrangeHRM

OrangeHRM 前言 OrangeHRM 是一个全面的人力资源管理(HRM) 系统,它包含任何企业所需的所有基本功能。OrangeHRM旨在支持任何规模的团队,包括初创企业、中小企业以及大型跨国组织。 OrangeHRM 提前条件 OrangeHRMdocker & docker-composer 安装or

会议预告 | 求臻医学受邀参加2023·Inno China 产业创新大会

INNO CHINA 中国产业创新大会聚焦于数据驱动产业变革升级、医疗科技与产业转型升级、企业数字化转型升级、产业服务生态构建及商业智能融合发展等领域。如今&#xff0c;已成为中国新兴科技、热门赛道行业论坛、创新成果展示、参与、共创的高维度学术与产业年度相聚的节日&…

使用vue-admin-template时,需要注意的问题,包括一定要去除mock.js注释

在使用vue-admin-template等前端框架时&#xff0c;如果你没有打算用他们的mock数据&#xff0c;在生产环境下一定要注释mock引用的代码&#xff0c;虽然它没有被调用&#xff0c;但是如果你不注释&#xff0c;就会被打包进去。 找到main.js&#xff0c;看如下代码&#xff1a…

搭建一个可以发送邮箱验证码的接口,内含前端处理 接口返回、请求处理

环境搭建 在node安装好的情况下&#xff08;一般vue环境有的node也有 没有可以使用winr回车输入node -v 有版本号则已经安装好 找一个空文件夹作为此项目文件夹 点击上面的地址栏输入cmd回车 输入npm init -y 再输入npm install nodemailer安装发送邮件的插件 环境配置 使用v…

C++学习之路(十一)C++ 用Qt5实现一个工具箱(增加一个进制转换器功能)- 示例代码拆分讲解

上篇文章&#xff0c;我们用 Qt5 实现了在小工具箱中添加了《时间戳转换功能》功能。为了继续丰富我们的工具箱&#xff0c;今天我们就再增加一个平时经常用到的功能吧&#xff0c;就是「 进制转换 」功能。下面我们就来看看如何来规划开发一个这样的小功能并且添加到我们的工具…

苹果提醒事项怎么用?几个简单步骤就能学会!

苹果提醒事项可以帮助你轻松管理待办事项&#xff0c;让你更好地安排自己的时间和工作。但是&#xff0c;有些小伙伴可能对如何使用这个功能还有一些疑问。苹果提醒事项怎么用&#xff1f;不要担心&#xff0c;小编将为大家提供使用提醒事项的方法&#xff0c;帮助你学会如何使…

轻量级web开发框架:Flask本地部署及实现公网访问界面

轻量级web开发框架&#xff1a;Flask本地部署及实现公网访问界面 文章目录 轻量级web开发框架&#xff1a;Flask本地部署及实现公网访问界面前言1. 安装部署Flask2. 安装Cpolar内网穿透3. 配置Flask的web界面公网访问地址4. 公网远程访问Flask的web界面 前言 本篇文章讲解如何…

应用在智能手环距离检测领域的数字红外接近检测模块

智能手环是现代人日常生活中的一种智能配件&#xff0c;可以帮助我们记录运动数据、监测身体健康状况等。然而&#xff0c;对于许多用户来说&#xff0c;关注的问题之一就是智能手环的有效距离和精准度。智能手环通过内置传感器收集数据并将其发送到手机或其他设备上进行处理。…

【C++ Primer Plus学习记录】do while循环

do while循环是出口条件循环。这意味着这种循环将首先执行循环体&#xff0c;然后再判定测试表达式&#xff0c;决定是否应继续执行循环。如果条件为false&#xff0c;则循环终止&#xff1b;否则&#xff0c;进入新一轮的执行和测试。这样的循环通常至少执行一次&#xff0c;因…

接口响应时长几十秒问题排查以及解决

目录 背景 解决方案 总结 背景 线上系统运行几年后&#xff0c;被项目上提bug&#xff0c;有些接口响应很慢&#xff0c;加载页面要几十秒 解决方案 1、步骤一&#xff0c;加索引 性能优化成本高&#xff0c;需要开发周期&#xff0c;临时方案先分析慢sql&#xff0c;通过增…

Hive数据库与表操作

文章目录 一、准备工作二、Hive数据库操作&#xff08;一&#xff09;Hive数据存储&#xff08;二&#xff09;创建数据库&#xff08;三&#xff09;查看数据库&#xff08;四&#xff09;修改数据库信息 一、准备工作 二、Hive数据库操作 &#xff08;一&#xff09;Hive数据…

根据端口查找进程

关闭kibana kibana自带命令 kibana没有提供关闭命令&#xff0c;通过命令 ps -ef|grep kibana查找不到kibana相关的信息。 可以通过进程暴露的端口来查找 netstat -anltp|grep 5601获取到进程号&#xff0c;然后kill掉进程 kill -9 进程号Docker管理Kibana 但是如果使用D…