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
  });

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

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

相关文章

typora激活破解——仅需修改js即可

先打开官网下载typora&#xff0c;typora官网地址&#xff1a;https://typoraio.cn/安装完成后先启动一次Typora&#xff0c;看到激活提示&#xff0c;不需要点试用&#xff0c;直接关闭软件即可。找到安装路径&#xff0c;一般在 C:\Program Files接着找到安装路径&#xff0c…

CC攻击与DDoS攻击有什么区别?如何进行有效防护?

CC攻击的前身是一个名为Fatboy攻击程序&#xff0c;而之所以后来人们会成为CC&#xff0c;是因为DDoS攻击发展的初期阶段&#xff0c;绝大部分DDoS攻击都能被业界熟知的“黑洞”&#xff08;collapsar&#xff0c;一种安全防护产品&#xff09;所抵挡&#xff0c;CC攻击的诞生就…

配置artifactory的反向代理和域名访问

一、概述 在许多情况下&#xff0c;组织会通过反向代理来提供对 Artifactory 的访问。在某些情况下&#xff0c;例如使用 Artifactory 作为 Docker 注册表&#xff0c;这种设置甚至是强制性的。为了简化反向代理的配置&#xff0c;Artifactory 提供了生成反向代理的功能&#x…

android开发需要哪些基础,已拿到offer

在线绘图神器 很多小伙伴咨询说博客文章里的技术图怎么画出来的&#xff0c;这里透个底&#xff0c;大部分都是通过processon画出来的&#xff0c;在线画图十分方便&#xff0c;几乎可以画出你想要的任何技术图&#xff0c;包括&#xff1a;流程图、思维导图、原型图、UML图、…

WEB漏洞 逻辑越权之支付数据篡改安全

水平越权 概述&#xff1a;攻击者尝试访问与他拥有相同权限的用户的资源 测试方法&#xff1a;能否通过A用户操作影响到B用户 案例&#xff1a;pikachu-本地水平垂直越权演示-漏洞成因 1&#xff09;可以看到kobe很多的敏感信息 2&#xff09;burp抓包&#xff0c;更改user…

Unity中URP实现水体(整理优化)

文章目录 前言一、优化水的深度1、我们把 水流动的方向 和 水深浅过渡值&#xff0c;整合到一个四维变量中2、修改 水体流动方向3、在片元着色器中&#xff0c;修改使用过渡变量 二、优化泡沫三、优化水下的扭曲1、修复原本扰动UV的计算 四、优化水面高光1、把高光强度、光滑度…

基于java+springboot景区行李寄存管理系统设计和实现

基于javaspringboot景区行李寄存管理系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取…

今年国内石油需求稳中有升,巡检机器人助力石油行业可持续发展

前言&#xff1a;全球能源市场出现普遍回落趋势&#xff0c;其中石油价格下降近20%&#xff0c;而天然气和煤炭价格更是下跌超过50%。此外&#xff0c;碳酸锂和光伏组件价格也纷纷下降超过50%。这种价格下滑对于全球经济的持续增长&#xff0c;尤其是控制通货膨胀方面&#xff…

OpenLayers线性渐变和中心渐变(径向渐变)

目录 1.前言2.添加一个面要素3.线性渐变3.1 第一个注意点3.2 第二个注意点 4.中心渐变&#xff08;径向渐变&#xff09;5.总结 1.前言 OpenLayers官网有整个图层的渐变示例&#xff0c;但是没有单个要素的渐变示例&#xff0c;我们这里来补充一下。OpenLayers中的渐变是通过fi…

创意电子名片二维码生成的优势:引领商务交流的全新潮流

在数字化时代&#xff0c;传统的纸质名片已逐渐被创新的电子名片二维码所取代。电子名片生成二维码作为一种便捷、高效的信息交换方式&#xff0c;具有诸多优势。而通过融入二维彩虹技术&#xff0c;电子名片二维码不仅实现了信息的即时传递&#xff0c;更在视觉上为商务交流增…

