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

news2024/9/21 3:19:45

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.coloradmin.cn/o/1481213.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

存储过程基本了解

文章目录 介绍存储过程示例1. 目的2. 输入参数3. 输出参数4. 执行逻辑5. 返回值6. 示例用法7. 注意事项 存储过程的关键字有哪些简单实操 介绍 存储过程是一组预编译的SQL语句&#xff0c;以及流程控制语句&#xff0c;封装在数据库服务器中并可以被重复调用。它们可以接收参数…

仿牛客网项目---私信列表和发送列表功能的实现

这篇文章我们来讲一下我的这个项目的另外一个功能&#xff1a;私信列表和发送列表功能。 先来设计DAO层。 Mapper public interface MessageMapper {// 查询当前用户的会话列表,针对每个会话只返回一条最新的私信.List<Message> selectConversations(int userId, int of…

WIN10 无密码自动登录

1、家里重装了一下WIN10系统&#xff0c;第一次登陆居然用了微软网站账号&#xff0c;结果密码忘记了&#xff0c;后面只能用PIN码登陆系统。 2、需要登录微软的网站修改密码&#xff1a; Microsoft account | Sign In or Create Your Account Today – Microsoft 3、在运行…

精品ssm的社区团购系统购物商城小程序

《[含文档PPT源码等]精品基于ssm的社区团购系统[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&#xff1a;HTML5,CSS3、Jav…

SpringBoot 整合WebService

文章目录 WebService1.简单介绍WebService1.1. 类型1.2. 架构1.3. 主要特点1.4. 使用场景1.5. Web服务标准和技术 2.案例-WebServiceDemo2.1.引入配置文件2.2.创建接口2.3.创建接口实现类2.4.创建WebService配置类2.5.测试 WebService Web服务&#xff08;Web Services&#xf…

kotlin安卓开发教程视频,2024年Android开发陷入饱和

Android基础 1、什么是ANR 如何避免它&#xff1f; 如果耗时操作需要让用户等待&#xff0c;那么可以在界面上显示进度条。 2、View的绘制流程&#xff1b;自定义View如何考虑机型适配&#xff1b;自定义View的事件 3、分发机制&#xff1b;View和ViewGroup分别有哪些事件分…

蓝桥杯备战刷题three(自用)

1.合法日期 #include <iostream> #include <map> #include <string> using namespace std; int main() {map<string,int>mp;int days[13]{0,31,28,31,30,31,30,31,31,30,31,30,31};for(int i1;i<12;i){for(int j1;j<days[i];j){string sto_strin…

在线ai写作,让你随时随地创作优质内容

如今的ai技术已经渗透到我们生活的方方面面。其中&#xff0c;AI写作成为了一个备受关注的领域。如今&#xff0c;我们可以利用在线ai写作在任何时间、任何地点创作出优质的内容。 传统的写作过程需要大量的时间和精力。从构思到写作再到修改&#xff0c;每一个环节都需要我们投…

C# 解决uploadify插件上传时造成session丢失问题

出现的问题&#xff1a; 在应用uploadify插件实现上传图片时&#xff0c;报了HTTP Error&#xff0c;经过在Network查看上传方法报错码是302&#xff0c;那这里就可以知道问题是什么了&#xff0c;HTTP 302是请求被重定向&#xff0c;如果你的uploadify处理上传方法有session验…

ABAP - OOALV 用户交互事件

当用户要根据ALV进行某些功能操作比如打印表单时&#xff0c;OOALV标准按钮无法满足用户需求的时候&#xff0c;就要用到自定义按钮来实现了。思路&#xff1a;在OOALV增加一个自定义按钮&#xff0c;类CL_GUI_ALV_GRID提供了内置事件toolbar来完成&#xff0c;通过自定义按钮的…

Apache Flink连载(三十五):Flink基于Kubernetes部署(5)-Kubernetes 集群搭建-1

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 ​编辑

HTTPS是什么,详解它的加密过程

目录 1.前言 2.两种加密解密方式 2.1对称加密 2.2非对称加密 3.HTTPS的加密过程 3.1针对明文的对称加密 3.2针对密钥的非对称加密 3.3证书的作用 1.前言 我们知道HTTP协议是超文本传输协议,它被广泛的应用在客户端服务器上,用来传输文字,图片,视频,js,html等.但是这种传…

MyBatis 学习(五)之 高级映射

目录 1 association 和 collection 介绍 2 案例分析 3 一对一关联和一对多关联 4 参考文档 1 association 和 collection 介绍 在之前的 SQL 映射文件中提及了 resultMap 元素的 association 和 collection 标签&#xff0c;这两个标签是用来关联查询的&#xff0c;它们的属…

指针与malloc动态内存申请,堆和栈的差异

定义了两个函数print_stack()和print_malloc()&#xff0c;分别演示了两种不同的内存分配方式&#xff1a;栈内存和堆内存。然后在main()函数中调用这两个函数&#xff0c;并将它们返回的指针打印出来。 由于print_stack()中的数组c是在栈上分配的&#xff0c;当函数返回后&…

LabVIEW非接触式电阻抗层析成像系统

LabVIEW非接触式电阻抗层析成像系统 非接触式电阻抗层析成像&#xff08;NEIT&#xff09;技术以其无辐射、非接触、响应速度快的特点&#xff0c;为实时监测提供了新的解决方案。基于LabVIEW的电阻抗层析成像系统&#xff0c;实现了数据的在线采集及实时成像&#xff0c;提高…

黑马JavaWeb课程中安装vue脚手架出现的问题

1 安装node.js 要想前端工程化&#xff0c;必须安装node.js&#xff0c;前端工程化的环境。 在成功安装node.js后&#xff0c; 修改全局包安装路径为Node.js安装目录&#xff0c; 修改npm镜像源为淘宝镜像源&#xff0c;这里出现第一个问题&#xff0c;视频中给的淘宝镜像为&…

力扣SQL50 无效的推文 查询

Problem: 1683. 无效的推文 思路 &#x1f468;‍&#x1f3eb; 参考 char_length(str)&#xff1a;计算 str 的字符长度length(str)&#xff1a;计算 str 的字节长度 Code select tweet_id from Tweets where char_length(content) > 15;

G8-ACGAN理论

本文为&#x1f517;365天深度学习训练营 中的学习记录博客 原作者&#xff1a;K同学啊|接辅导、项目定制 我的环境&#xff1a; 1.语言&#xff1a;python3.7 2.编译器&#xff1a;pycharm 3.深度学习框架Pytorch 1.8.0cu111 一、对比分析 前面的文章介绍了CGAN&#xf…

面试官上来就让手撕HashMap的7种遍历方式,当场愣住,最后只写出了3种

HashMap的7种遍历方式 四大类遍历方式 其实在JDK1.8之前&#xff0c;遍历的方式远没有现在这样多&#xff0c;为了提高开发效率&#xff0c;JDK1.8开始引入了Stream流、Lambda 表达式等新特性&#xff0c;这让很多数据结构的遍历方式也丰富了起来。目前&#xff0c;常用的遍历方…

Node.js中的缓存策略和缓存技巧

在Node.js中&#xff0c;缓存策略和缓存技巧是提升应用性能和用户体验的关键因素。通过有效地利用缓存&#xff0c;我们可以显著减少系统资源的消耗&#xff0c;加快数据访问速度&#xff0c;从而提升整体的网站性能。本文将针对Node.js中的缓存策略和缓存技巧展开深入探讨&…