echarts鼠标向右/向左绘制实现放大/还原

echarts toolbox 的datazoom提供了绘制放大的功能,但通过鼠标绘制只能进行放大
应需求放大与还原都通过鼠标行为实现,增加从右往左绘制时还原放大结果

demo
结果

在这里插入图片描述

重写datazoom的原型方法实现绘制事件的拦截
  const comp = myChart._model.getComponent('toolbox');const toolbox = myChart.getViewOfComponentModel(comp);const datazoom = toolbox._features.dataZoom;// 回退//datazoom.onclick(datazoom.ecModel,datazoom.api,'back');// 记录x的起始位置let x = -1;// 重写放大回调const onBrush = datazoom.constructor.prototype._onBrush;datazoom.constructor.prototype._onBrush = function (evt) {if(x===-1){x = evt.areas[0].range[0][0];}if(evt.isEnd){const zoomin = evt.areas[0].range[0][0]-x <0;// 从右往左绘制返回放大前if(zoomin){this._brushController.updateCovers([]); // 清除绘制区域this.onclick(this.ecModel,this.api, 'back');}else{onBrush.call(this, evt);}x = -1;}else{onBrush.call(this, evt);}};// 重写原型链方法后,需要重新创建datazoom对象。因为重写前创建的datazoom对象会执行原先的原型方法// 还原myChart._api.dispatchAction({type: 'restore',from: myChart.id});

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧公厕:打造智慧城市环境卫生新标杆

随着科技的不断发展和城市化进程的加速推进&#xff0c;智慧城市建设已经成为各地政府和企业关注的焦点。而作为智慧城市环境卫生管理的基础设施&#xff0c;智慧公厕的建设和发展也备受重视&#xff0c;被誉为智慧城市的新标杆。本文以智慧公厕源头厂家广州中期科技有限公司&a…

python 中常用的热门库介绍

阅读本文之前请参阅-----如何系统的自学python Python 是一种非常流行的编程语言&#xff0c;它的一个主要优势是拥有一个庞大的生态系统&#xff0c;其中包括许多强大的库。这些库为各种任务提供了解决方案&#xff0c;从数据分析到机器学习&#xff0c;从网络爬虫到图像处理。…

Linux安装Nginx详细步骤

1、创建两台虚拟机&#xff0c;分别为主机和从机&#xff0c;区别两台虚拟机的IP地址 2、将Nginx素材内容上传到/usr/local目录&#xff08;pcre,zlib,openssl,nginx&#xff09; 附件 3、安装pcre库   3.1 cd到/usr/local目录 3.2 tar -zxvf pcre-8.36.tar.gz 解压 3.3 cd…

vue使用gitshot生成gif

vue使用gitshot生成gif 问题背景 本文将介绍vue中使用gitshot生成gif。 问题分析 解决思路&#xff1a; 使用input组件上传一个视频&#xff0c;获取视频文件后用一个video组件进行播放&#xff0c;播放过程进行截图生成图片数组。 demo演示上传一个视频&#xff0c;然后生…

【JavaEE进阶】 Spring AOP快速上手

文章目录 &#x1f343;什么是AOP&#x1f333;什么是Spring AOP&#x1f334;上手Spring AOP&#x1f6a9;引入依赖&#x1f6a9;编写AOP程序 ⭕总结 &#x1f343;什么是AOP AOP是Aspect Oriented Programming的简称&#xff08;又称为面向切⾯编程&#xff09; 什么是面向…

SHARE 100M PRO:航测新高度,精准捕捉每一帧

SHARE 100M PRO&#xff1a;单镜头航测相机的革新&#xff0c;巡检效率与精度的新标杆 在航测和巡检领域&#xff0c;精确的数据采集对于确保项目成功至关重要。SHARE 100M PRO&#xff0c;作为一款单镜头航测相机&#xff0c;以其卓越的性能和创新技术&#xff0c;正在重新定…

Fastjson2 <== 2.0.26反序列漏洞

根据Y4TACKER师傅在2023-03-20发布了一篇关于Fastjson原生反序列化的文章&#xff0c;文章中引入注目的是利用条件限制条件&#xff0c;不常常关注漏洞预警或者内容的几乎都是未发觉Fastjson2 到Fastjson2 2.0.26版本都有问题&#xff0c;其实如果单独去使用一些关键词去搜索&a…

异常处理(黑马学习笔记)

当前问题 登录功能和登录校验功能我们都实现了&#xff0c;下面我们学习下今天最后一块技术点&#xff1a;异常处理。首先我们先来看一下系统出现异常之后会发生什么现象&#xff0c;再来介绍异常处理的方案。 我们打开浏览器&#xff0c;访问系统中的新增部门操作&#xff0…

typescript 的常用方式

文章目录 前言一、绑定props 默认值的方式&#xff1a;withDefaults1.vue2 的props设置默认值2.vue3 的props设置默认值(1) 不设置默认值的写法(2) 设置默认值的写法&#xff08;分离模式&#xff09;(3) 设置默认值的写法&#xff08;组合模式&#xff09; 二、定义一个二维数…

第七十天 APP攻防-微信小程序解包反编译数据抓包APK信息资源提取

第70天 APP攻防-微信小程序&解包反编译&数据抓包&APK信息资源提取 知识点&#xff1a; 0、APK信息资源提取 1、微信小程序致据抓包 2、做信小程序解包反编译 1、信息收集应用8资产提取&权限等 2、漏润发现-反编泽&脱壳&代码审计 3、安全评估组件8散密…

生成音频二维码:点燃听觉体验的魔法之门

在数字时代&#xff0c;创新不断涌现&#xff0c;生成音频二维码作为数字信息传递的新方式&#xff0c;正逐渐引领着一场音频体验的革命。通过融入二维彩虹技术&#xff0c;音频二维码不再只是静态的图形&#xff0c;而是成为一个能够点燃听觉体验的魔法之门&#xff0c;让我们…

MyBatis概述

三层架构 表现层&#xff1a;直接和前端交互&#xff0c;接受AJAX请求&#xff0c;返回json数据业务层&#xff1a;一是处理前端的请求&#xff0c;二是返回持久层获取的数据持久层(数据访问层)&#xff1a;直接操作数据库&#xff0c;完成CRUD&#xff0c;返回数据给业务层 …