MySQL的索引和B+tree结构

目录 0.关于索引的常见面试题 1.什么是索引&#xff1f; 索引的优缺点 2.索引的数据结构&#xff0c;为什么InnoDb引擎使用Btree作为索引的数据结构&#xff1f; 分析怎样的索引才是好的 二插搜索树 红黑树 B-Tree BTree 哈希 为什么 InnoDB 存储引擎选择使用 Btree 索…

vue3创建h5 项目使用rem做响应式的配置

第一步 安装依赖&#xff1a; npm install amfe-flexible -S npm install postcss-px2rem -S第二步 main.ts文件中导入 import "amfe-flexible/index.js";第三步 进行配置&#xff1a; vue3 项目中创建 postcss.cinfig.js文件&#xff0c;这里是基于设计稿是750px…

好用的免费的文章一键生成神器

在当今信息爆炸的时代&#xff0c;创作内容是数字营销、网站运营等领域的核心。为了满足日益增长的内容需求&#xff0c;许多GPT生成的软件应运而生&#xff0c;它们能够帮助用户快速生成各种类型的文章&#xff0c;为创作提供了便利和效率。本文将介绍8款不同的免费文章一键生…

springboot3.x 以上,官方不建议使用spring.factories

springboot2.7.x 以上,官方不建议使用spring.factories 最近公司项目升级.需要将springcloud/springboot版本升级到2.7.x以上,再升级的过程中遇到了太多的问题.总结在了如下文章中: springboot艰难版本升级之路!! springboot 2.3.x版本升级到2.7.x版本 这篇文章就重点是梳理一…

力扣180 连续出现的数字

如何有效地识别在数据库中至少连续出现三次的数字&#xff1f; 目录 题目描述 解题思路 完整代码 进一步探索 题目描述 表&#xff1a;Logs ---------------------- | Column Name | Type | ---------------------- | id | int | | num | varch…

安科瑞智慧消防产品在酒店行业的应用

摘要&#xff1a;进入 21 世纪以来&#xff0c;随着网络技术的发展&#xff0c;世界经济呈现全球化趋势&#xff0c;作为消费者衣食住行的重要组成部分&#xff0c;酒店行业也是生活服务市场重要的组成部分。在经济发展的环境下&#xff0c;在旅游业兴起的趋势下&#xff0c;酒…

vue系列——vscode,node.js vue开发环境搭建

第一步安装node.js 推荐使用nvm进行node.js 的安装 nvm(Node.js version manager) 是一个命令行应用&#xff0c;可以协助您快速地 更新、安装、使用、卸载 本机的全局 node.js 版本。 可以去网上查找相关版本 我这里使用 nvm-setu… 链接:https://pan.baidu.com/s/1UEUtmzw5x…

私域运营的7个关键策略

1.通过私域工具实现标签&#xff0c;话术&#xff0c;聚合聊天等 2、公域获客&#xff0c;私域精准化运营&#xff0c;变现解决方案 3、标签化运营&#xff0c;筛选不同层级客户&#xff0c;根据对方需求提供解决方案 4、做私域需要坚持&#xff0c;不断累计信任 5、高复购…

matplotlib——折线图(python)

前言 在学习数据分析前&#xff0c;一定要有python基础&#xff0c;不一定要非常熟练的掌握这门语言&#xff0c;但一定要对python有个大概的了解&#xff08;就像我一样&#xff0c;大一学过python&#xff0c;但是现在忘的差不多了&#xff0c;但是没关系&#xff0c;有个大…

MYSQL 解释器小记

解释器的结果通常通过上述表格展示&#xff1a; 1. select_type 表示查询的类型 simple: 表示简单的选择查询&#xff0c;没有子查询或连接操作 primary:表示主查询&#xff0c;通常是最外层的查询 subquery :表示子查询&#xff0c;在主查询中嵌套的查询 derived: 表示派…